Flutter Modal Bottom Sheet Tutorial

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👈

Matt Rešetár

Matt is an app developer with a knack for teaching others. Working as a senior software developer at HandCash, 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 🎸

  • Andy says:

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

  • >