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

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:

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,