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👈

Matej Rešetár

Matej is an app developer with a knack for teaching others. If he's not programming, making tutorials or doing other business, he's mostly working out, listening to audiobooks and taking cold showers.

  • 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: [

  • >