Your First Flutter App: An App From Scratch

It’s time for your next challenge! This time, you’ll get some practice laying out widgets in Flutter.

Specifically, your challenge is to lay out the final row of Bullseye, the score row. This contains a number of widgets:

First, there’s a TextButton widget labeled Start over, which the user will press to start a new game. It will eventually reset the score to 0 and the round to 1.

Next, there are two Text widgets for the score: one containing the text “Score”, and one containing the score value. For now, the score will be set to a placeholder value of 99999.

Then there are two Text widgets for the Round: one containing the text “Round”, and one containing the number of the current round. For now, this number will be set to a placeholder value of 999.

Finally, there’s a TextButton widget labeled Info, which the user will press to get more information about the game. It will eventually take the user to another screen, where they’ll see that information.

Don’t forget that these should be all in a row, which means that you need n Row widget. For now they’ll be crammed all together, without the spacing you see in that screenshot, but you’ll learn how to fix that in the next episode.

Put this row in main.dart underneath the Hit Me Text Button.

At this point, pause the video and see if you can lay out these Flutter widgets yourself. Don’t worry if you get stuck - you can always unpause and see the solution, and just having given it a solid try will be a great learning experience.

How was that challenge for you? Trying any new skill can be difficult. Don’t worry with time and repetition, it will come naturally.

I’ll start by opening up main.dart. Then, I’ll add a Row and center all the items in it by passing MainAxisAlignment.center to the mainAxisAlignment property.

TextButton(
    child:
        const Text('Hit Me!', style: TextStyle(color: Colors.blue)),
    onPressed: () {
    _showAlert(context);
    },
), <-- old code
Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[

    ],
)

Now, I’ll add a TextButton for Starting Over.

TextButton(
    child: const Text('Start Over'),
    onPressed: () {},
),

Then I’ll add a bunch of Text widgets, making them all constants. By marking them as constants, we indicate that they won’t change so Flutter will provide some optimizations to make it run better.

const Text('Score: '),
const Text('99999'),
const Text('Round: '),
const Text('999'),

Finally, I’ll add a text button for the Info.

TextButton(
    child: const Text('Info'),
    onPressed: () {},
),

Now build and run or hot reload the app. We get our new row, but it is all squished together. Don’t worry, in the next episode, we’ll give it some breathing room.