0

I'm using a nested MaterialApp such that, FirstMaterialApp has SecondMaterialApp as its child. I'm facing an issue when calling showDialog from SecondMaterialApp, that is it appears on the entire screen as if it is opened from the FirstMaterialApp.

I want that the dialog remains confined to the boundaries of the SecondMaterialApp.

In the image, I have intentionally stretched the Dialog across the width so that it is apparent that it covers the FirstMaterialApp.

enter image description here

First 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',
              ),
            ],
          ),
        );
  }
}

3 Answers 3

1

Found the solution by using a showDialog parameter named useRootNavigator. Setting it to false provided the required results.

Now the dialog is confined to the boundaries of child MaterialApp and the backgroundOverly from showDialog covers only the second material app.

enter image description here

0

-> use Your Second File code

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',
              ),
            \],
          ),
        );
      }
    }
3
  • Now the dialog is confined to the boundaries of the second app but the background overlay still covers the first app. Dec 16, 2021 at 11:40
  • send SS Your code
    – kk web
    Dec 16, 2021 at 11:41
  • didn't get it, please elaborate! Dec 16, 2021 at 11:43
0

create material before dialog

return Material(child: Dialogue());
3
  • Using Material as the parent of Dialog shows an only dialog and the parent widgets are all gone. Dec 16, 2021 at 11:41
  • can you please explain what actually you want?because i run your code........
    – pub Dart
    Dec 16, 2021 at 14:14
  • Thanks a lot, but my problem is solved and I have answered the question. I wanted that the dialog is shown within the boundaries of the child Material app and its background overlay only covers the child Material App. Dec 17, 2021 at 9:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.