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

投稿日: 2022-04-20 2022-10-06
タグ: 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つの組み込みテーマが付属しています。

アプリ全体でスタイルを設定するには、テーマをメソッドに設定する必要があります ThemeData の中に MaterialApp ウィジェット、この場合は、 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 ボタンのテキストまたはアイコンを変更します。いずれかを使用する必要があります light また dark のプロパティ Brightness それを達成するために。

開ける 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でテーマを使用、カスタマイズ、拡張する方法を学びました。

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

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

getdocs

13036