Listview inside DraggableScrollableSheet not scrolling in flutter
Screenshot:
Call this method:
void showMyBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (_) {
return DraggableScrollableSheet(
maxChildSize: 0.8,
expand: false,
builder: (_, controller) {
return Column(
children: [
Container(
width: 100,
height: 8,
margin: EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey,
),
),
Expanded(
child: ListView.builder(
controller: controller,
itemCount: 100,
itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
),
),
],
);
},
);
},
);
}
There are couple of mistakes you're making. First, put widgets in Column
that are always going to be visible at top, second wrap your DaysList
in Expanded
and pass ScrollController
to it.
This is your method:
void _showDialog(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return DraggableScrollableSheet(
expand: false,
builder: (context, scrollController) {
return Column(
children: <Widget>[
// Put all heading in column.
column,
// Wrap your DaysList in Expanded and provide scrollController to it
Expanded(child: DaysList(controller: scrollController)),
],
);
},
);
},
);
}
This is your Column
:
Widget get column {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Container(
margin: EdgeInsets.symmetric(vertical: 8),
height: 8.0,
width: 70.0,
decoration: BoxDecoration(color: Colors.grey[400], borderRadius: BorderRadius.circular(10.0)),
),
),
SizedBox(height: 16),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Text('Operational Hours', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 20.0),
Text('Select days to add hours'),
],
),
),
SizedBox(height: 16),
],
);
}
And this is how your DaysList
should look like:
class DaysList extends StatelessWidget {
final ScrollController controller;
const DaysList({Key key, this.controller}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
controller: controller, // assign controller here
itemCount: 20,
itemBuilder: (_, index) => ListTile(title: Text("Item $index")),
);
}
}
Output: