Your First Flutter App: Polishing the App

Apr 12 2022 · Dart 2.14.1, Flutter 2.5, Visual Studio Code

Part 3: Style the App

22. Style Text

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 21. Use Assets & Images Next episode: 23. Style Buttons

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

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.

class ScoreNumberTextStyle {

}
static TextStyle? headline4(BuildContext context) {

}
return Theme.of(context).textTheme.headline4.copyWith();
return Theme.of(context).textTheme.headline4?.copyWith(
  fontWeight: FontWeight.bold,
  fontSize: 20.0,
  color: Colors.black,
);
class TargetTextStyle {
  static TextStyle? bodyText1(BuildContext context) {
    return Theme.of(context).textTheme.bodyText1?.copyWith(
          fontWeight: FontWeight.bold,
          fontSize: 32.0,
          color: Colors.black,
        );
  }
}
Text('$targetValue', style: TargetTextStyle.bodyText1(context)),
import 'text_styles.dart';
Padding(
  padding: const EdgeInsets.only(left: 32, right: 32.0), <--- 
  child: Column( <--- 
    children: <Widget>[
      const Text('Score:'),
      Text('$totalScore'),
    ],
  ),
),
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)), <--- 
    ],
  ),
),
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)), <---
    ],
  ),
),
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)),
)