Listview inside DraggableScrollableSheet not scrolling in flutter - flutter

Question

I am designed very heavy nested design like below, the issue when my list expands the listview doesn't seems to be scrolling what is the reason for this, the bottomsheet gets expanded but there is no focus on listview inside it, if i scrolls by touching the 'Operational Hours' text it starts scrolling but when it goes upwards i can't slide it down.
_showDialog(BuildContext context) {
print("_showDialog");
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return DraggableScrollableSheet(
expand: false,
builder: (context, scrollController) {
return Container(
child: Stack(
children: <Widget>[
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(
fontWeight: FontWeight.bold,
fontSize: widget.isTab(context)
? TabTextStyles.mediumText
.copyWith()
.fontSize
: PhoneTextStyles.mediumText
.copyWith()
.fontSize)),
),
],
),
ListView(
controller: scrollController,
children: <Widget>[
SizedBox(height: 54.0),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 20.0),
Text('Select days to add hours',
style: widget.isTab(context)
? TabTextStyles.mediumText.copyWith()
: PhoneTextStyles.mediumText.copyWith()),
]),
),
DaysList()
],
),
],
),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Theme.of(context).backgroundColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
),
),
);
},
);
},
);
}

Answer 1

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:

Answer 2

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')),
),
),
],
);
},
);
},
);
}