I'm using a Flutter modal bottom sheet to display some options for the user to select.
I have a Column
with a list of ListTile
s as the content of the bottom sheet.
My problem is that if I have more than 6 ListTile
s, some are cut off and not displayed.
Is there a way to make the bottom Sheet scrollable?
@override Widget build(BuildContext context) { showModalBottomSheet(context: context, builder: (BuildContext context) { return Container(); }); flutter. dart. bottom-sheet.
Just change your Column
into a ListView
, like so:
return ListView(
children: <Widget>[
...
]
);
What if I don't want the content of the sheet to be scrolled, but the sheet itself?
If you want the user to be able to swipe up the bottom sheet to fill the screen, I'm afraid this isn't possible in the current implementation of the modular bottom sheet.
You can use the isScrollControlled
attribute of showModalBottomSheet to achieve the effect.
You can use the DraggableScrollableSheet
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('DraggableScrollableSheet'),
),
body: SizedBox.expand(
child: 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'));
},
),
);
},
),
),
);
}
}
Here is the official video from the Flutter team.
A live demo on DartPad can be found here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With