【Flutter】テキストテーマについて

概要

Flutterの「text」ウィジェットのテーマ変更についてのまとめ

使用方法

Text("H1", style: Theme.of(context).textTheme.headline1)

部分的にスタイルを変更する方法

copywithを使用する。

文字の色をだけ変えたい場合は以下の様になる

Text("H1",style: Theme.of(context).textTheme.headline1?.copyWith(color: Colors.white))

テーマ一覧

公式ページに使用できるテーマの一覧が記載されている。

https://api.flutter.dev/flutter/material/TextTheme-class.html

デバイス上の表示

全テーマを表示させたデバイス上の画像

ソースコード

class TextThemeScreen extends StatelessWidget {
  const TextThemeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(children: [
      Text("H1", style: Theme.of(context).textTheme.headline1),
      Text("H2", style: Theme.of(context).textTheme.headline2),
      Text("H3", style: Theme.of(context).textTheme.headline3),
      Text("H4", style: Theme.of(context).textTheme.headline4),
      Text("H5", style: Theme.of(context).textTheme.headline5),
      Text("H6", style: Theme.of(context).textTheme.headline6),
      Text("Subtitle 1", style: Theme.of(context).textTheme.subtitle1),
      Text("Subtitle 2", style: Theme.of(context).textTheme.subtitle2),
      Text("Body 1", style: Theme.of(context).textTheme.bodyText1),
      Text("Body 2", style: Theme.of(context).textTheme.bodyText2),
      Text("BUTTON", style: Theme.of(context).textTheme.button),
      Text('caption', style: Theme.of(context).textTheme.caption),
      Text("OVERLINE", style: Theme.of(context).textTheme.overline),
    ]));
  }
}