Make Flutter's bottom sheet resize with keyboard height.

Today we focus on making Flutter's showModalBottomSheet responsive by reacting to the showing and hiding of the onscreen keyboard.

The problem

By default, Flutter's showModalBottomSheet does not account for the keyboard being shown and hidden. When the keyboard is shown, it doesn't adjust its height to account for that.

The solution

By using a combination of isScrollControlled and MediaQuery's viewInsets we can solve the problem.

      showModalBottomSheet(
    context: context,
    isScrollControlled: true, // Required,
    builder: (context) => SingleChildScrollView(
        padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom,  // Always updated with the keyboard's height
        ),
        child: YourBottomSheetContent()
    )
)

			

Explanation

The isScrollControlled enables the bottom sheet to be draggable when it has a scrollable child

The viewInsets.bottom returns how much space has been obscured by the keyboard