これまでの章で、電卓アプリのUI作成と機能実装を行ってきました。この章では、アプリの仕上げとして、テーマの設定、ダークモード対応、アイコンの追加などを行います。前編では、これらの項目について説明します。

1. テーマの設定

Flutterでは、ThemeData クラスを使ってアプリ全体のテーマを設定できます。テーマを設定することで、アプリの見た目を一貫して管理し、簡単に変更できるようになります。

MaterialApp ウィジェットの theme プロパティに、ThemeData オブジェクトを渡すことで、テーマを適用できます。

class CalculatorApp extends StatelessWidget {
  const CalculatorApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Calculator',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.light,
        ),
        useMaterial3: true,
      ),
      home: const Calculator(),
    );
  }
}

ThemeData の colorScheme プロパティで、アプリのプライマリカラーや明るさを設定しています。useMaterial3 を true に設定することで、Material Design 3 のスタイルを適用しています。

ボタンの色なども、ThemeData から取得するように変更しましょう。

class CalculatorButton extends StatelessWidget {
  const CalculatorButton({
    super.key,
    required this.text,
    this.flex = 1,
    required this.onPressed,
    this.color,
  });

  final String text;
  final int flex;
  final Color? color;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: color ?? Theme.of(context).colorScheme.primary, // 変更
          foregroundColor: Theme.of(context).colorScheme.onPrimary, // 追加
          padding: const EdgeInsets.all(24.0),
          shape: const RoundedRectangleBorder(
            side: BorderSide(
              color: Colors.black,
              width: 1,
              style: BorderStyle.solid,
            ),
          ),
        ),
        child: Text(
          text,
          style: TextStyle(
            fontSize: 24.0,
            color: color == null ? Colors.white : Theme.of(context).colorScheme.onPrimary, // 変更
          ),
        ),
      ),
    );
  }
}

ElevatedButton.styleFrom の backgroundColor プロパティに、color が指定されていない場合は Theme.of(context).colorScheme.primary を使用するように変更しました。foregroundColor プロパティを追加し、ボタンの前景色（テキストやアイコンの色）をTheme.of(context).colorScheme.onPrimaryに設定しました。Text ウィジェットの color プロパティにも、同様の変更を加えました。

2. ダークモード対応

ダークモードに対応するには、MaterialApp ウィジェットの darkTheme プロパティに、ダークモード用の ThemeData を設定します。

class CalculatorApp extends StatelessWidget {
  const CalculatorApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Calculator',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.light,
        ),
        useMaterial3: true,
      ),
      darkTheme: ThemeData( // 追加
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.dark,
        ),
        useMaterial3: true,
      ),
      home: const Calculator(),
    );
  }
}

darkTheme に、brightness を Brightness.dark に設定した ThemeData を追加しました。

これで、デバイスの設定に応じて、ライトモードとダークモードが自動的に切り替わるようになります。

3. アイコンの追加

アプリのアイコンを設定するには、各プラットフォームのルールに従って、アイコン画像を用意する必要があります。

Androidの場合は、android/app/src/main/res ディレクトリ内に、mipmap-XXXX という名前のディレクトリが解像度別に用意されています。これらのディレクトリに、適切なサイズのアイコン画像を配置します。

iOSの場合は、ios/Runner/Assets.xcassets/AppIcon.appiconset ディレクトリ内に、各種サイズのアイコン画像が格納されています。Contents.json ファイルに、各アイコン画像のファイル名とサイズが記述されています。

アイコン画像を用意したら、Flutterの flutter_launcher_icons パッケージを使って、アイコンを自動生成することができます。

1. pubspec.yaml ファイルの dev_dependencies に、flutter_launcher_icons を追加します。

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
  flutter_launcher_icons: ^0.13.1 # 追加

2. pubspec.yaml ファイルに、flutter_launcher_icons の設定を追加します。

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"
  min_sdk_android: 21 # android min sdk min:16, default 21
  remove_alpha_ios: true

• android: Android用のアイコンを生成するかどうか
• ios: iOS用のアイコンを生成するかどうか
• image_path: アイコン画像のパス
• min_sdk_android: Androidの最小SDKバージョン
• remove_alpha_ios: iOS用アイコンのアルファチャンネルを削除するかどうか

3. ターミナルで以下のコマンドを実行し、アイコンを生成します。

flutter pub get
flutter pub run flutter_launcher_icons

これで、各プラットフォーム用のアイコンが自動的に生成され、設定されます。