Flutter Bottom Sheet — Everything you need to know

Well, Bottom Sheet is one of the ways to show certain view to the users to perform some actions.

To experience good UX, we need to tackle it very carefully. Let’s dive into it.

Using the below code we can show a simple bottom sheet.

showModalBottomSheet(
  context: context,
  builder: (ctx) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text("I am bottom sheet"),
      ],
    );
  },
);

If you want to add border top left and top right corner.

showModalBottomSheet(
  context: context,
  shape:  const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0),
        topRight: Radius.circular(10.0)
    ),
  ),
  builder: (ctx) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text("I am bottom sheet"),
      ],
    );
  },
);

If you want your bottom sheet to take 80% of the screen. We also take advantage of isScrollControlled. Setting it to true and using SingleChildScrollview widget will make our bottom sheet scrollable within the size.

showModalBottomSheet(
  context: context,
  shape:  const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0),
        topRight: Radius.circular(10.0)
    ),
  ),
  isScrollControlled: true,
  constraints: BoxConstraints.tight(Size(
      MediaQuery.of(context).size.width,
      MediaQuery.of(context).size.height * .8)),

  builder: (ctx) {
    return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          Text("I am bottom sheet"),
        ],
      ),
    );
  },
);

What if we have multiple textfield and when we type, our textfield should be above the keyboard. Let’s see how to achieve this.

See the above image. We have focused on a textfield but we can’t see it. Well using viewinsets with padding widget we can overcome it.

showBottomSheetDialog(BuildContext context) {
  showModalBottomSheet(
    context: context,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0)),
    ),
    isScrollControlled: true,
    constraints: BoxConstraints.tight(Size(MediaQuery.of(context).size.width,
        MediaQuery.of(context).size.height * .8)),
    builder: (ctx) {
      return Padding(
        padding: MediaQuery.of(context).viewInsets,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              TextField(),
              SizedBox(
                height: 16,
              ),
              TextField(),
              SizedBox(
                height: 16,
              ),
              TextField(),
              SizedBox(
                height: 16,
              ),
              TextField(),
              SizedBox(
                height: 16,
              ),
              TextField(
                decoration: InputDecoration(hintText: "I am number 5"),
              ),
              SizedBox(
                height: 16,
              ),
              TextField(),
              SizedBox(
                height: 16,
              ),
            ],
          ),
        ),
      );
    },
  );
}

Now we can see our desired textfield above the keyboard.

I hope you find this reading helpful. Thanks.