I Am Rick

A TWD spinoff of the ‘I Am Rich’ app, made with Flutter.

Alexandros Baramilis
Nov 2 · 5 min read

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.

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

Scaffold

Colors

AppBar

Centering widgets

Images

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 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

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

Hide the Debug banner

Adding App Icons

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

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.
Now you can have Rick on your Home Screen!
And with the circular icon on Android!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade