Your First Flutter App: Polishing the App

Your game looks awesome and your to-do list is almost complete.

In fact, if we review the todo list, we were trying to make the app look pretty.

Now with that task complete, we need to prepare it for distribution and that means creating some launch icons and a launch screen. But before we do those tasks, we should add an about page so you can get some credit. Can you think of a good place for one? Well, remember the Info button at the bottom right corner of the screen? Well if you tap it right now, it turns out it does nothing. It’s time to rectify that by adding our “About” screen to the game. It’ll appear whenever the player presses Info.

Here’s what it will look like at the end. Most apps, even very simple ones like this, have more than one screen. This is as good a time as any to learn how to add additional screens to your apps.

In Flutter, navigation is also called routing. We’ll go into more detail about routing in later courses of the Flutter learning path. For now, just know that you can use a Navigator to push to and pop from routes. And that an example router is a MaterialPageRoute, which is what we’ll use in Bullseye to navigate to the About page.

Okay, to get started open up your project in progress or download the starter project for this episode. We’re going to create a new dart. Create a new file and call it about.dart.

First thing, make sure to import that material library.

import 'package:flutter/material.dart';

Create a stateless widget in the file. Type ST and select the stateless widget option. Then name it, AboutPage.

class AboutPage extends StatelessWidget {
  const AboutPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

For our build method, we’re going to start by returning an AppBar. We’ll give it a title that reads, ‘About Bullseye’ and set the color to red.

return Scaffold(
    appBar: AppBar(
    title: const Text('About Bullseye'),
    backgroundColor: Colors.red[700],
),

Now for the body of the page.

body: Center(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[],
    ),
),

Here we center everything in a center widget then we add a column also centering everything.

Now we add our content widgets inside of the column. This will give all the information about the app itself.

const Text(
  '🎉 Bullseye 🎉',
  style: TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 32.0,
  ),
),
const Text(
  'This is Bullseye, the game where you can win points and earn fame by dragging a slider.\n',
  style: TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 14.0,
  ),
),
const Text(
  'Your goal is to place the slider as close as possible to the target value. The closer your are, the more points you score.\n',
  style: TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 14.0,
  ),
),
const Text(
  'Enjoy!',
  style: TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 14.0,
  ),
),

Now let’s add a little padding to the app title itself. Select the Bullseye text widget, right click it, and then choose the wrap with padding option. Set all the edge insets to 16.

Padding(
    padding: EdgeInsets.all(16.0),
    child: Text(
        "🎉 Bullseye 🎉",
        style: TextStyle(
           fontWeight: FontWeight.bold,
          fontSize: 32.0,
        ),
    ),
),

We’ll finish up this page with a button to go back to the main screen. For now, in the onPressed event, we’ll do nothing.

Padding(
    padding: const EdgeInsets.all(8.0),
    child: ElevatedButton(
        onPressed: () {
            
        },
        child: const Text('Go back!'),
    ),
),

Okay, now we’ll actually launch the page. To do this, open score.dart and import our recently recreated about page.

import 'about.dart';

Now for the actual code to launch the page. We need to create a MaterialPageRoute, passing in the page that we want to launch. In the onPressed method, call the push method on the Navigator.

StyledButton(
  icon: Icons.info,
  onPressed: () { // old code
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const AboutPage()),
    );
  },
),

That will launch the about page. Now, open up about.dart and add the code to close the page. When we launched the page, we called push so if we want to get rid of it, we call pop. We push the page on the navigation stack and then we pop it off.

In onPressed, add the following:

Padding(
  padding: const EdgeInsets.all(8.0),
  child: ElevatedButton(
    onPressed: () { // old code
      Navigator.pop(context);
    },
    child: const Text('Go back!'),
  ),
),

And that’s it! Return back to your app. Build and run or hot reload your app. Now tap on the info button and you’ll see the new page. Now tap on the button to close the page. Looks great! Nice work!