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 (eg)

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(new MyApp());
}



class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
         title: new Text('Basic Class TextStyle),
    ),
    body: new Center(
         child: new 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

Answer 4

you can use dart extension :

extension TextExtension on Text {
  Text setStyle(TextStyle style) => copyWith(style: style);

  Text setFontFamily(String fontFamily) =>
      copyWith(style: TextStyle(fontFamily: fontFamily));

  Text copyWith(
      {Key key,
        StrutStyle strutStyle,
        TextAlign textAlign,
        TextDirection textDirection = TextDirection.ltr,
        Locale locale,
        bool softWrap,
        TextOverflow overflow,
        double textScaleFactor,
        int maxLines,
        String semanticsLabel,
        TextWidthBasis textWidthBasis,
        TextStyle style}) {
    return Text(this.data,
        key: key ?? this.key,
        strutStyle: strutStyle ?? this.strutStyle,
        textAlign: textAlign ?? this.textAlign,
        textDirection: textDirection ?? this.textDirection,
        locale: locale ?? this.locale,
        softWrap: softWrap ?? this.softWrap,
        overflow: overflow ?? this.overflow,
        textScaleFactor: textScaleFactor ?? this.textScaleFactor,
        maxLines: maxLines ?? this.maxLines,
        semanticsLabel: semanticsLabel ?? this.semanticsLabel,
        textWidthBasis: textWidthBasis ?? this.textWidthBasis,
        style: style != null ? this.style?.merge(style) ?? style : this.style);
  }
}

for example:

Text('MY TEXT').setStyle(...).setFontFamily(...),

Answer 5

Like Collin Jackson mentioned above,

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

this works, but dart linter will complain about it. However, try this

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

You can do this in your code to use it

new Card(
          child: new Container(
            child: new Text(
              'Wow',
              style: display5(context),
              ),
           ),
        ),