Your First Flutter App: Polishing the App

Now that we’ve got Bull’s Eye working, it’s time to make it look great.

We’ll start by adding a background image to the game, and adding some style to the labels. The first step is to add some images we need to the project. We define our image location in pubspec.yaml.

Pubspec.yaml is the main configuration file for your app project. It is written in a data serialization language called yaml short for YAML Ain’t Markup Language which is used to define configuration files and liked by many developers although it can be a bit confusing when you first run into it.

Using your pubspec.yaml, you can add dependencies, configure your project behavior and a whole bunch of other options. You can manually edit the file or you can have flutter do it for you. When you do save your changes, Flutter will parse the file and evaluate it. This means, if you make a mistake, you won’t be able to run your app until you fix it.

Let’s get busy with adding images.

Open up your project in progress or download the starter project for this episode. We’re going to make some modifications to our pubspec. Open up pubspec.yaml. It’s going to look really weird, especially if you’ve never worked with yaml before.

The green lines are comment lines. A comment is indicated by the pound symbol. If you delete a pound symbol and save, Flutter will try to compile your pubspec and get an error.

You’ll also notice there are four buttons on the top right. Often times, you’ll incorporate other code into your project. These buttons allow you to manage them. The first button downloads packages. The second button upgrades them to newer versions. The third button lists outdated packages. The final button is just the split editor that allows you to add another code editor.

Scroll down to the document underneath the property that sets the material design to true. You’ll see a sentence about assets. Uncomment the assets line. Underneath it, indicate the folder for your images.

  assets:
    - images/

Now save. You’ll get an error message informing you that the directory doesn’t exist. Create the a top level folder called images. Now save again and Flutter will compile your app.

In the resources folder for this episode, drag nub.png and background.png to the images folder. Now to put our new images to use.

We’re going to put a background image in our app. We’ll do this in main.dart. Open up the file and scroll down to the build method in _GamePageState. You’ll see we just have a scaffold. We want to add a container to it so we can decorate it.

Right click the Scaffold widget and select refactor. Choose the Wrap in Container option. Next we’ll add a decoration property. The BoxDecoration widget allows us to draw a box.

decoration: const BoxDecoration()

We’ll add a color property and set it to white.

return Container(
    decoration: const BoxDecoration(
        color: Colors.white,
        image: DecorationImage(

Next we’ll put an image. We’ll use a DecorationImage. A decoration image is used specifically for a box decoration. We just need to provide an image and a fit.

image: DecorationImage(
    image: AssetImage("images/background.png"),
    fit: BoxFit.cover,
),

For the image, we use what is known as an AssetImage. This is an image that is included with the app bundle. That is, in our images directory. We also use a BoxFit to determine how the image will fit. By providing BoxFit.cover here. We are saying Flutter to keep image as small as possible while still covering the entire box.

Now if we run the app, you’ll notice two things. First, you won’t see the background image and secondly, you’ll see a status bar. Let’s fix the issue of the background image. Thankfully, it’s a pretty easy one.

Look back at the code and you’ll see that we are putting the image in the container which holds the scaffold. The scaffold is thus blocking the image. Thankfully, we can fix this setting the background to transparent.

Do the following:

child: Scaffold(
    backgroundColor: Colors.transparent,

Now look back at the app, and look at that - we have an image. It’s already looking better. Now to fix the issue with the status bar. We will use the services package. We already used this package to set the orientation. Now we’ll use it to get rid of the status bar.

In the BullsEyeApp class, add the following underneath the orientation code.

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

This does the work of hiding the status bar and making them visible only when you swipe at the edge of the display. There are various other system ui modes that you can choose from. If you want to know more about them head over to api.flutter.dev. Now build and run or hot reload. Switch back to the app. Look at that - our status bar is gone.