blog

FlutterのThemeData

ThemeDataはアプリ間で色やフォントスタイルを共有するためにFlutterで使われます。Themeには2種類あります:Global ThemeとLocal Theme。...

Jan 8, 2021 · 4 min. read

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を返します。

Read next

Http

1.1 1、HTTPプロトコルは、プロトコルのアプリケーション層に基づいており、トランスポート層では、TCP通信プロトコルの信頼性を使用しています。 2、MIMEタイプ:インターネット標準のメッセージコンテンツタイプの説明です、一般的なタイプの テキストファイル:テキスト/ htmlの

Jan 6, 2021 · 2 min read

Linuxとカスタムコマンド

Jan 5, 2021 · 1 min read

実装、api、compileOnlyの違い

Jan 5, 2021 · 1 min read

TypeScriptの関数

Jan 4, 2021 · 2 min read