Styling Text

Summary

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

flutter:
  
  # ...

  fonts:
    - family: Montserrat
      fonts:
        - 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 {
  @override
  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,
);

Summary

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