Flutter showModalBottomSheet to show ontop of BottomNavigationBar - flutter

Question

I want to show a modalsheet like this
above the BottomsNavigationBar like so. I have tried this: But then my whole bottomNavigationBar menu becomes unclickable.
My code for this is:
Widget build(BuildContext context) {
final theme = Theme.of(context);
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
return WillPopScope(
onWillPop: () => _willPopCallback(context),
child: Scaffold(
key: _scaffoldKey,...
bottomNavigationBar: BottomNavigationBar(
onTap: (v) {
_scaffoldKey.currentState!.showBottomSheet<Null>(
(BuildContext context){
return GridView.count....
}
}).....
Then this is my original code:
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return WillPopScope(
onWillPop: () => _willPopCallback(context),
child: Scaffold(
body: PageView(
controller: _controller,
physics:const NeverScrollableScrollPhysics(),
onPageChanged: (v) => setState(() => _selectedIndex = v),
children: BottomNavigationList.pageList(context),
),
bottomNavigationBar: BottomNavigationBar(
onTap: (v) {
setState(() {
if (v == 3) {
showModalBottomSheet(
...
builder: (BuildContext context){
return GridView.count...
but then it is going ontop of the BottomNavigationBar. Like this:
Is there any way I can have it clipped on top of the BottomNavigationBar like in the first image or a FAB
UPDATE: I have tried the suggested implementation and got this:
Maybe let me try to rephrase: so the first image has 3 rows, the most bottom row is the bottomNavigationBar. When and if you click on it when you are on that selectedIndex of the bottomNav, the other two rows have to show, WITHOUT obscuring the bottomNav. #Yeasin, in your solution there, the purple row has to show when the hamburger menu is pressed, and hide when pressed again that is why I had used the showModalBottomSheet and also tried the showBottomSheet

Answer 1

You can use Stack Or Column with boolean to handle view.
Using Column
class _CustomViewState extends State<CustomView> {
bool _showBottomSheet = false;
#override
Widget build(BuildContext context) {
return Scaffold(body: LayoutBuilder(
builder: (context, constraints) {
return Column(
children: [
Expanded(
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: ElevatedButton(
onPressed: () {
setState(() {
_showBottomSheet = !_showBottomSheet;
});
},
child: Text(
"show btmSheet",
)),
),
],
),
),
if (_showBottomSheet)
SizedBox(
//get single gridWith * mainAxisCount
height: constraints.maxWidth / 4 * 2, //based on your view
child: GridView.count(
crossAxisCount: 4,
physics: NeverScrollableScrollPhysics(),
children: [
...List.generate(
8,
(index) => Container(
color: Colors.pink,
child: Text("$index"),
),
)
],
),
),
Container(
width: constraints.maxWidth,
color: Colors.deepPurple,
height: kToolbarHeight,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
...List.generate(
4,
(index) => ElevatedButton(
onPressed: () {
print("tapped on $index");
},
child: Text("$index"),
),
)
],
),
)
],
);
},
));
}
}
Using Stack
class CustomView extends StatefulWidget {
CustomView({Key? key}) : super(key: key);
#override
_CustomViewState createState() => _CustomViewState();
}
class _CustomViewState extends State<CustomView> {
bool _showBottomSheet = false;
#override
Widget build(BuildContext context) {
return Scaffold(body: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
Align(
alignment: Alignment.center, // based on UI,
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: ElevatedButton(
onPressed: () {
setState(() {
_showBottomSheet = !_showBottomSheet;
});
},
child: Text(
"show btmSheet",
)),
)
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (_showBottomSheet)
SizedBox(
height: 100,
child: GridView.count(
crossAxisCount: 4,
physics: NeverScrollableScrollPhysics(),
children: [
...List.generate(
8,
(index) => Container(
color: Colors.pink,
))
],
),
),
Container(
width: constraints.maxWidth,
color: Colors.deepPurple,
height: kToolbarHeight,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
...List.generate(
4,
(index) => ElevatedButton(
onPressed: () {
print("tapped on $index");
},
child: Text("$index"),
),
)
],
),
)
],
),
)
],
);
},
));
}
}