Flutterの見た目を統一すには、まずこれ。

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

• マテリアルカラーについて
• primarySwatchについて

フォントの設定

フォントを設定する為の準備

1. フォントファミリーをダウンロードする
2. プロジェクト直下にfontsディレクトリを作成する
3. fontsディレクトリにダウンロードしたフォントファミリーを格納する
4. 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

• 公式
• 設定できるプロパティ一覧