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