Flutter New Learning - Week 1

Hello #FlutterDev,

We are going to share here what we are learning at 7Span every week. In mobile team, we have started to share something new by each developers on every Wednesday.

Apart from that I also love to explore new things in Flutter so I am thinking to share here so everyone can get something new to learn.

Today, In this first post I am going to share about Flutter BottomSheet issue that we got yesterday and I found different solutions for that.

The issue was How we can change the height of BottomSheet in?Flutter?

Here are the different types of solution.

Solution 1: DraggableScrollableSheet

You can wrap your child widget of ModalBottomSheet with DraggableScrollableSheet

onPressed: () => showModalBottomSheet
            context: context,
            builder: (BuildContext context) {
              return DraggableScrollableSheet(
                initialChildSize: 0.5,
                maxChildSize: 1,
                minChildSize: 0.25,
                builder:
                    (BuildContext context, ScrollController scrollController) {
                  return Container(
                    color: Colors.white,
                    child: ListView.builder(
                      controller: scrollController,
                      itemCount: 25,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(title: Text('Item $index'));
                      },
                    ),
                  );
                },
              );
            },
          ),(        

Solution 2: Wrap the widget you're trying to show in the bottomSheet within a Container, SizedBox, etc and set its?height?property to the desirable size.

Solution 3: Sometimes your fixed height will not work as default height of bottomSheet is half of screen size.

If you want your?bottomSheet?to EXPAND according to your content DYNAMICALLY then you can use isScrollControlled: true property.

Here is the snippet with Wrap widget:

showModalBottomSheet<dynamic>(
    isScrollControlled: true,
    context: context,
    builder: (BuildContext bc) {
      return Wrap(
          children: <Widget>[...]
      )
    }
)        

Solution 4: You can control the height effectively with?FractionallySizedBox?combined with?isScrollControlled: true

await showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (context) {
          return FractionallySizedBox(
            heightFactor: 0.8,
            child: BigListViewWidget(),
          );
        });        

Do let me know which solution works for you?

I hope you will subscribe & share this newsletter to get more learning posts.

Lets connect on LinkedIn: Pratik Butani

Thanks for reading my first post.