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 Flutter freelancer and most importantly developer educator, he doesn't have a lot of free time 😅 Yet he still manages to squeeze in tough workouts 💪 and guitar 🎸

You may also like

Flutter Custom & Staggered Page Transition Animation Tutorial

Flutter Firebase & DDD Course [5] – Sign-In Form Logic

  • 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"}
    >