Question 257455 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to put a Bottom Sheet above BottomNavBar

I was wondering how do you put a bottomsheet above the bottomnavbar, like for example the binance lite app as a case right here:
example

i tried using rootnavigator false but it didnt work because in my bottomnavbar, i got a logo and i want when i click on it, it pops up a modal but that logo from the bottomnavbar is still there.

Just using showbottommodalsheet doesnt work because it covers the bottomnavbar so the logo is not seen.
can u guys help me with a solution please?

this is my code for the bottomnavbar

BottomNavigationBarItem(
              icon: GestureDetector(
                onTap: () => 
                  showModalBottomSheet(context: context, 
                  useRootNavigator: false,
                  builder: (BuildContext context) {
                    return Container();
                  })
                ,
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(0, 4, 0, 8),
                  child: Assets.images.logo.svg(),
                ),
              ),
              label: 'Buy', 
            ),
Tags:

2

Answers


  1. 0

    you can return a Column under the bottom sheet then use the bottom navbar and your bottom sheet item inside the column. this is the ideal solution.

    Login or Signup to reply.
  2. 0

    first, create a widget for your bottom sheet it can be a separate dart file or inside a class. then put this code there:

        import 'package:flutter/material.dart';
    
    class BottomSheetExample {
      late BuildContext context;
      BottomSheetExample(this.context,);
      Future<void> tripDetails() async {
        final body = StatefulBuilder(builder: (modalContext, modalSetState) {
          return const SizedBox(
            height: 400,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [Text('This Is BottomSheet')],
            ),
          );
        });
       return await showModalBottomSheet(
          context: context ,
          isScrollControlled: true,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              top: Radius.circular(8),
            ),
          ),
          clipBehavior: Clip.antiAliasWithSaveLayer,
          backgroundColor: Colors.white,
          builder: (BuildContext context) {
            return Container(
              padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: body,
                  ),
                ],
              ),
            );
          },
        );
      }
    }

    OK, that’s it. You have to call

    BottomSheetExample(context).tripDetails()

    you can call this by the VoidCallBack method like this:

    GestureDetector(
    onTap: ()=> BottomSheetExample(context).tripDetails(),
    child: const Padding(
       padding: EdgeInsets.all(8.0),
       child: Text('this is bottom sheet),
       )
     )

    and The final result is this:

    enter image description here

    Hope it will solve your problem. let me know.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search