DraggableScrollableSheet in Flutter
Introduction :
DraggableScrollableSheet widget is a draggable and scrollable widget that responds to drag gestures by resizing the scrollable until a limit is reached and then scrolling. It looks like a sheet that is built in a bottom but actually, it can be dragged and scrolled up to a certain limit. This widget can be dragged along the vertical axis providing a scrolling effect.
Demo Module :
Table of contents:
:: DraggableScrollableSheet class
:: Understanding its properties through stylish UI
DraggableScrollableSheet class :
DraggableScrollableSheet class is basically a widget that looks like a sheet that drags down from the bottom and expands in a vertical direction. This widget expands up to a certain fraction of a screen in an app as per limited height as provided and then enable scrolling effect inside it expanded height. It can be said that it is a bottom appbar that expands its size and contains a list of data inside it which scrolls.
Sample :
This is how this sample UI looks like as shown below…..
Now let’s create one stylish UI and try to explore more of its properties :
Let’s Start:
How to implement-:
Here above the code, you can see that we have used the widget called DraggableScrollableSheet and applied some of its properties to implement UI as shown above.
As you can see above that container is used inside DraggableScrollableSheet which drags by resizing itself until a limit is reached and thus creating ListView.builder inside it which contains a scrollable list inside the container.
Properties used :
initialChildSize: It is an initial size of a DraggableScrollableSheet which will display on our app as soon as we open it. The value provided to it is in fraction. Its default value is 0.5
We have used initialChildSize value as 0.3 thus it will occupy 30% of the space of our screen as soon as we open our app initially.
maxChildSize: It is the maximum size up to we can drag our container(sheet) or we can say that it is the maximum fractional value up to which we can resize our container(sheet) while displaying a widget. Its default value is 1
We have used maxChildSize value as 0.9 thus it will drag or resize until it will occupy 90% space of our screen in our app while dragging.
minChildSize: It is the minimum size up to which we can drop down our container(sheet) while dragging or we can say that it is the minimum fractional value up to which we can minimize the height of the container(sheet) while displaying our widget. Its default value is 0.25
We have used minChildSize value as 0.13 thus it will minimize its size until it occupies 13% space of our screen in our app.
builder:(){}- The builder that creates a child to display in this widget, which will use the provided ScrollController to enable dragging and scrolling of the contents.
If the widget created by the ScrollWidgetBuilder does not use the provided ScrollController, the sheet will remain at the initialChildSize and scrolling takes place inside that initial size only instead of resizing our sheet.
expand: It accepts a boolean value and decides whether the widget should expand available space in its parent or not. Its default value is true.
As you can see above the code that inside ListView.builder we have created a scrolling list of a ListTile that has an image inside a CircleAvatar as leading, title, as well as the icon in trailing of 20 counted items.
For more info visit down the link:
DraggableScrollableSheet class
A container for a Scrollable that responds to drag gestures by resizing the scrollable until a limit is reached, and…api. flutter.dev
Thanks for reading this article ❤
Clap 👏 If this article helps you.
Feel free to post any queries or corrections you think is required…✔
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
