Flutter | How to display a full screen modal inside nested navigation?

Question

In Flutter, I have a tabbar. Each tab has nested navigation (i.e the parent widget for each tab is Navigator). If a modal is shown, the modal does not cover the tabbar.

Question: How can I display a full screen modal page, that also covers the tabbar?

Example: The image below shows how the app appears if a BottomSheet is displayed inside a Navigator - The tabbar is not covered.

Answer 1

Try below code hope its help to you. when you open modelbottomsheet then hide your bottonnavigation bar see result image

  ElevatedButton(
            child: const Text('showModalBottomSheet'),
            onPressed: () {
              showModalBottomSheet<void>(
                context: context,
                isScrollControlled: true,
                builder: (BuildContext context) {
                  return Container(
                    height:  700,
                    color: Colors.white,
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          const Text('Modal BottomSheet'),
                          ElevatedButton(
                            child: const Text('Close BottomSheet'),
                            onPressed: () => Navigator.pop(context),
                          )
                        ],
                      ),
                    ),
                  );
                },
              );
            },
          ),

Add above code on your widget class

Result screen->

Answer 2

You just need to pass in the right context at the root navigation level to the showBottomModalSheet.

Your context should look like this:

context: context.findRootAncestorStateOfType<NavigatorState>()!.context,