We’re putting them inside the asset/launcher directory. Feel free to use whatever directory structure you feel convenient with. Let’s now define these icons in our pubspec.yaml .

flutter_icons:

ios: true

android: true

image_path_ios: "assets/launcher/ic_launcher.png"

image_path_android: "assets/launcher/ic_launcher.png"

adaptive_icon_background: "assets/launcher/ic_background.png"

adaptive_icon_foreground: "assets/launcher/ic_foreground.png"

Next run the command to generate the icons:

flutter packages pub run flutter_launcher_icons:main

this will run the package and generate the necessary assets.

Build and run your app and you should see the app with new icons.

Let’s move to the next part !

Fixing The BottomSheet

I kept few items in TODO from yesterday’s post about bottomsheet. Let’s implement them one by one.

You cannot swipe down to dismiss the sheet

We want our ChatList Bottomsheet to be dismissed upon drag down. To achieve this I have first wrapped the NavigationPill and the Title Text inside another ListView .

ListView(

shrinkWrap: true,

physics: ClampingScrollPhysics(),

children: <Widget>[

NavigationPillWidget(),

Center(

child: Text('Messages', style: Styles.textHeading)),

SizedBox(

height: 20,

),

])

We wrap this ListView inside a GestureDetector and use the onVerticalDragEnd event.

Here the primaryVelocity is the average velocity of the user’s drag event (pixels/second). We want to make sure that it’s greater than 50 so that it’s a drag and not just an accidental touch.

We need to extract out the InputWidget from the ConversationPage Widget to the outer ConversationPageSlide Widget

This wasn’t as simple as I thought it would be. Doing this made me learn some important concepts related to layouting in flutter. Here are few catches:

A Scaffold creates the basic material design layout which contains the Appbar , the body , etc. Our BottomSheet depends on the InputWidget as well as the Scaffold. So if we’re moving the InputWidget we’ll also need to move the Scaffold . A PageView has a unbounded height and can never be directly nested in a Column . We have to wrap it inside a Expanded widget to make it work.

I highly recommend you view the Code Changes section to understand what moved where:

We moved out the Scaffold from the ConversationPage but I wanted to keep the AppBar in ConversationPage , So I’ve used a Column Widget.

BONUS: Moving the InputWidget also solves our third problem,which is,

We need to hide/shadow the top toolbar from the current active chat.

Because after the above changes the ChatList easily flows over the toolbar like this.

Definitely a lot cleaner and smoother than what we built initially !

References

Flutter Deep Dive, Part 4: “RenderFlex children have non-zero flex…”

Flutter Layout Cheat Sheet

Code Changes

#8 DragDown Gesture for BottomSheet

How Can You Contribute?

Open issues with suggestion of better approaches or ideas for the app.

Connect with me on Twitter or Linkedin.

Star the Github repository.

Share the series on Twitter.

Follow me on Github.

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!