DraggableScrollableSheet (Flutter Widget of the Week)

Flutter · 251K views · 2019 · 0:56

Open on YouTube

UX & UI designSoftware (other)tutorial

Why Stack Overflow recommends it

Stack Overflow users link it when answering questions about persistent or scrollable bottom sheets in Flutter, as a short official intro to DraggableScrollableSheet.

Recommended by 4 people across 4 different months, 2019 to 2021.

What it is

A under-one-minute entry in the Flutter team's Widget of the Week series covering DraggableScrollableSheet, a widget that can be dragged up and down the screen while holding scrollable content. It gives a quick overview of what the widget does and links to the docs.

What people said

Recommends Shazamo Morebucks · 2019-11 · Stack Overflow · on “Persistent draggable bottom sheet in Flutter”

Perhaps DraggableScrollableSheet [this video] could work? I haven't yet tried it out myself, but maybe you could fiddle with a listview to make it work. I'm guessing something like having it's child be a listview, and then limit both the max child size and the maximum scroll extent

Recommends Darish · 2020-02 · Stack Overflow · on “Scrollable bottom sheet in Flutter”

The DraggableScrollableSheet [LINK] is here for that purpose. This widget can be dragged along the vertical axis between its minChildSize , which defaults to 0.25 and maxChildSize , which defaults to 1.0. You can use any Scrollable widget as child of DraggableScrollableSheet. See the official video [this video] from Flutter team.

Recommends ByteMe · 2020-09 · Stack Overflow · on “Flutter Nested bottom sheet or slide up panel”

Welcome to flutter where there is a widget for almost everything. DraggableScrollableSheet might be just the widget you need [this video]

Recommends Xoltawn · 2021-11 · Stack Overflow · on “TabBar with bottom sheet”

I guess you could get the result you want if you play around with DraggableScrollableSheet widget .https: [this video]

Cites Darish · 2020-02 · Stack Overflow · on “Scroll through Flutter Bottom Sheet”

If you want a model bottom sheet that can be scrolled. You can use the isScrollControlled attribute of showModalBottomSheet [LINK] to achieve the effect. If you want a persistent bottom sheet that can be scrolled. You can use the DraggableScrollableSheet [LINK] Example: class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('DraggableScrollableSheet'), ), body: SizedBox.expand( child: DraggableScrollableSheet( builder: (BuildContext context, ScrollController scrollController) { return Container( color: Colors.blue[100], child: ListView.builder( controller: scrollController, itemCount: 25, itemBuilder: (BuildC