【Flutter】Theme.of(context).textThemeのスタイルを変える方法

Flutterのテキストのフォントを変えるのにTextStyleを使ったりすると思いますが、全体のフォントを統一的にするためにもTheme.of(context).textThemeを使うことも多いと思います。

今回はTheme.of(context).textThemeのスタイルを変える方法を紹介します。

flutter_riverpodを使ってタイマー(Timer)を作成

単一責任の原則を意識するためにflutter_riverpodを使ってタイマー(Timer)を作成しました。詳細は動画で。タイマーの表示、スタート・リセットボタンを使ったタイマーの操作までを実装します。

flutter_riverpodを使ってモデルとビューに分離した状態管理を学ぶ

カウンターアプリを作りながらflutter_riverpodについてカウンターアプリを作成しながら、ConsumerWidget, Providerについて紹介していきます。その中でモデル(model)とビュー(view)を分ける...

実装方法
1. 全体のコードはこちら↓

実装方法

以下のように定義の後にmergeフィールドを定義してあげることで実装できます。

今回はdisplayLargeで定義された文字の色をオレンジ色に変更しています。

Text(
  "displayLarge",
  style: Theme.of(context).textTheme.displayLarge!.merge(
        TextStyle(
          color: Colors.amber,
        ),
      ),
),

全体のコードはこちら↓

余談ですが、以下のフィールドはdepulicatedになっているので気をつけてください！

Theme.of(context).textTheme.headline
Theme.of(context).textTheme.bodytext
Theme.of(context).textTheme.subtitle

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    ProviderScope(
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Home(),
    );
  }
}

class Home extends ConsumerWidget {
  const Home({
    super.key,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(
                "displayLarge",
                style: Theme.of(context).textTheme.displayLarge!.merge(
                      TextStyle(
                        color: Colors.amber,
                      ),
                    ),
              ),
              Text(
                "displayMedium",
                style: Theme.of(context).textTheme.displayMedium,
              ),
              Text(
                "displaySmall",
                style: Theme.of(context).textTheme.displaySmall,
              ),
              Text(
                "headlineLarge",
                style: Theme.of(context).textTheme.headlineLarge,
              ),
              Text(
                "headlineMedium",
                style: Theme.of(context).textTheme.headlineMedium,
              ),
              Text(
                "headlineSmall",
                style: Theme.of(context).textTheme.headlineSmall,
              ),
              Text(
                "titleLarge",
                style: Theme.of(context).textTheme.titleLarge,
              ),
              Text(
                "titleMedium",
                style: Theme.of(context).textTheme.titleMedium,
              ),
              Text(
                "titleSmall",
                style: Theme.of(context).textTheme.titleSmall,
              ),
              Text(
                "bodyLarge",
                style: Theme.of(context).textTheme.bodyLarge,
              ),
              Text(
                "bodyMedium",
                style: Theme.of(context).textTheme.bodyMedium,
              ),
              Text(
                "bodySmall",
                style: Theme.of(context).textTheme.bodySmall,
              ),
              Text(
                "labelLarge",
                style: Theme.of(context).textTheme.labelLarge,
              ),
              Text(
                "labelMedium",
                style: Theme.of(context).textTheme.labelMedium,
              ),
              Text(
                "labelSmall",
                style: Theme.of(context).textTheme.labelSmall!.merge(
                      TextStyle(
                        color: Colors.amber,
                      ),
                    ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}