CODEWITHSUNDEEP
flutter
Théo Champion
Théo Champion

Reputation: 1988

Nested ScrollView inside Slidable panel widget

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:

enter image description here

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 ? :)

Upvotes: 9

Views: 1173

Answers (1)

Pablo Barrera
Pablo Barrera

Reputation: 10963

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

Upvotes: 5

Related Questions