Your First Flutter App: Polishing the App

Often times when making an app, you’ll want to style some text. A bold font here. An italic font there. Text styling is incredibly important.

Flutter comes with lots of different prebuilt styles in a text theme class. These text themes come with scale categories, a typeface, a font, size, case and letter spacing.

While we can create our own text styles, it is far easier to copy a theme and then make changes to it. We do this by accessing the textTheme and then we can access the specific style. At which point, we copy the theme and then make our alterations. We did this earlier in the course. We created a file textstyles.dart and

stored our text style in a static property. By using a static property, we can quickly access the text style in our code. You can do lots of things with static properties but in our case, we’re going to use it as a shortcut.

You access it by providing the name of the class followed by the name of a method. This means, you don’t need an instance of the class. Don’t worry if you don’t understand static properties. Just follow along for now.

To get started, open the project in progress or download the starter project for this episode. To get started, open up the text_styles.dart file. When we last worked on this file, we created a style for the labels. Now, we’ll create a style for score. First, we’ll create a class called ScoreNumberTextStyle.

class ScoreNumberTextStyle {

}

Next, we’ll create our static property. We’ll name is headline4 since we are copying the headline style. We need to pass in a context.

static TextStyle? headline4(BuildContext context) {

}

Then we’ll copy and return the headline4 theme.

return Theme.of(context).textTheme.headline4.copyWith();

Finally, we’ll override the properties that we want to use.

return Theme.of(context).textTheme.headline4?.copyWith(
  fontWeight: FontWeight.bold,
  fontSize: 20.0,
  color: Colors.black,
);

Okay that was our ScoreNumber style. Let’s create a style for the target text style. We’ll call it TargetTextStyle and we’ll copy the bodyText1 style.

class TargetTextStyle {
  static TextStyle? bodyText1(BuildContext context) {
    return Theme.of(context).textTheme.bodyText1?.copyWith(
          fontWeight: FontWeight.bold,
          fontSize: 32.0,
          color: Colors.black,
        );
  }
}

Okay, nice work. All of our styles are in place. Now, we’ll use the styles. First, we’ll update the target number. Let’s update it with a text style. Open prompt.dart. We’ve already added our initial text style in a previous episode so we don’t need to import the file.

Text('$targetValue', style: TargetTextStyle.bodyText1(context)),

Now lets make some changes to score.dart. Open the file and now import the text styles file.

import 'text_styles.dart';

We’ll start with the score widget. We’re going to change the padding and use a column instead of row. That way, we can center everything within the background image.

Padding(
  padding: const EdgeInsets.only(left: 32, right: 32.0), <--- 
  child: Column( <--- 
    children: <Widget>[
      const Text('Score:'),
      Text('$totalScore'),
    ],
  ),
),

Now we will add our styles to both the text widgets.

Padding(
  padding: const EdgeInsets.only(left: 32, right: 32.0), 
  child: Column( 
    children: <Widget>[
      Text('Score:', style: LabelTextStyle.bodyText1(context)), <--- 
      Text('$totalScore', style: ScoreNumberTextStyle.headline4(context)), <--- 
    ],
  ),
),

Okay, we’ve updated that score widget, now lets’ update the round widget. We’ll make the same alterations like just we did.

Padding(
  padding: const EdgeInsets.only(left: 32, right: 32.0), <--- 
  child: Column( <--- 
    children: <Widget>[
      Text('Round:', style: LabelTextStyle.bodyText1(context)), <---
      Text('$round', style: ScoreNumberTextStyle.headline4(context)), <---
    ],
  ),
),

We’re going to update the slider labels, using our new styles while also changing the padding. Open up control.dart.

const Padding(
  padding: EdgeInsets.only(left: 90.0),
  child: Text('1', style: TextStyle(fontWeight: FontWeight.bold)),
),
...
const Padding(
  padding: EdgeInsets.only(right: 90.0),
  child: Text('100', style: TextStyle(fontWeight: FontWeight.bold)),
)   

And that’s it! Now lets see how it looks. Build and run the app or hot reload. Check it out. It looks much better now. Nice job!