Custom Draggable Bottom Sheet in Flutter

Hey 👋!
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 :

• MainScreen()
• CustomBottomSheet()

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
Positioned➡➡ AnimatedPositioned

The whole components look like this:-

Our task is completed🙌🙌

Full Code:

Templates/CustomDraggableBottomSheet.dart at main · raj4477/Templates

Ping me on LinkedIn :

Ritik Raj - Core Team - Developer Student Clubs (MMDU) | LinkedIn