Custom Draggable Bottom Sheet in Flutter

Ritik Raj
2 min readApr 2, 2022

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:

Ping me on LinkedIn :

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Ritik Raj
Ritik Raj

Written by Ritik Raj

Co-Lead in Google Developer Student Club MMDU || Flutter Developer

No responses yet

Write a response

Recommended from Medium

Lists

See more recommendations