👻

【Flutter】TextThemeについて

2023/07/07に公開

Flutter

TextThemeとは

TextThemeとは、マテリアルデザインのテキストテーマです。
マテリアルデザインにあるさまざまなタイポグラフィのスタイルを定義しています。

マテリアルデザインとは

マテリアルデザインは、Googleが提案したデザインの指針およびスタイルです。
このデザインは、ユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）の開発において、一貫性のある見た目や操作性を提供するために使用されます。
TextThemeには、Googleが提案したデザインの指針を元にタイポグラフィのスタイルを定義していることなります。

TextThemeを使ってみよう

下記のコードを見てみましょう。
まず、コメント1. の通り、Theme.of(context)でThemeDataクラスのインスタンスを格納します。
その後に、コメント2. の通り、theme.textTheme.・・・で自分が好きなテキストスタイルを指定します。

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 1. themeを準備する
    final theme = Theme.of(context);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
	  // 2. theme.textTheme.・・・と書く
          title: Text('App', style: theme.textTheme.headlineMedium),
        ),
      ),
    );
  }
}

TextThemeクラスのフィールドについて

下記のURLの通り、15種類のテキストスタイルが定義されています。

その１５種類のテキストスタイルは５つの種類に分けられます。

①display: 非常に大きなテキスト要素に使用されるスタイルです。アプリのトップレベルの見出しや注目すべき重要なテキストに適用されます。

②headline: 一般的な見出しやセクションのタイトルに使用されるスタイルです。

③title: 主要なセクションや画面の見出しに使用されるスタイルです。ページのタイトルやセクションの見出しに使用されます。

④label: ラベルやキャプションに使用されるスタイルです。ボタンやフォームのラベル、アイコンのキャプションなどに適用されます。

⑤body: 通常の本文のテキストに使用されるスタイルです。文章の本文や一般的なテキストコンテンツに適用されます。

TextThemeとは

マテリアルデザインとは

TextThemeを使ってみよう

TextThemeクラスのフィールドについて

Discussion