Open bottom sheet below the bottom navigation bar

Question

I have created a bottom navigation bar and a bottom sheet and after clicking the navigation bar item the bottom sheet should come up. As you can see it works but it comes over the bottom navigation bar. Is there a way to make the bottom sheet appear below the navigation bar?

How it looks now -

Navigation bar -

class Dashboard extends StatefulWidget {
  const Dashboard({Key? key}) : super(key: key);

  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  int _bottomNavIndex = 0;

  void _onItemTapped(int index) {
    if (index != 1) {
      setState(() {
        _bottomNavIndex = index;
      });
    } else {
      chooseOneOptionBottomSheet(context);
    }
  }

  Widget? pageCaller(int index) {
    switch (index) {
      case 0:
        {
          return const Home();
        }
      case 3:
        {
          return const Notifications();
        }
      case 4:
        {
          return const MyProfile();
        }
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    bool keyboardIsOpen = MediaQuery.of(context).viewInsets.bottom != 0;
    return Scaffold(
      body: pageCaller(_bottomNavIndex),
      floatingActionButton: Visibility(
        visible: !keyboardIsOpen,
        child: SizedBox(
          height: 70.0,
          width: 70.0,
          child: FittedBox(
            child: FloatingActionButton(
              onPressed: () async {
                await availableCameras().then((value) => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => CameraPage(
                        cameras: value,
                      ),
                    )));
              },
              tooltip: 'Scan',
              child: const ImageIcon(
                AssetImage('assets/icons/scan.png'),
              ),
              elevation: 4.0,
              backgroundColor: primaryColor,
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        onTap: _onItemTapped,
        currentIndex: _bottomNavIndex,
        items: [ //items ],
        type: BottomNavigationBarType.fixed,
        fixedColor: primaryColor,
        unselectedItemColor: secondaryText,
        selectedLabelStyle:
            const TextStyle(fontFamily: 'InterMedium', fontSize: 12),
        unselectedLabelStyle:
            const TextStyle(fontFamily: 'InterMedium', fontSize: 12),
      ),
    );
  }
}

Bottom sheet -

void chooseOneOptionBottomSheet(context) {
  showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) => Container(
//content
));
}

score 1 · Answer 1 · answered Feb 19 '22 at 05:41

1

add this line to your showModelBottomSheet useRootNavigator: true,

the example code,

showModalBottomSheet(
      context: context,
      useRootNavigator: true,
      builder: (context) {},
    );

answered Feb 19 '22 at 05:41

Anand

4,355
2
35
45

1

doesn't work nothing happens – Senith Umesha Feb 20 '22 at 01:50
1

neither for me. – Alexandru Rusu Aug 29 '22 at 07:02
bt it worked for me @Alexndru,@SenithUmesha – Anand Aug 29 '22 at 07:09

score -1 · Answer 2 · answered Feb 19 '22 at 01:08

-1

tries

void chooseOneOptionBottomSheet(context) {
  showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) => Container(
  height:200,
));
}

answered Feb 19 '22 at 01:08

Maurice

29
2

1

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Feb 22 '22 at 00:45

Open bottom sheet below the bottom navigation bar

2 Answers2