Nested ScrollView inside Slidable panel widget

Question

I have a panel widget that can be dragged vertically in and out from the bottom of the screen. In that panel widget, there is a ListView that is scrollable.

What I'm trying to achieve is, having the panel handle the drag for opening and closing without the nested listview interfering. Once, the panel is open, the listview become scrollable and if the listview is scrolled down while already at the top, the panel handle the gesture instead and closes.

Like so:

I tried to enable/disable scrolling physics on the ListView based on the Panel position but turned out not to be possible that way.

Any ideas ? :)

Answer 1

You can achieve that with DraggableScrollableSheet.

Here is a quick example of how you can use it:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: <Widget>[
        Center(child: Text('Some content')),
        DraggableScrollableSheet(
          minChildSize: 0.2,
          initialChildSize: 0.2,
          builder: (context, scrollController) => Container(
            color: Colors.lightBlueAccent,
            child: ListView.builder(
              controller: scrollController,
              itemCount: 20,
              itemBuilder: (context, index) => SizedBox(
                height: 200,
                child: Text('Item $index'),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}