Sanjib Sinha posted: " Photo by Filipp Romanovski on Unsplash We can use the DraggableScrollableSheet widget for many purposes. However, in this tutorial, we'll see how with the help of this widget, we can add a list of words, which will be displayed below on a sheet that w"
We can use the DraggableScrollableSheet widget for many purposes. However, in this tutorial, we'll see how with the help of this widget, we can add a list of words, which will be displayed below on a sheet that we can scroll to view.
Before jumping in to the code and related screenshots, let's try to understand a few basic concepts about draggable scrollable sheet widget.
Certainly, we can compare this widget with CustomScrollView, NestedScrollView, PageView and ListView widgets. The functionality of this widget, in many ways, is similar to other Scrolling Widgets. However, since this widget is draggable and scrollable at the same time, it is at an advantage.
Quite naturally, this advantage puts this widget in a superior position.
Why so?
Let's see the screenshots firstly. So that we can visualise the advantages. As regards, the draggable and scrollable effect, we can have a total grip on the size of the sheet that has been generated.
DraggableScrollableSheet flutter
We've built a small but functional app using which we can practise vocabulary. Once we type the words, we can add them to the bottom sheet by clicking the keypad.
After that we can view the list from top to bottom by scrolling just like the following second screenshot that displays the upper side.
DraggableScrollableSheet flutter keeping words
Since the lower bottom sheet is scrollable, we can scroll vertically and see the last word that we've typed.
DraggableScrollableSheet flutter allows to scroll and view the last word
Of course, we could have made the image much smaller or made the draggable scrollable sheet much bigger.
How does that happen?
The DraggableScrollableSheet can extend up to a certain fraction of the total screen of our app. Meanwhile, the scrolling effect can occur inside its expanded height. As it expands its size, it also contains the list of words that we're typing above.
WordPress.com
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.