60 Days of Flutter : Day 8 : Changing The Launcher Icon and Implementing GestureDetector

Aditya Gurjar
6 min readAug 20, 2019

Today’s post is going to be a mix of few different things. We’re gonna start with quickly changing the app’s logo and then move on to the few things we had pending from yesterday.

How Do I Change the App’s Icon?

It’s pretty straightforward and we’ll be using flutter_launcher_icons to do it. This package generates all the necessary icon assets for both Android as well as iOS without us manually needing to provide them individually for both the OS. Let’s get started.

The first thing you need to do is grab the latest version of the package from pub.dev and add it to your dev_dependencies in pubspec.yaml . In our case it’s 0.7.2+1 .

dev_dependencies:
flutter_test:
sdk: flutter
flutter_launcher_icons: ^0.7.2+1

Next let’s define the icons. We’ll need three of them, the foreground, the background and the final resultant icon.

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:

  1. 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.
  2. 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?

How Can You Contribute?

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!

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

Aditya Gurjar
Aditya Gurjar

Written by Aditya Gurjar

Mobile Engineer. Writing Mostly about Mobile Dev, Mobile DevOps, and a lil bit of life.

Responses (2)

What are your thoughts?

Thanks for this overall tutorial series of 60 days with flutter. Learning a lot about flutter and dart grabbing. In this part, I learned how to change the app icon easily as well as implementing the gesture detector widget. It was very insightful…

Really helpful to see all the steps you’re taking. Great stuff!