Your First Flutter App: An App From Scratch

At this point, you have added all of the views you need for Bullseye, but the app looks somewhat compressed.

To fix this, it’s time to bring in some spacing and padding to widgets into your app. As their name implies, these views are designed to fill up space.

When you put an Expanded widget around another widget, it expands to fill up the remaining space.b Padding widgets add spacing on the top, bottom, left, and right of a child widget. Let’s try this out in the app.

Before we get started with the padding, let’s do a little refactoring. In the challenge, we put our score row in main.dart. Let’s break that out into a separate widget.

Start by opening your project in progress, or download the starter project for this episode. Create a new file called score.dart. Make sure to import the material library.

import 'package:flutter/material.dart';

Next, create a new Stateless widget by typing ST and select the Stateless Widget option. Give it the name Score.This widget is going to take two properties. One for the totalScore and the other for the round. We’ll set them to final.

final int totalScore;
final int round;

Of course, our next step is update our constructor.

const Score({Key? key, required this.totalScore, required this.round}) : super(key: key);

Now, let’s copy the Row from main.dart and paste it into the build method. Finally, let’s update main.dart. First, import our new score widget.

import 'score.dart';

Now lets add a Score widget where our Row used to be, passing in some default values.

const Score(totalScore: 0, round: 1)

This is just a placeholder for now. In the followup course, you’ll update the Score widget to show the correct score and round.

Now, to add some padding. We’ll start with the Score. We’re going to put the Score in a Row, then wrap in padding. Open up score.dart. Select the Score text widget and right click. Choose the refactor and then select the Wrap with Row option.

Copy the other score text and paste it into the row, making the children array a constant.

Row(
    children: const <Widget>[
    Text('Score: '),
    Text('99999'),
    ],
),

Then select the Row and wrap in padding.

Padding(
    padding: const EdgeInsets.all(8.0),
    child: Row(
    children: const <Widget>[
        Text('Score: '),
        Text('99999'),
    ],
    ),
),

Now we’ll do the same exact thing for the round. Select the Round text widget and right click. Choose the refactor and then select the Wrap with Row option. Ignore the warnings.

Copy the other round text and paste it into the row, making the children array a constant. Remove the constant modifiers from the Text widgets.

Row(
    children: const <Widget>[
        Text('Round: '),
        Text('999'),
    ],
),

Then select the Row. Right click and choose refactor. Then select wrap in padding.

        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: const <Widget>[
              Text("Score: "),
              Text("99999"),
            ],
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: <Widget>[
              Text("Round: "),
              Text("999"),
            ],
          ),
        ),

That’s it for score.dart. Now let’s add some padding to our slider control. Open control.dart.

Select the 1 widget. Right click and choose refactor. Choose the wrap with padding option, making sure to adjust the constant modifiers.

const Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('1'),
),

Do the same for the 100 widget.

const Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('100'),
)

Now, build and run the app or hot reload. We get some nice padding. But the slider looks really small. How can we fix this?

Often times, you will want a widget to take up all the available space. In our case, we want our slider to take up all the space. Not surprisingly, there is a widget for that.

This is called the Expanded. By using the expanded widget, the child widget will take up that empty space, but there is a caveat. The target widget must be a child of a row, column or flex. Our slider is in a row, so we are good to go.

We’re going to expand our slider. Open up control.dart. Select the Slider and right click. Choose refactor. You’ll notice that there is no Expanded option. No worries. Choose Wrap with Container instead.

This is a widget used for containing other widgets. This is good for adding background colors to another widget or providing some decorations to it.

Now, change it to an Expanded widget. And that’s all you have to do. Now build and run or hot reload. This time, our slider takes up all the space.