Flutterでテーマを使用する方法

序章

Flutterは、MaterialやCupertinoデザインシステムなどのユーザーインターフェイス（UI）パッケージでサポートされています。これらの設計システムは、アプリケーション全体で一貫性のあるまとまりのある美学のためのソリューションを提供するのに役立ちます。

ただし、デフォルトのデザインパターンのみに依存することは、ブランディングの観点からニーズと密接に一致しない場合があります。代わりに、デフォルトをベースとして使用して、その上にカスタマイズを適用することもできます。

この記事では、Flutterテーマを使用してアプリ全体の外観を変更するためのいくつかの方法について説明します。

前提条件

この記事をフォローするには、次のものが必要です。

Flutterをダウンロードしてインストールします。
Android StudioまたはVisual StudioCodeをダウンロードしてインストールするには。
コードエディタ用のプラグインをインストールすることをお勧めします。 AndroidStudio用にインストールされたFlutterおよびDartプラグイン。 VisualStudioCode用にインストールされたFlutter拡張機能。

この記事は、Flutter v1.22.2、Android SDK v30.0.2、およびAndroidStudiov4.1で検証されました。

ステップ1—プロジェクトの設定

この記事では、新しいFlutterアプリケーションを作成するときに生成されるデモアプリケーションに依存します。

Flutter用に環境を設定したら、次のコマンドを実行して新しいアプリケーションを作成できます。

flutter create flutter_themes_example

新しいプロジェクトディレクトリに移動します。

cd flutter_themes_example

flutter createを使用すると、ボタンがクリックされた回数を表示するデモアプリケーションが作成されます。

マテリアルデザインUIコンポーネントを使用して動作するFlutterアプリケーションができたので、最初のカスタマイズをテーマに適用できます。

ステップ2—デフォルトのテーマを使用する

Googleのマテリアルパッケージには、ライトバージョン（デフォルト）とダークバージョンの2つの組み込みテーマが付属しています。

アプリ全体でスタイルを設定するには、MaterialAppウィジェットのThemeDataのメソッド、この場合はlight()またはdark()オプション。

コードエディタでmain.dartを開き、themeをThemeData.dark()に変更します。

lib / main.dart

// ...

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ...

コードをコンパイルして、エミュレーターで実行します。

次に、高度なテーマのカスタマイズを試すことができます。

ステップ3—グローバルテーマの使用

ThemeDataに直接パラメータを渡すことも可能です。公式ドキュメントには、primaryColor、fontFamily、およびcursorColorを含むすべての使用可能なプロパティがリストされています。

ThemeDataのいくつかのプロパティにも明るさの対応物があり、これらはそれらの上にあるウィジェットを制御します。したがって、accentColorはボタンを変更しますが、accentColorBrightnessはボタンのテキストまたはアイコンを変更します。これを実現するには、Brightnessのlightまたはdarkプロパティのいずれかを使用する必要があります。

コードエディタでmain.dartを開き、ThemeDataを変更して、カスタムprimaryColor、accentColor、およびaccentColorBrightnessを使用します。

lib / main.dart

// ...

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.purple[800],
        accentColor: Colors.amber,
        accentColorBrightness: Brightness.dark
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ...

コードをコンパイルして、エミュレーターで実行します。

AppBarは、白のテキストで紫の色相で表示されます。ボタンは黄色で表示され、暗い記号が表示されます。

次に、テーマの拡張を試すことができます。

ステップ4—テーマを適応させる

既存のテーマを取得して、特定のプロパティのみを上書きすることもできます。テーマを拡張するには、copyWithメソッドを使用してテーマを拡張し、カスタムスタイルを渡すことができます。

コードエディタでmain.dartを開き、ThemeDataを変更してdarkテーマを拡張します。

lib / main.dart

// ...

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark().copyWith(
        primaryColor: Colors.purple[800],
        accentColor: Colors.amber,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ...

コードをコンパイルして、エミュレーターで実行します。

アプリケーションのメインコンテンツは、明るいテキストで暗く表示されます。ただし、AppBarは、以前のダークテーマの実験のように黒ではありません。 AppBarは紫色です。ボタンは、以前のダークテーマの実験のようにターコイズではありません。ボタンは琥珀色です。

次に、ウィジェットへのテーマの適用について見ていきます。

ステップ5—テーマの使用

以前の実験は、マテリアルウィジェットに依存していました。これらのウィジェットは、ThemeDataを使用するために開発されました。新しいカスタムウィジェットを作成する場合は、テーマのプロパティをウィジェットに渡すことができることを確認する必要があります。 Theme.of()を使用して、ThemeDataのすべてのプロパティにアクセスできます。

ThemeDataとは異なるテーマプロパティを使用するように既存のボタンを変更する例を次に示します。

lib / main.dart

// ...

class _MyHomePageState extends State<MyHomePage> {
  // ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ...

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        backgroundColor: Theme.of(context).primaryColor,
        foregroundColor: Theme.of(context).primaryColorLight,
        child: Icon(Icons.add),
      ),
    );
  }
}

コードをコンパイルして、エミュレーターで実行します。

ターコイズボタンの代わりに、明るいアイコンが付いた暗いボタンを観察する必要があります。

結論

この記事では、Flutterでテーマを使用、カスタマイズ、拡張する方法を学びました。

テーマは、アプリケーション全体で一貫性のあるまとまりのある美学を作成するための強力なツールです。

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