flutter scrollable modal bottom sheet

Question

Is there a way to make the ModalBottomSheet with a fixed heigh i don't want it's height to expand when scrolling

This is the code i used

showModalBottomSheet(
               context: context,
               isScrollControlled: true,
               backgroundColor: Colors.transparent,
                 builder: (context) => DraggableScrollableSheet(
                 builder: (BuildContext context,
               ScrollController scrollController) {
               return Container(
               color: Colors.blue[100],
               child: ListView.builder(
               controller: scrollController,
               itemCount: 25,
               itemBuilder:(BuildContext context,int index) {
                return ListTile(
                        title: Text('Item $index'));
               },
             ),
          );
        },
     ),
    );

score 2 · Answer 1 · answered Feb 06 '22 at 02:14

You can remove the DraggableScrollableSheet. That widget allows for the height expanding I think. So after removing it, you can set a height on the container

final double height = 200;
showModalBottomSheet(
       context: context,
       backgroundColor: Colors.transparent,
       builder: (context){
       return Container(
         height: height,
         color: Colors.blue[100],
         child: ListView.builder(
         itemCount: 25,
         itemBuilder:(BuildContext context,int index) {
          return ListTile(
                  title: Text('Item $index'));
         }
      )
    );
  },
);

score 1 · Answer 2 · answered Feb 06 '22 at 02:14

1

You can give your container that is currently blue coloured. a fixed height say height:200.. And you also need to remove draggable scrollable sheet builder from you bottom sheet.

answered Feb 06 '22 at 02:14

Yash Bhansali

420
2
6

flutter scrollable modal bottom sheet

2 Answers2