I Am Rick

A ‘The Walking Dead’ spinoff of the ‘I Am Rich’ app, made with Flutter.

6 min readNov 2, 2019

Our first challenge at App Brewery’s Flutter Bootcamp is to make an I Am Rich app.

Since I’m a fan of The Walking Dead, I decided to make an app paying tribute to one of its most badass characters, Rick Grimes.

To begin with, if you’re running macOS Catalina and still haven’t installed Flutter, check out my previous story: Setting up Flutter on macOS Catalina. I go over the many obstacles that you might encounter and are not covered in the installation documentation.

(EDIT: Or if you want to build something more interesting, scroll down to the end of the article for the next episodes!)

If you’re good to go, open Android Studio, select:

Start a new Flutter project
Flutter Application
Name it: i_am_rick (or whatever you want your app to be)
Enter a company domain: example.com, yourname.com or yourcompany.com
Deselect the ‘Platform channel languages’ boxes as we won’t be writing any iOS/Android specific code

The project opens with the main.dart file, which contains the code for a sample app. You can test the sample app on iOS and Android to make sure everything is running well and then you can delete all the code and replace it with the code below.

import 'package:flutter/material.dart';void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lightGreen[200],
        appBar: AppBar(
          title: Text("I Am Rick"),
          backgroundColor: Colors.red[800],
        ),
        body: Center(
          child: Image(
            image: AssetImage('images/rick_gun.jpg'),
          ),
        ),
      ),
    ),
  );
}

That’s all the code you need to run this app on iOS and Android!

Code Breakdown

MaterialApp

Flutter apps are structured like a tree. Here we create a MaterialApp, which is based on the Material Design by Google.

Scaffold

Inside the MaterialApp, we add a Scaffold, which implements the basic material design layout. Inside the Scaffold you can have the main body, as well as app bars, drawers, snack bars, and bottom sheets.

Colors

You can also set the backgroundColor of the Scaffold. By using the Colors class, we tap into Material Design’s color palette.

AppBar

Inside the Scaffold, we add an AppBar which implements a top bar on iOS and Android. Inside the AppBar, we add a title by using a simple Text widget and we also change the backgroundColor like before, to a ‘Walking Dead’ red kind of color.

Centering widgets

For the body of the Scaffold, we use the Center class, which is a widget that centers its child within itself. Useful shortcut: If you already have a widget and want to embed it into a Center widget, click on the widget and wait for the lightbulb icon to come up next to it and tap it (or click on the widget and tap alt/option + Enter on Mac). Then choose Center widget, which automatically wraps the widget in a Center widget.

Images

For the child of the Center widget, we add an Image widget (don’t confuse it with the Image class from dart-ui), that displays an image that can be from various sources, such as URL, file, etc.

To fetch an image from a URL you can do:

Image(image: NetworkImage('image_url'))

or from an asset:

Image(image: AssetImage('images/rick_gun.jpg'))

Adding assets to the project

To add images to your project, go to the Project hierarchy, right click on the main project folder -> New -> Directory and create a directory called images. Move your files into that folder.

To specify your assets and images, you need to go to the pubspec.yaml file and uncomment the part where it says:

# The following section is specific to Flutter.
flutter:  # To add assets to your application, add an assets section, like this:
  assets:
    - images/rick_gun.jpg

Be careful with the indentation here as yaml files are strict with it. Each level of indentation is two spaces in, so assets: needs to be two spaces in (because it’s under flutter:) and — images/rick_gun.jpg needs to be four spaces in.

If you have a lot of images and don’t want to type all the filenames separately, you can add all the files in the images folder like:

assets:
  - images/

Formatting code with dartfmt

You might have noticed that we include a comma after every widget. This helps us to format the code by simply right clicking in the editor and selecting: Reformat Code with dartfmt. This creates the nice, nested structure that matches the Flutter widget tree.

If you want a better way to visualise this structure, you can also click on Flutter Outline which sits on the right sidebar in Android Studio.

Running on iOS Simulator/Android Emulator

Now you should be able to run the app on both iOS and Android!

Hide the Debug banner

To hide the Debug banner, you can go to the right sidebar, tap on Flutter Inspector, then More Actions, then Hide Debug Mode Banner. You can toggle the platform from the toolbar at the top where it says Flutter Inspector: ‘the current device’.

Adding App Icons

To remove the default Flutter app icon and add custom app icons, first you need to generate some app icon files. A good tool for that job is appicon.co. You just need a big, square icon to start from and it generates all the sizes for iOS and Android automatically for you.

Then to add them:

For iOS:

Open the ios folder in the Project navigator
Go to Runner -> Assets.xcassets -> AppIcon.appiconset
Right click and select Reveal in Finder
Delete the AppIcon.appiconset and replace with the AppIcon.appiconset downloaded from appicon.co

For Android:

Open the android […] folder
Go to app -> src -> main -> res
Right click and select Reveal in Finder
Delete all the mipmap folders and replace them with the mipmap folders generated from appicon.co

The new Android operating systems now have those white circle backgrounds for icons which might not look very nice if you have a square icon inside. If you want to take advantage of the full circle size for your icon, you can fix that like:

Go to android […] -> app -> src -> main and right click on res and select New -> Image Asset
Under Source Asset -> Path, choose the original icon from which you generated the app icons
Resize the icon so that it fits nicely in all the circles
Tap Next and Finish and it will replace all the previous icons

To change the app display name

The final thing I want to do is to change the app’s display name from i_am_rick to I Am Rick.

For Android:

Go to AndroidManifest.xml and under<application, change android:label="I Am Rick"

For iOS:

Navigate to the ios folder and open the Runner folder under it
Right click on the Info.plist file and select Flutter -> Open iOS module in Xcode
At the top of the Info.plist file where it says Information Property List, tap on the plus button and search for Bundle display name. Tap Enter and enter the ‘I Am Rick’ value. Save and run the app again.