Flutter: Define custom TextStyles for use throughout the app

Question

How can I define a small set of custom TextStyles that can then be reused throughout my app. The custom TextStyles should be based on the TextStyles defined in the Theme.

I know how to create the individual TextStyles (e.g.)

Theme.of(context).textTheme.title.copyWith(fontWeight: FontWeight.bold,)

Answer 1

You could make a class that provides methods to obtain the font styles.

Here's an example that declares a CustomTextStyle class that exposes a display5 method for really large text.

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class CustomTextStyle {
  static TextStyle display5(BuildContext context) {
    return Theme.of(context).textTheme.display4.copyWith(fontSize: 192.0);
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      title: new Text('Custom Font Example'),
    ),
    body: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        new Card(
          child: new Container(
            child: new Text(
              'Wow',
              style: CustomTextStyle.display5(context),
            ),
          ),
        ),
      ],
    ),
  );
}

Answer 2

Or simply define a such a class and use it in Text()

  class AppTextStyle {
  static Function sofiaProRegular = ({Color color, @required double size}) =>
      _sofiaPro(color, size, FontWeight.w400);

  static Function sofiaProMedium = ({Color color, @required double size}) =>
      _sofiaPro(color, size, FontWeight.w500);

  static Function sofiaProBold = ({Color color, @required double size}) =>
      _sofiaPro(color, size, FontWeight.w700);

  static Function latoRegular = ({Color color, @required double size}) =>
      _lato(color, size, FontWeight.w400);

  static TextStyle _sofiaPro(Color color, double size, FontWeight fontWeight) {
    return _textStyle("SofiaPro", color, size, fontWeight);
  }}

  static TextStyle _textStyle(
      String fontFamily, Color color, double size, FontWeight fontWeight) {
    return TextStyle(
        fontFamily: fontFamily,
        color: color,
        fontSize: size,
        fontWeight: fontWeight);
  }

Answer 3

import 'package:flutter/material.dart';

void main() {
   runApp(const MyApp());
}



class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
            title: const Text('Basic Class TextStyle'),
        ),
        body: Center(
            child: const Text('Size Text Test', style: myTextStyleBase.size_A
        ),
    );
}

class myTextStyleBase {
    static const size_A = TextStyle(fontSize: 10);
    static const size_B = TextStyle(fontSize: 30);
}

You can call myTextStyleBase, if there is a similar style. if you change it, just change the style in myTextStyleBase. everything that implements will change too. https://fluttercrashcourse.com/blog/04-text-style