Listview inside DraggableScrollableSheet not scrolling in flutter

Screenshot:

enter image description here


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:

enter image description here