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.
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: '',
),
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: '',
),