Flutterアプリケーション開発概論

【テーマ設計】LINE風の緑・白・薄いグレーでアプリ全体の見た目を整える

第9節LINE風チームタスク管理アプリを作りながら、ログイン・データベース・権限管理を学ぶ
FlutteriOSAndroidMacOSWindows基礎から学ぶ開発アプリ開発

このページでやること

このページでは、アプリ全体の見た目を整えます。

今回やることは、主にこの2つです。

1. AppColorsで色をまとめる
2. ThemeDataでアプリ全体の見た目を設定する

ThemeData とは、Flutterアプリ全体の色、文字、ボタン、AppBarなどの見た目をまとめて設定する仕組みです。

Flutter公式でも、アプリ全体で色や文字スタイルを共有するには、MaterialApp の theme に ThemeData を設定すると説明されています。

https://docs.flutter.dev/cookbook/design/themes

今日のゴール

完成後は、アプリ全体が次のような雰囲気になります。

緑：メインボタンやアイコン
白：カードやAppBar
薄いグレー：背景
黒：メイン文字
グレー：補足文字

LINEっぽい雰囲気にするために、強い装飾は使いません。

シンプルにします。

まず出てくる単語

単語一言説明
テーマアプリ全体の見た目設定
ThemeDataFlutterでテーマを作るためのクラス
MaterialAppFlutterアプリ全体を包む基本部品
AppColors自分で作る色の一覧クラス
Color色を表すFlutterの型
ColorSchemeアプリ全体の色の組み合わせ
AppBar画面上部のバー
FloatingActionButton右下に出る丸いボタン
InputDecorationTheme入力欄の見た目設定

クラスとは、部品の設計図のようなものです。

作業の流れ

1. lib/main.dartを開く
↓
2. AppColorsを追加する
↓
3. MaterialAppのthemeを設定する
↓
4. 保存する
↓
5. flutter runで画面を見る
↓
6. 色を1か所だけ変えて、変化を確認する

このページでは、Firebaseやnpmの設定は不要です。

Step 1：main.dartを開く

Flutterプロジェクトの中で、次のファイルを開きます。

lib/main.dart

VS Codeなら、ターミナルで次を実行してもOKです。

code lib/main.dart

code が使えない場合は、VS Codeの画面から lib/main.dart を開いてください。

Step 2：AppColorsを追加する

AppColors は、アプリで使う色をまとめる場所です。

WorkBoardApp クラスの下あたりに、次のコードを入れます。

class AppColors {
  static const bg = Color(0xFFF3F4F6);
  static const chatBg = Color(0xFFECEFF1);
  static const card = Colors.white;
  static const lineGreen = Color(0xFF06C755);
  static const lineGreenDark = Color(0xFF00B900);
  static const text = Color(0xFF111111);
  static const subText = Color(0xFF8A8A8A);
  static const border = Color(0xFFE5E5E5);
  static const danger = Color(0xFFE53935);
  static const success = Color(0xFF06C755);
  static const warning = Color(0xFFFFB300);

  static const primary = lineGreen;
}

static const は、どこからでも使える固定値という意味です。

難しく考えなくて大丈夫です。

「色の名前をつけて、あとから使いやすくしている」と考えてください。

Step 3：色の意味を確認する

今入れた色の役割は、次の通りです。

色名使う場所
bgログイン画面などの背景
chatBgタスク画面の背景
cardカードや入力エリア
lineGreenメインの緑
lineGreenDark少し濃い緑
textメイン文字
subText補足文字
border薄い境界線
danger削除やエラー
success完了や成功
warning進行中や注意

色をバラバラに書かず、AppColors にまとめると、あとで変更しやすくなります。

Step 4：MaterialAppのthemeを設定する

次に、WorkBoardApp の中にある MaterialApp を確認します。

完成コードでは、このように書きます。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WorkBoard Firebase',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        fontFamily: 'Roboto',
        scaffoldBackgroundColor: AppColors.bg,
        colorScheme: ColorScheme.fromSeed(
          seedColor: AppColors.lineGreen,
          primary: AppColors.lineGreen,
        ),
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.white,
          foregroundColor: AppColors.text,
          elevation: 0,
          centerTitle: false,
          surfaceTintColor: Colors.white,
          titleTextStyle: TextStyle(
            color: AppColors.text,
            fontSize: 18,
            fontWeight: FontWeight.w900,
          ),
        ),
        filledButtonTheme: FilledButtonThemeData(
          style: FilledButton.styleFrom(
            backgroundColor: AppColors.lineGreen,
            foregroundColor: Colors.white,
            minimumSize: const Size.fromHeight(48),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            textStyle: const TextStyle(fontWeight: FontWeight.w800),
          ),
        ),
        floatingActionButtonTheme: const FloatingActionButtonThemeData(
          backgroundColor: AppColors.lineGreen,
          foregroundColor: Colors.white,
          shape: CircleBorder(),
        ),
        inputDecorationTheme: InputDecorationTheme(
          filled: true,
          fillColor: Colors.white,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
            borderSide: const BorderSide(color: AppColors.border),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
            borderSide: const BorderSide(color: AppColors.border),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
            borderSide: const BorderSide(
              color: AppColors.lineGreen,
              width: 1.4,
            ),
          ),
        ),
      ),
      home: const AuthGate(),
    );
  }
}

MaterialApp の theme に ThemeData を入れると、アプリ全体に見た目のルールが反映されます。Flutter公式の ThemeData ドキュメントでも、ColorScheme.fromSeed を使ってシード色からテーマを作る例が紹介されています。

https://api.flutter.dev/flutter/material/ThemeData-class.html

Step 5：各設定の意味

全部を暗記しなくて大丈夫です。

まずは、よく使うところだけ見ます。

