在嵌套的 MaterialApp 中显示对话框 - flutter

Question

我正在使用嵌套的 MaterialApp，因此 FirstMaterialApp 有 SecondMaterialApp 作为其子项。从 SecondMaterialApp 调用 showDialog 时我遇到了一个问题，它出现在整个屏幕上，就好像它是从 FirstMaterialApp.

打开的一样

我希望对话框保持在 SecondMaterialApp 的边界内。

在图片中，我有意在整个宽度方向上拉伸了对话框，因此很明显它覆盖了 FirstMaterialApp。

第一个 MaterialApp

class FirstMaterialApp extends StatelessWidget {
  const FirstMaterialApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First Material App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('First App Scaffold'),
        ),
        body: Center(
          child: DeviceFrame(
              device: Devices.ios.iPhone12, screen: const SecondMaterialApp()),
        ));
  }
}

Second MateriaApp

class SecondMaterialApp extends StatelessWidget {
  const SecondMaterialApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        title: 'Second Materia App', home: SecondScaffold());
  }
}

class SecondScaffold extends StatelessWidget {
  const SecondScaffold({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 40.0),
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Second App Home'),
        ),
        body: Center(
          child: TextButton(
            child: const Text('Open Dialog'),
            onPressed: () async {
              await showDialog(
                  context: context,
                  builder: (buildContext) => CustomDialog());
            },
          ),
        ),
      ),
    );
  }
}

class CustomDialog extends StatelessWidget {
  const CustomDialog({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Dialog(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: const [
              Text(
                'Dialog',
                style: TextStyle(fontSize: 20.0),
              ),
              Text(
                'Message Text',
              ),
            ],
          ),
        );
  }
}

Answer 1

-> 使用您的第二个文件代码

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    class SecondMaterialApp extends StatelessWidget {
      const SecondMaterialApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
            title: 'Second Materia App', home: SecondScaffold());
      }
    }
    
    class SecondScaffold extends StatelessWidget {
      const SecondScaffold({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: const EdgeInsets.only(top: 40.0),
          child: Scaffold(
            appBar: AppBar(
              title: const Text('Second App Home'),
            ),
            body: Center(
              child: TextButton(
                child: const Text('Open Dialog'),
                onPressed: () async {
                  await showDialog(
                      context: context,
                      builder: (buildContext) => const CustomDialog());
                },
              ),
            ),
          ),
        );
      }
    }
    
    class CustomDialog extends StatelessWidget {
      const CustomDialog({
        Key? key,
      }) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return CupertinoAlertDialog(
          content: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: const \[
              Text(
                'Dialog',
                style: TextStyle(fontSize: 20.0),
              ),
              Text(
                'Message Text',
              ),
            \],
          ),
        );
      }
    }

Answer 2

在对话框

之前创建material

return Material(child: Dialogue());

Answer 3

使用名为 useRootNavigator 的 showDialog 参数找到了解决方案。将其设置为 false 可提供所需的结果。

现在对话框仅限于子 MaterialApp 的边界，showDialog 中的 backgroundOverly 仅覆盖第二个 material 应用程序。

在嵌套的 MaterialApp 中显示对话框 - flutter

Showing Dialog in nested MaterialApp - flutter

flutter

flutter-layout

flutter-web