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の構成要素のこと、buttoncard circleなどがある)のうち 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アプリ開発について入門者向けに紹介します。
コメント