【Flutter】Theme vs ThemeData クイズ
私はよくFlutterの Theme と ThemeData が混乱するのでまとめというかクイズ形式の記事を書きます。
基礎知識
ThemeData とは
色やフォントなどのデザイン系データのまとまり。具体的なデータが入っているもの。
Theme とは
ウィジェットです。傘下のウィジェットの色やフォントなどを指定するためのウイジェット。構造的に似たものとして傘下のテキストスタイルを指定する DefaultTextStyle があります。
class Theme extends StatelessWidget
出現パターン4つ
まずは Theme(theme) と ThemeData の出現パターンを4つに分けます。
- ウイジェットである
Theme - 内容は
ThemeDataだがTheme(theme)と表記されているもの - ソース上の表記も
ThemeData、内容もThemeData - Theme(theme)という大きな概念。ソース上の具体的なものを指定しているのというよりは、デザイン視点で語っているTheme。また、Theme機能そのものについて言っているとき。
それではスタートです。
MaterialApp のコンストラクタ内で theme: に渡すものは？
答: ThemeData
theme: というところに渡していますが実際には ThemeData なのでパターン2になります。
Theme.of(context) で返ってくるものは？
答: ThemeData
ウィジェットの構造を上にたどっていって欲しいものを見つけるやつですが、ここで返ってくるものは ThemeData です。欲しいものは ThemeData ですが取得コードでは Theme を使うのでパターン2にします。
Xxxxx(primaryColor: Colors.purple) と書ける Xxxxx は？
答: ThemeData
ThemeData のコンストラクタは具体的なデータが入ります。パターン3です。
light()やdark()というfactoryコンストラクタを持つものは？
答: ThemeData
パターン3にします。
次の文を読み、(1)から(5)のtheme(s)はそれぞれ何か答えなさい
To share colors and font styles throughout an app, use themes(1). You can either define app-wide themes(2), or use Theme(3) widgets that define the colors and font styles for a particular part of the application. In fact, app-wide themes(4) are just Theme(5) widgets created at the root of an app by the MaterialApp.
DeepL丸投げ結果
アプリ全体で色やフォントスタイルを共有するには、テーマ(1)を使用します。アプリ全体のテーマ(2)を定義するか、アプリケーションの特定の部分に対して色とフォントスタイルを定義する Theme(3) ウィジェットを使用することができます。実際、アプリ全体のテーマ(4)は、MaterialAppによってアプリのルートで作成されるテーマ(5)ウィジェットに過ぎません。
私の答:
(1):
色やフォントスタイルを共有するために使うものと言っています。段落の1行目なので概念の話をしようとしている気がします。ここでは「Themeという機能」と言いたいのではないでしょうか。ということで、ソース上のこれ！と指すよりもパターン4のTheme機能かと。
(3):
アプリの特定の場所の色やフォントスタイルを決めるものということでウィジェットの Theme です。後ろにwidgetsという単語もありますし。
(2)と(4)と(5):
(5)は後ろにwidgetsとあるのでウィジェットの Theme です。Material App の内部で作られるのでしょうか。(4)の説明が(5)なので(4)は抽象度がひとつ上の概念的なThemeかと。パターン4です。「アプリ全体で統一感のあるデザインの仕組み」のような意味に感じます。で、(2)と(4)が同じなので(2)も概念的なパターン4かと思います。
はっきり答を決めるつもりはないです。文章の中で、大きな概念のThemeと具体的なものが混ざる現象を出したかったのでこの例文を出しました。
まとめ
以上のように Theme と ThemeData の2つで捉えるよりも
-
ThemeDataでありながらTheme(theme)という表記が用いられるもの - デザイン視点のThemeや機能全体を指したTheme
を加えて考えると理解しやすくなりました。
出典
Discussion