60 Days of Flutter : Day 6–7 : Implementing a Slideable Widget Using Bottomsheet in Flutter

5 min readAug 19, 2019

In last post we touched upon Widget Testing with Flutter. Today we will build a page which will list all the conversations. This Page/Widget essentially, will slide up from the bottom when you swipe up on the InputWidget.

The Decison

I took a look at different widgets from the flutter framework and also few libraries for this task. I could’ve probably moved on and talked directly about the one I used but I thought it’s worth mentioning few of the really good libraries/widgets I took a look at. Here are the links:

Rubber by Mattia Crovero
Sliding_up_panel by Akshath Jain

And in the end this excellent post by Joe Birch made me choose Persistent Bottomsheets for the page I was trying to build.

Let’s Get Started

First things first, Let’s add Gesture Detection to our InputWidget . We’d want the Persistent BottomSheet to be displayed on swiping up on the InputWidget. We’ll achieve this by using the GestureDetector Widget.

The gesture detector returns the details of the user’s gesture direction in the onPanUpdate Method.
delta.dy > 0 would mean that the user swiped up and delta.dy < 0 would mean that the user swiped down.
Similarly, delta.dx can be used for detecting left and right gestures on any widget.

The BottomSheet

There are two types of BottomSheets, Persistent and Modal. Details of these have been explained in the post I linked in the intro section above. For our use case we’ll be using a Persistent Sheet. Quoting from Joe Birch’s post:

When a persistent bottom sheet is displayed, it is usually shown to compliment the current content of the application. These sheets can be used to display context aware content and will remain in place whilst the user is navigating around.

This is what we’ll have for the content of the BottomSheet. Let’s start by creating the ConversationBottomSheet Widget:

Explaining the code above, First up we’re creating a Scaffold to hold our Content. We’ll have vertically flowing content in form of a NavigationPill, A Heading and the Chat rows.

Ideally, We’d have achieved this by nesting a NavigationPill , a Text and a ListView in a column, but nesting ListView inside Column doesn’t work inside a BottomSheet because Flutter isn’t able to layout the content.

So, we’re using a ListView nested inside a ListView.Do note that nesting ListView inside another ListView will need us to add these properties to the children for the scroll to work properly.

shrinkWrap: true,
physics: ClampingScrollPhysics()

NavigationPill is a basic custom widget (The rectangle with rounded edges you see at the top). Here’s how I built it:

Nothing too fancy, Actually.

The ChatList

Let’s go ahead and build the rows for the ChatList.

We have again used the Expanded Widget like we did for the AppBar we built in one of the earlier posts. This time we’re using it to divide the Row Widget into two sections of 8:2 width. We have the profile picture, name and message preview in the first section and date in the second section.

Showing The BottomSheet

In order for a Persistent BottomSheet to be displayed we need to provide it with a Scaffold instance. Create a global instance of Scaffold key in the ConversationPage class.

final GlobalKey<ScaffoldState> _scaffoldKey = new 
        GlobalKey<ScaffoldState>()

Now we need to set this key to our Scaffold and then use it to display the modal sheet.

After all this we should have a working bottomsheet like this:

The Problems !

The Bottomsheet we built sure as hell looks cool. But there are few problems:

You cannot swipe down to dismiss the sheet.
We need to extract out the InputWidget from the ConversationPage Widget to the outer ConversationPageSlide Widget. This is to make sure that multiple instances aren’t created.
We need to hide/shadow the top toolbar from the current active chat.

We’ll go ahead and do all these fixes in tomorrow’s post.

Code Changes

#6 Added Bottomsheet with ChatList

How Can You Contribute?

Open issues with suggestion of better approaches or ideas for the app.
Connect with me on Twitter or Linkedin or Instagram.
Star the Github repository.
Share the series on Twitter.
Follow me on Github.

Posts In This Series

Show Your Support

Press the clap button below if you liked reading this post. The more you clap the more it motivates me to write better!