flutter/flutter-theming

flutter-theming は何をしますか？

Flutterのテーマシステムを使ってアプリのテーマをカスタマイズする方法について説明します。

概要

Flutterのテーマシステムを使用すると、アプリ全体の見た目を一貫して管理できます。ThemeDataを利用して色、フォント、スタイルなどのプロパティを定義し、アプリ全体に適用できます。

基本的な使い方

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
    ),
  ),
  home: MyHomePage(),
)

テーマのカスタマイズ

• ThemeDataの各種プロパティを設定してアプリのテーマをカスタマイズします。
• ダークモード用にdarkThemeを別途定義できます。
• 独自のテーマクラスを作成して、特定のコンポーネントにテーマを適用することも可能です。

テーマの参照

ウィジェット内でテーマを参照するにはTheme.of(context)を使用します。

Text(
  'Hello World',
  style: Theme.of(context).textTheme.headline1,
)

動的テーマ変更

アプリケーションの実行時にテーマを動的に変更するには、AnimatedThemeウィジェットや状態管理を利用します。

詳細についてはFlutter公式ドキュメントを参照してください。