ThemeDataはアプリケーション全体で色やフォントスタイルを共有するためにFlutterで使われます。 ThemeにはGlobal ThemeとLocal Themeの2種類があります。 Global ThemeはアプリケーションルートのMaterialAppが作成したThemeです。
Themeを定義したら、自分のウィジェットで使うことができます。さらに、Flutterが提供するMaterial Widgetsでは、Themeを使ってAppBars、Button、Checkboxなどの背景色やフォントスタイルを設定します。
factory ThemeData({
Brightness brightness, // アプリ全体のテーマの明るさ。ボタンのようなウィジェットに使用され、原色やアクセントカラーを使用しない場合に、どの色を選択するかを決定する。
MaterialColor primarySwatch,// 単一色と10階調のカラーブロックを定義する。
Color primaryColor, // アプリのメイン部分の背景色
Brightness primaryColorBrightness, // primaryColor明るさ。メインカラーの上に配置されたテキストやアイコンの色を決定するために使用される。
Color primaryColorLight, // primaryColor明るい色のバージョンの
Color primaryColorDark, // primaryColor暗いバージョンの
Color accentColor, // ウィジェットの前景色。
Brightness accentColorBrightness, // accentColorTheme.of(context)は、Widgetツリーを見つけ、最も近いThemeオブジェクトを返す。
Color canvasColor, // MaterialType.canvas Themeのデフォルトカラー
Color scaffoldBackgroundColor, // ScaffoldThemeのデフォルトカラー。典型的なMaterialアプリやアプリ内ページの背景色。
Color bottomAppBarColor, // BottomAppBarThemeのデフォルトカラー
Color cardColor, // Card
Color dividerColor, // DividerとPopupMenuDividerの色は、ListTile間やDataTableの行間などでも使用される。
Color highlightColor, // スプラッシュアニメーションの間、またはメニューのアイテムを示すために使用されるハイライトカラーをチェックする。
Color splashColor, // インクスプラッシュの色 インクウェル
InteractiveInkFeatureFactory splashFactory, // InkWellとInkResponseリアクションによって生成されるインクの飛沫の外観を定義する。
Color selectedRowColor, // 選択された行のハイライトに使用される色。
Color unselectedWidgetColor, // 非アクティブなウィジェットに使用する色。例えば、チェックされていないチェックボックス。通常はaccentColorと対比される。disabledColorも参照のこと。
Color disabledColor, // 現在の状態に関係なく、無効状態のウィジェットの色。例えば、無効なチェックボックス。
Color buttonColor, // RaisedButtonボタンで使用されるマテリアルのデフォルトの塗りつぶし色。
ButtonThemeData buttonTheme, // RaisedButtonやFlatButtonなどのボタンウィジェットのデフォルト設定を定義する。
Color secondaryHeaderColor, // 行が選択されたときのPaginatedDataTableタイトルの色。
Color textSelectionColor, // テキストボックスに選択された色(例:TextField
Color cursorColor, // TextFieldのようなテキストボックスのカーソルの色。
Color textSelectionHandleColor, // テキストの現在選択されている部分のハンドルの色を調整するために使用される。
Color backgroundColor, // メインカラーとは対照的な色で、例えばプログレスバーの残りに使われる。
Color dialogBackgroundColor, // Dialog 要素の背景色
Color indicatorColor, // タブの選択されたタブインジケータの色。
Color hintColor, // TextFieldのようなヒントテキストやプレースホルダーテキスト用の色。
Color errorColor, // 入力検証エラーのための色、例えばTextFieldの場合
Color toggleableActiveColor, // Switch、Radio、Checkboxなどの切り替え可能なウィジェットのアクティブ状態を強調するために使用される色。
String fontFamily, // テキストフォント
TextTheme textTheme, // テキストの色は、カードとキャンバスの色と対比される。
TextTheme primaryTextTheme, // テキストテーマとprimaryColorの対比
TextTheme accentTextTheme, // テキストThemeはaccentColorと対照的である。
InputDecorationTheme inputDecorationTheme, // このテーマに基づいたInputDecorator、TextField、TextFormFieldのInputDecorationのデフォルト値。
IconThemeData iconTheme, // カードとキャンバスの色と対照的なアイコンテーマ
IconThemeData primaryIconTheme, // primaryColorでアイコンテーマを対比する
IconThemeData accentIconTheme, // アイコンのテーマをaccentColorと対比させる。
SliderThemeData sliderTheme, // スライダーのレンダリングに使用される色と形
TabBarTheme tabBarTheme, // タブバーインジケーターのサイズ、形、色をカスタマイズするために使用されるTheme。
CardTheme cardTheme, // CardThemeの色とスタイル
ChipThemeData chipTheme, // ChipThemeの色とスタイル
TargetPlatform platform,
MaterialTapTargetSize materialTapTargetSize, // いくつかのMaterialウィジェットのヒットテストサイズを設定する
PageTransitionsTheme pageTransitionsTheme,
AppBarTheme appBarTheme, // Appbarの色、高さ、明るさ、iconTheme、textThemeをカスタマイズするために使用する。
BottomAppBarTheme bottomAppBarTheme, // BottomAppBarのテーマの形、高さ、色をカスタマイズする。
ColorScheme colorScheme, // ほとんどのコンポーネントの色を設定するために使用できる13の色を持っている。
DialogTheme dialogTheme, // ダイアログのテーマ形状をカスタマイズする
Typography typography, // TextTheme、primaryTextTheme、accentTextThemeの色と幾何学的なTextTheme値を設定するために使用する。
CupertinoThemeData cupertinoOverrideTheme
})
グローバルなテーマ
new MaterialApp(
title: title,
theme: ThemeData(
primaryColor: Colors.red,
//...
),
);
部分テーマを作成するには、テーマウィジェットを使用します:
new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: Text('copyWith method'),
);
これを使用する場合、Widgetのコンストラクタ内のTheme.of(context)メソッドを通して呼び出すことができます。Theme.of(context)はWidgetツリーを検索し、最も近いThemeオブジェクトを返します。親レベルにThemeオブジェクトがあれば、そのThemeを返し、なければAppのThemeを返します。