FlutterのThemeを利用して見た目を統一する
primarySwatchの設定
- primarySwatchはMaterialColorで設定する
- MaterialColorはMapのカラーパレットとプライマリーカラーで設定する
/// カラーパレット
static const _colorPalettes = <int, Color>{
50: Color(0xFFFFF3E0),
100: Color(0xFFFFE0B2),
200: Color(0xFFFFCC80),
300: Color(0xFFFFB74D),
400: Color(0xFFFFA726),
500: Color(0xFFFF9800),
600: Color(0xFFFB8C00),
700: Color(0xFFF57C00),
800: Color(0xFFEF6C00),
900: Color(0xFFE65100),
};
/// 第一引数がプライマリーカラー
/// カラーパレットからプライマリーカラーにしたい色を選択する
static const _primarySwatch = MaterialColor(0xFFFF9800, _colorPalettes);
参考URL
フォントの設定
フォントを設定する為の準備
- フォントファミリーをダウンロードする
- プロジェクト直下にfontsディレクトリを作成する
- fontsディレクトリにダウンロードしたフォントファミリーを格納する
- pubspec.yamlでフォントを指定する
fonts:
- family: RampartOne
fonts:
- asset: fonts/RampartOne-Regular.ttf
- family: NotoSansJP
fonts:
- asset: fonts/NotoSansJP-Regular.otf
- asset: fonts/NotoSansJP-Bold.otf
weight: 700
ThemeDataでフォントファミリーを指定する
theme: ThemeData(
primarySwatch: _primarySwatch,
fontFamily: 'NotoSansJP',
),
参考URL
ThemeDataのその他の設定
文字のサイズなどはマジックナンバーで指定せずにThemeDataから取得するようにする
Text(
'$_counter',
style: Theme.of(context).textTheme.displaySmall,
),
デフォルトのThemeDataの設定では思い通りに表示出来ない場合にThemeDataを調整する
theme: ThemeData(
textTheme: const TextTheme(
headlineSmall: TextStyle(fontSize: 14.0),
),
),
ThemeDataでは数多くの設定があるので必要に応じて部分的修正するのが良さそうです
参考URL