Flutter: Themeを定義するメリットがわからない

Question

使っている教材であまり説明がなかったThemeについて勉強中なのですが、すごく複雑で種類も豊富のため学習に滞りを感じています。

各部品の色やフォントのデザインなどを統一するだけであれば空のファイルにkBodyTextColorなどの変数とそのデザインを定義して、デザイン用のファイルとして運用すれば済むようにも思います。

単純な例ですが、薄いピンクとこげ茶色の2色をメインにアプリを作る場合、TextButtonとElevatedButtonがあったとします。
colorSchemeをcopyWithし、primaryをピンク、onPrimaryをこげ茶色に変更しています。
ElevatedButtonは良い感じなのですが、TextButtonは背景の白とのコントラストが良くありません。

import 'package:flutter/material.dart';

void main() => runApp(TestApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _kTestTheme,
      home: Test(),
    );
  }
}

final ThemeData _kTestTheme = _buildTestTheme();
ThemeData _buildTestTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
      colorScheme: base.colorScheme.copyWith(
    primary: Color(0xFFFEDBD0),
    onPrimary: Color(0xFF442B2D),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ButtonBar(
          alignment: MainAxisAlignment.center,
          children: [
            TextButton(onPressed: () {}, child: Text('TextButton')),
            SizedBox(
              width: 10.0,
            ),
            ElevatedButton(onPressed: () {}, child: Text('ElevatedButton')),
          ],
        ),
      ),
    );
  }
}

なので、TextButtonには個別に色を指定します。

TextButton(
              onPressed: () {},
              child: Text(
                'TextButton',
              ),
              style: ButtonStyle(
                  foregroundColor:
                      MaterialStateProperty.all<Color?>(Color(0xFF442B2D))),
            ),

これでTextButtonもよく見えます。

ですが、kButtonBackgroundColorとkButtonTextColorという変数に色を定義して呼び出せばThemeを設定する必要がなく余計なミスもなくなるかと思います。

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

void main() => runApp(TestApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Test(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ButtonBar(
          alignment: MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {},
              child: Text(
                'TextButton',
              ),
              style: ButtonStyle(      //TextButtonの色を指定
                  foregroundColor:
                      MaterialStateProperty.all<Color?>(kButtonTextColor)),
            ),
            SizedBox(
              width: 10.0,
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('ElevatedButton'),
              style: ButtonStyle(      //ElevatedButtonの色を指定
                  foregroundColor:
                      MaterialStateProperty.all<Color?>(kButtonTextColor),
                  backgroundColor: MaterialStateProperty.all<Color?>(
                      kButtonBackgroundColor)),
            ),
          ],
        ),
      ),
    );
  }
}

もっと複雑なアプリになると必要性を理解できるようになるのかもしれませんが、「必要な時に呼び出す」という考え方のほうがThemeを決めてエラーを吐くよりずっと速くて安全に見えてしまいます。

初心者のため解釈違いがあるかもしれません。ご協力いただけたら幸いです。

Answer 1

示されている例ではThemeを使わないことによって変更時の作業量が大幅に増えるわけでは無いと思うので、自分が良いと思うようにしたら良いと思います。

Themeに限らず全てのウィジェット、パッケージが多かれ少なかれ学習コストがあるので、結局学習コストと得られるメリットのバランスによる、ということだと思います。

Themeクラス自体は必要でしょうし、Themeクラスを使うことで大きなメリットを受けられるケースもあるでしょう。
しかし、Themeクラスに関しての知識が浅いとうまく使いきれない、ということもあると思います。
ただ、結局Themeクラスが気に入らなくても、Flutterを使う以上、Themeクラスに乗っからないとどうにもならないケースもあるでしょうから、基本と効果的な(代表的な)ユースケースは学んで、そこから先は自分で考えて、できるだけ自分の作業量が少なくなるようにする、ということになるんだろうとは思います。

Comments

[massanmesu]

了解です。
Themeを使いこなせると後々楽になるかなー、と思っていましたがその学習のせいで肝心のアプリ開発が滞っていては意味がないので一旦Theme学習は諦めます。