【Flutter】Themeで設定できるプロパティ一覧

FlutterにおけるThemeで設定できるプロパティ一覧について紹介します。

スポンサーリンク

【Flutter】Themeのプロパティ一覧

Themeのプロパティでは、様々なデザインを定義できます。

プロパティ 説明
brightness アプリの全体の明るさ(Brightness.light、Brightness.darkなど)
primaryColor アプリの基本色になります。AppBarやTabBar、FloatingActionButtonなど、アプリのメインとなるWidgetの背景色
primaryColorBrightness primaryColorにのみ適用されるbrightness
primaryColorLight Brightness.lightが指定されているときの primaryColor
primaryColorDark Brightness.darkが指定されているときの primaryColor
canvasColor MaterialType(Material Designの構成要素のこと、buttoncardcircleなどがある)のうち Material.canvasに適用される色
accentColor アプリのアクセントカラー
accentColorBrightness accentColorにのみ適用されるbrightness
scaffoldBackgroundColor ScaffoldWidgetの背景色
bottomAppBarColor BottomAppBarWidgetの背景色
cardColor MaterialWidgetにtype: MaterialType.cardを指定したときやCardWidgetの背景色
dividerColor DividerWidgetの色
focusColor Widgetがフォーカスされたときの色です。TextFieldの編集中の色など
hoverColor Widgetがホバーされたときの色
splashColor InkWellのsplashの色
highlightColor InkWellのhighlightの色
splashFactory InkWellのsplashの効果をカスタマイズできるファクトリクラスを指定
selectedRowColor 選択行の背景色
unselectedWidgetColor 選択されていないWidgetの色
disabledColor 非有効化されたWidgetの色です。押せないCheckBoxの色
buttonTheme RaisedButtonなどのButton系Widgetのデフォルトの設定
toggleButtonsTheme ToggleButtons版のButtonTheme。
buttonColor RaisedButtonなどのButton系Widgetの背景色
secondaryHeaderColor PaginatedDataTableのヘッダーの色
textSelectionColor TextFieldなど選択可能なTextWidgetの選択時の色
cursorColor TextFieldなどのカーソルの色
textSelectionHandleColor TextFieldなどで、文字を選択しているときのカーソルの色
backgroundColor 背景色のうち、primaryColorが使われない部分の色
dialogBackgroundColor Dialogの背景色
indicatorTheme TabBarの選択時のインジケーターの色
hintColor TextFieldのhintTextの色
errorColor TextFieldなどのエラーの色
toggleableActiveColor Switchなどのトグルボタンの選択時の色
textTheme TextWidgetの基本的なスタイルです。
primaryTextTheme primaryColorに対応するTextTheme
accentTextTheme accentColorに対応するTextTheme
inputDecorationTheme TextFieldなどに設定するInputDecoration(枠線やヒントなどの装飾)
iconTheme IconWidgetのサイズと色
primaryIconTheme primaryColorのテーマ
accentIconTheme accentColorのテーマ
sliderTheme SliderWidgetのテーマ
tabBarTheme TabBarWidgetのテーマ
tooltipTheme TooltipWidgetのテーマ
cardTheme CardWidgetのテーマ
clipTheme ClipCircleなどのClip系Widgetのテーマ
platform ThemeごとにTargetPlatformを指定するためのプロパティ
materialTapTargetSize Material系のWidgetのタップ領域を指定
applyElevationOverlayColor マテリアルデザインでelevation(浮いているような影が出る)エフェクトを表現する時に、overlayColorを利用するかどうかのフラグです。ダークテーマでは影の表現が難しいため、影の表現がオフになります。
pageTransitionsTheme 画面遷移にどのようなアニメーションを使うかのテーマ。iOS、Androidで分けることも可能
appBarTheme AppBarのテーマ
bottomAppBarTheme BottomAppBarのテーマ
colorScheme Widgetに制限されないカラーセット
snackBarTheme SnackBarWidgetのテーマ
dialogTheme DialogのThemeのテーマ
floatingActionButtonTheme FloatingActionButtonWidgetのテーマ
typography どのロケールで、どのフォントを使うかを指定
cupertinoOverrideTheme Cupertino系のWidgetのテーマ
bottomSheetTheme BottomSheetWidgetのテーマ
popupMenuTheme PopupMenuのテーマ
bannerTheme MaterialBannerWidgetのテーマ
dividerTheme DividerWidgetのテーマ
buttonBarTheme ButtonBarWidgetのテーマ
【Flutter入門】iOS、Android、Windowsアプリ開発
FlutterによるiOS、Android、Windowsアプリ開発について入門者向けに紹介します。
flutter
スポンサーリンク

コメント