コード一言説明
useMaterial3: true新しいMaterial Designの見た目を使う
fontFamily: 'Roboto'基本フォントをRobotoにする
scaffoldBackgroundColor画面全体の背景色
colorSchemeアプリ全体の色の組み合わせ
appBarTheme上部バーの見た目
filledButtonTheme塗りつぶしボタンの見た目
floatingActionButtonTheme右下ボタンの見た目
inputDecorationTheme入力欄の見た目

Material Designとは、Googleが作っているアプリ画面のデザインルールです。

Step 6：保存する

main.dart を保存します。

Macなら、

command + S

Windowsなら、

Ctrl + S

Step 7：実行する

ターミナルで実行します。

flutter run

すでに起動中なら、ターミナルで r を押すとホットリロードできます。

ホットリロードとは、アプリを終了せずに画面の変更を反映する機能です。

r

Step 8：画面の変化を見る

ログイン画面を見てください。

次のような変化があればOKです。

背景が薄いグレーになる
WorkBoardの文字が緑になる
ログインボタンが緑になる
入力欄が白くなる
角が少し丸くなる

これで、アプリ全体の雰囲気が整いました。

1か所だけ変更してみる

試しに、緑を少し変えてみます。

AppColors のこの行を探してください。

static const lineGreen = Color(0xFF06C755);

試しに、次の色に変えます。

static const lineGreen = Color(0xFF00B900);

保存して、ホットリロードします。

r

ボタンやタイトルの緑が少し変われば成功です。

これが「テーマをまとめて管理する」メリットです。

元に戻す

確認できたら、元に戻します。

static const lineGreen = Color(0xFF06C755);

保存します。

command + S

npmや環境変数はこのページで必要？

このページでは、npmは使いません。

npmとは、Node.jsのパッケージ管理ツールです。

Firebase CLIを入れるときには使いましたが、テーマ設定では使いません。

環境変数も設定しません。

環境変数とは、パソコン全体で使う設定値のことです。

このページでは、やることはこれだけです。

main.dartを開く
↓
AppColorsを書く
↓
ThemeDataを書く
↓
保存する
↓
flutter runで確認する

よくあるエラーと直し方

エラー原因直し方
AppColors isn't definedAppColors クラスがないAppColors を追加する
Color isn't definedmaterial.dart がないimport 'package:flutter/material.dart'; を確認
AuthGate isn't definedAuthGate がまだない後で作る。今は一時的に別画面でもOK
画面が変わらない保存していないcommand + S
色が変わらないホットリロードしていないターミナルで r

AuthGate isn't defined** が出る場合**

このページだけを先に試している場合、次のエラーが出ることがあります。

The name 'AuthGate' isn't a class.

これは、AuthGate という画面をまだ作っていないからです。

その場合は、一時的に home を次のようにしてください。

home: const Scaffold(
  body: Center(
    child: Text('Theme Test'),
  ),
),

完成コードを使っている場合は、AuthGate があるのでそのままでOKです。

最短作業まとめ

読むのが大変な人は、ここだけ見てください。

1. AppColors を追加する

class AppColors {
  static const bg = Color(0xFFF3F4F6);
  static const chatBg = Color(0xFFECEFF1);
  static const card = Colors.white;
  static const lineGreen = Color(0xFF06C755);
  static const lineGreenDark = Color(0xFF00B900);
  static const text = Color(0xFF111111);
  static const subText = Color(0xFF8A8A8A);
  static const border = Color(0xFFE5E5E5);
  static const danger = Color(0xFFE53935);
  static const success = Color(0xFF06C755);
  static const warning = Color(0xFFFFB300);

  static const primary = lineGreen;
}

2. MaterialApp の theme を設定する

theme: ThemeData(
  useMaterial3: true,
  fontFamily: 'Roboto',
  scaffoldBackgroundColor: AppColors.bg,
  colorScheme: ColorScheme.fromSeed(
    seedColor: AppColors.lineGreen,
    primary: AppColors.lineGreen,
  ),
),

3. 保存する

command + S

4. 実行する

flutter run

チェックリスト

□ lib/main.dartを開いた
□ AppColorsを追加した
□ MaterialAppにthemeを書いた
□ scaffoldBackgroundColorを設定した
□ colorSchemeを設定した
□ AppBarの見た目を設定した
□ ボタンの見た目を設定した
□ 入力欄の見た目を設定した
□ 保存した
□ flutter runで確認した

ミニ確認問題

Q1. ThemeData は何をするものですか？

回答

アプリ全体の色、文字、ボタン、入力欄などの見た目をまとめて設定するものです。

Q2. AppColors を作る理由は何ですか？

回答

色を1か所にまとめて、あとから変更しやすくするためです。

Q3. scaffoldBackgroundColor は何を変えますか？

回答

画面全体の背景色を変えます。

Q4. このページでnpmや環境変数は必要ですか？

回答

必要ありません。

テーマ設計では、main.dart のコードを変更して、保存して、実行するだけです。

このページのまとめ

  • LINE風にするため、緑・白・薄いグレーを中心にする。
  • AppColors に色をまとめる。
  • ThemeData でアプリ全体の見た目を設定する。
  • MaterialApp の theme に書くと、アプリ全体に反映される。
  • AppBar、ボタン、入力欄もテーマでまとめて設定できる。
  • このページではnpmや環境変数は不要。
  • まずは保存して、実行して、画面の変化を見ることが大事。

次のページでやること

次のページでは、共通UIを作ります。

AppCard、AppTextField、ErrorBox などを作って、同じ見た目の部品を何度も使えるようにします。

前の節【main.dart準備】Firebase.initializeAppでアプリ起動前にFirebaseを初期化する次の節【共通UI】AppColors・AppCard・AppTextField・ErrorBoxを作る
教材トップへ戻る