Custom Draggable Bottom Sheet in Flutter
Are you looking for a Draggable bottom sheet in flutter? Then you have landed at the right place.
First of all, let’s see how does Draggable bottom sheet looks like
Let’s code the approach and divide the whole section into small chunks of steps
Step 1: Code the boilerplate code
Declare a global boolean variable named as isSwipeUp, initialize with false
Step 2: Write code for home page
Creating Home() as StatefulWidget
As we are placing one widget on another widget so we are using Stack()
In a stack elements are placed one on the other, the last element will be on top.
In Stack(), We will use two different Widgets :
Step 3: Create MainScreen()
MainScreen will be very simple as it has only one Container() with a single child with Text() => “HomePage” with some sort of styling and center Alignment
Let’s jump to the next step
Step 4: Creating CustomBottomSheet()
CustomBottomSheet has a Container(), having full width and half-height of the screen with a rounded corner at top edges and some sort of styling.
Now at this stage of our App looks like
Step 5: Adding GestureDetector on CustomBottomSheet() for making it Draggable.
Now we have to detect gestures of dragging/ Swiping
But Don’t take worries as flutter have an awesome widget GestureDetector()
GestureDetector() helps to detect any kind of gesture on Widget and has various properties but we will use some only.
Adding GestureDetector() on CustomBottomSheet() in Stack
Now change the position of CustomBottomSheet() as isSwipeUp changes
As the transition should be smooth so we will replace Positioned() with AnimatedPositioned() with a duration of 400 milliseconds
The whole components look like this:-
Our task is completed🙌🙌
Ping me on LinkedIn :