Flutter Text Style


In this lesson we'll cover: how to style text using TextTheme, custom fonts and basic Material Design theming with TextStyle. We'll also cover code organization when working with style.

The Code for This Lesson

Check out the tourismandco repo's step/step04 branch for the code we'll cover in this lesson.

Styling text using TextTheme, fonts assets and TextStyle

Adding fonts to pubspec.yaml

# pubspec.yaml

  # ...

    - family: Montserrat
        - asset: assets/fonts/Montserrat-Regular.ttf
          weight: 300
        - asset: assets/fonts/Montserrat-Bold.ttf
          weight: 600

  # ...

Using an App-Wide TextTheme

// app.dart

import 'package:flutter/material.dart';
import 'screens/location_detail/location_detail.dart';
import 'style.dart';

class App extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LocationDetail(),
      theme: ThemeData(textTheme: TextTheme(body1: Body1Style)),

// ...

Adding style.dart

// style.dart

import 'package:flutter/material.dart';

const String FontNameDefault = 'Montserrat';

const Body1Style = TextStyle(
  fontFamily: FontNameDefault,
  fontWeight: FontWeight.w300,
  fontSize: 26.0,
  color: Colors.black,


In this lesson, we covered the basics of layout, imagesand text. Our "Tourism & Co." app is taking shape.