Aug 11, 2021

[Flutter/dart] Scroll inside ModalBottomSheet

Overview

In the smartphone app, the menu may appear from the bottom of the screen when you select the menu, and in Flutter you can create it with showModalBottomSheet().

However, if there are many menus you want to display, you will not be able to fit them in the ModalBottomSheet. In such cases, we will show you how to scroll within the ModalBottomSheet.

Method

Use DraggableScrollableSheet.

Create a DraggableScrollableSheet in the showModalBottomSheet builder as shown below, and specify the widget you want to display in its child.

@override
Widget build(BuildContext context) {

  List<String> menues=List.generate(20, (index) => "メニュー${index}");

  return Scaffold(
      appBar: AppBar(
        title: Text('demo'),
      ),
      body: Container(
        padding: const EdgeInsets.all(16),
        child: RaisedButton(
          child: Text('show menu'),
          onPressed: ()async{
            int t=await showModalBottomSheet(
              context: context,
              builder: (context)=> DraggableScrollableSheet(  //here！
                initialChildSize: 1,
                builder: (BuildContext context, ScrollController 
                scrollController)=>
                  Container(
                    child: ListView(
                      shrinkWrap: true,
                      children: menues.map((e) =>
                        ListTile(
                          title: Text(
                            e,
                            style: TextStyle(
                              fontSize: 18
                            ),
                          ),
                        )
                      ).toList(),
                    ),
                  )
              )
            );
          },
        )
      )
  );
}