Flutter showModalBottomSheet to show ontop of BottomNavigationBar

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

you are trying to show bottomnavBar and bottomSheet at the same time? — Md. Yeasin Sheikh, Nov 29 '21 at 16:22
Yes like in first picture, bottom row being the bottomNavBar — Vincent H Guyo, Nov 29 '21 at 18:39
It has been answered here https://stackoverflow.com/questions/63657489/flutter-show-showbottomsheet-over-bottomnavigationbar — Pol, Nov 30 '21 at 05:35
Thanks for that but I already tried that, I want the OP screen 2 from that, but if I implement it in my code the whole bottom nav become unclickable... — Vincent H Guyo, Nov 30 '21 at 08:14

score 0 · Answer 1 · answered Nov 30 '21 at 09:01

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

Thanks @Yeasin. But not quite what I am looking for, I have updated my question based on your solution — Vincent H Guyo, Dec 01 '21 at 15:28
you can just replace `ElevatedButton onPressed` method on `hamburger` pressed to switch value — Md. Yeasin Sheikh, Dec 01 '21 at 15:35
Okay, I see what you did there, the `Elevated Button` was out of the SafeArea, so I did not realize it...thanks. let me try and put everything there and will let you know — Vincent H Guyo, Dec 01 '21 at 18:58

Flutter showModalBottomSheet to show ontop of BottomNavigationBar

1 Answers1