Screen sizes are changing, they’re getting ever bigger and almost without any bezels. While having a bigger screen is awesome, users often cannot reach to the top of the screen with only one hand.

For us, developers, this means putting more controls to the bottom of the screen. This is true for both the app bars and navigation drawers.

In this tutorial we’re going to focus on the bottom navigation drawer and we’re going to implement it as a modal bottom sheet. We’re also going to make it look nice and material with rounded corners.

?Get the code from this tutorial?

About the author 

Matt Rešetár

Matt is an app developer with a knack for teaching others. Working as a freelancer and most importantly developer educator, he is set on helping other people succeed in their Flutter app development career.

You may also like

  • Just to point out, you don’t need to give a height to the Container, just set the mainAxisSize on the Column to min
    e.g.
    Column _buildBottomNavigationMenu() {
    return Column(
    mainAxisSize: MainAxisSize.min,
    children: [

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >