Futterはどのようにアプリの主な色調とフォントを設定しますか？

Futterのテーマ色とフォントは、Material Appに設定することができます。すなわち、main.dartの入り口から戻ってきたMaterialAppleコンポーネントは、グローバルの主調とフォントを統一して設定します。下記のコードのように:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App   ',
      theme: ThemeData(
        primaryColor: Colors.blue,
        accentColor: Colors.blue[600],
        textTheme: TextTheme(
          headline1: TextStyle(
              fontSize: 36.0, fontWeight: FontWeight.bold, color: Colors.white),
          headline2: TextStyle(
              fontSize: 32.0, fontWeight: FontWeight.w400, color: Colors.white),
          headline3: TextStyle(
              fontSize: 28.0, fontWeight: FontWeight.w400, color: Colors.white),
          headline4: TextStyle(
              fontSize: 24.0, fontWeight: FontWeight.w400, color: Colors.white),
          headline6: TextStyle(
              fontSize: 14.0, fontWeight: FontWeight.w200, color: Colors.white),
          bodyText1: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.w200,
          ),
        ),
        fontFamily: 'Georgia',
      ),
      home: AppHomePage(),
    );
  }
}

MateriaAppのtheme属性により、ThemeDataを構築してグローバルテーマを設定します。ThemeDataで使用される属性は以下の通りです。

breightness：Brightnessのためのエニュメレーションであり、darkとlightの2つのモードが含まれています。ここでdarkは暗い色のモード（すなわちナイトモード）に対応しています。lightは明るい色のモードに対応しています。

プリマColor：メインカラーは、設定後、ナビゲーションバーがメインカラーになります。ナビゲーションバーのフォントの色はメインの色とbreighnessによって自動的に計算されます。表示の色は薄い色ですか？それとも濃い色ですか？

accentColor：補助色は、必要に応じて設定されます。

textThe me：文字の主体。初期バージョンのflunterは設定が少ないので、新しいバージョンはWeb端末をサポートするために、フォントの属性設定は基本的にhtmlと一致しています。headline 1からheadline 6、bodyText 1を含め、これまでのh 1-h 6とbodyのフォントに対応していると感じます。各級のフォントは、TextStyleを構築することによって、対応するフォントパラメータを設定することができます。

font Family：フォント族。

アプリケーションでは、The me.of（context）で現在の本体を取得し、対応する属性を取得して、テーマの色調やフォントを継承することができます。下のコードのTextのようなスタイルは本体のbody Text 1のフォント特性を継承しています。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          ' ',
          style: Theme.of(context).textTheme.bodyText1,
        ),
      ),
    );
  }

Bottom NavigationBarではselectedItem Colorがメイントーンを継承しています。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('    ', style: Theme.of(context).textTheme.headline4),
      ),
      body: IndexedStack(
        index: _index,
        children: _homeWidgets,
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _index,
        onTap: _onBottomNagigationBarTapped,
        selectedItemColor: Theme.of(context).primaryColor,
        items: [
          _getBottomNavItem(
              '  ', 'images/dynamic.png', 'images/dynamic-hover.png'),
          _getBottomNavItem(
              '   ', 'images/message.png', 'images/message-hover.png'),
          _getBottomNavItem(
              '    ', 'images/category.png', 'images/category-hover.png'),
          _getBottomNavItem(
              '    ', 'images/mine.png', 'images/mine-hover.png'),
        ],
      ),
    );
  }

このようにすることで、main.dartのMaterial Appで色調とフォントを統一して全体的に一致させることができます。色調やフォントを調整するには、一箇所で変更すればいいです。最終結果は下図のようになります。

強迫症がある人は、ステータスバーの色が黒いことに気づくかもしれませんが、これはどうやって修正すればいいですか？簡単です。AppBarの属性にbrightness属性を設定すればいいです。

return Scaffold(
      appBar: AppBar(
        title: Text('    ', style: Theme.of(context).textTheme.headline4),
        brightness: Brightness.dark,
      ),
  //...

以上はFutter Appのテーマ色とフォントの設定であり、実際の別の操作方法でもグローバル定数方式を使用して、プロジェクト全体で使用するメイントーン、補助色、フォントも目的を達成することができます。次の記事では、リストを構築する方法を紹介します。
以上がFutterがAppの主調とフォントの詳細を設定する方法です。Futter設定アプリの主調とフォントに関する資料は他の関連記事に注目してください。