Search code examples
flutterdartbottomnavigationview

flutter modal bottom sheet above navigation bar

I have an navigation bar with icon button. When i pressed the button i want show modal bottom sheet above the navigation bar(so nav bar was visible). I cant i try long but cant make it.

like this

I expect to show modal bottom sheet above the navigation bar

BottomNavigationBarItem(
            icon:Container(
              height: 40,
              width: 54,
              decoration: const BoxDecoration(
                  color: Colors.orange,
                borderRadius: BorderRadius.all(Radius.circular(10.0)
                ),
              ),
              child: IconButton(onPressed: () {
                showModalBottomSheet(
                    context: context,
                    //backgroundColor: Colors.transparent,
                    builder: (context) => Container(
                      height:200,
                      child: ListTile(
                        leading: Icon(Icons.share),
                        title: Text('Share'),
                      ),
                    ));
              },
                icon:const Icon(Icons.add_outlined,color: Colors.white,),),
            ),
            label: '',
          ),
Solution

  • If you are using modal_bottom_sheet package, just add the parameter useRootNavigator and set it to true.

    The useRootNavigator parameter ensures that the root navigator is used to display the bottom sheet when set to true. This is useful in the case that a modal bottom sheet needs to be displayed above all other content but the caller is inside another Navigator.

    If you are using Flutter’s internal showModalBottomSheet, don’t worry, it also has the same parameter. Just set it to true.

    BottomNavigationBarItem(
            icon:Container(
              height: 40,
              width: 54,
              decoration: const BoxDecoration(
                  color: Colors.orange,
                borderRadius: BorderRadius.all(Radius.circular(10.0)
                ),
              ),
              child: IconButton(onPressed: () {
                showModalBottomSheet(
                    context: context,
                    //backgroundColor: Colors.transparent,
                    useRootNavigator: true,
                    builder: (context) => Container(
                      height:200,
                      child: ListTile(
                        leading: Icon(Icons.share),
                        title: Text('Share'),
                      ),
                    ));
              },
                icon:const Icon(Icons.add_outlined,color: Colors.white,),),
            ),
            label: '',
          ),