【カスタマイズ】色・アプリ名・権限・タスク項目を自分用に変更する | LINE風チームタスク管理アプリを作りながら、ログイン・データベース・権限管理を学ぶ | Flutterアプリケーション開発概論

このページでやること

このページでは、作ってきたLINE風チームタスク管理アプリを、自分用にカスタマイズします。

変更する場所は、主にこの4つです。

1. アプリ名
2. 色
3. 権限の名前・説明
4. タスク項目

コードを大きく作り直すのではなく、必要な場所だけを変えます。

今日のゴール

次のように、自分の目的に合わせたアプリにできます。

WorkBoard Firebase
↓
Clinic Task Board

LINE風グリーン
↓
医療系ブルー

admin / member / viewer
↓
管理者 / 担当者 / 確認者

タスク項目
↓
患者導線・SNS投稿・Web修正などに合わせる

npmや環境変数は必要？

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

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

Flutterのコードを少し変更するだけです。

main.dartを開く
↓
アプリ名を変える
↓
AppColorsを変える
↓
権限ラベルを変える
↓
タスク項目を変える
↓
保存して確認

Step 1：main.dartを開く

次のファイルを開きます。

lib/main.dart

ターミナルから開く場合はこちらです。

code lib/main.dart

1. アプリ名を変更する

Step 2：MaterialAppを探す

main.dart の中で、次を検索します。

MaterialApp

このようなコードがあります。

return MaterialApp(
  title: 'WorkBoard Firebase',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: AppColors.lineGreen,
    ),
  ),
  home: const AuthGate(),
);

Step 3：titleを変更する

アプリ名を変えたい場合は、title を変更します。

return MaterialApp(
  title: 'Clinic Task Board',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: AppColors.lineGreen,
    ),
  ),
  home: const AuthGate(),
);

変更するのはここだけです。

title: 'Clinic Task Board',

Step 4：画面上の名前も変える

画面に表示しているアプリ名がある場合は、文字列を検索します。

WorkBoard

VS Codeで検索します。

command + F

出てきた文字を、自分のアプリ名に変更します。

例です。

const Text('WorkBoard')

これを変更します。

const Text('Clinic Task Board')

2. 色を変更する

Step 5：AppColorsを探す

main.dart の中で、次を検索します。

class 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;
}

Step 6：メインカラーを変える

LINE風グリーンを、医療系ブルーに変える例です。

class AppColors {
  static const bg = Color(0xFFF5F8FB);
  static const chatBg = Color(0xFFEAF2F8);
  static const card = Colors.white;

  static const lineGreen = Color(0xFF2F80ED);
  static const lineGreenDark = Color(0xFF1C5FB8);

  static const text = Color(0xFF111827);
  static const subText = Color(0xFF6B7280);
  static const border = Color(0xFFE5E7EB);

  static const danger = Color(0xFFE53935);
  static const success = Color(0xFF2F80ED);
  static const warning = Color(0xFFFFB300);

  static const primary = lineGreen;
}

名前は lineGreen のままでも動きます。

分かりやすくしたい場合は、後で primaryBlue などに変えてもOKです。

初心者のうちは、名前はそのままで、色だけ変える方が安全です。

Step 7：色コードの見方

Flutterの色は、この形で書きます。

Color(0xFF2F80ED)

大事なのは後ろの6文字です。

2F80ED

これは青色です。

最初の 0xFF は透明度です。

初心者のうちは、消さずにそのまま使います。

0xFF + 色コード

よく使いやすい色セット

LINE風グリーン

static const lineGreen = Color(0xFF06C755);
static const lineGreenDark = Color(0xFF00B900);

医療系ブルー

static const lineGreen = Color(0xFF2F80ED);
static const lineGreenDark = Color(0xFF1C5FB8);

落ち着いたネイビー

static const lineGreen = Color(0xFF1F3A5F);
static const lineGreenDark = Color(0xFF102A43);

やさしいティール

static const lineGreen = Color(0xFF14B8A6);
static const lineGreenDark = Color(0xFF0F766E);

まずは1つ選んで入れ替えればOKです。

3. 権限の名前を変更する

Step 8：teamRoleLabelを探す

main.dart の中で、次を検索します。

teamRoleLabel

このような関数があります。

String teamRoleLabel(TeamRole role) {
  switch (role) {
    case TeamRole.owner:
      return 'オーナー';
    case TeamRole.admin:
      return '管理者';
    case TeamRole.member:
      return 'メンバー';
    case TeamRole.viewer:
      return '閲覧者';
  }
}

Step 9：表示名だけ変える

たとえば、医療機関向けにしたい場合です。

String teamRoleLabel(TeamRole role) {
  switch (role) {
    case TeamRole.owner:
      return '責任者';
    case TeamRole.admin:
      return '管理担当';
    case TeamRole.member:
      return '実務担当';
    case TeamRole.viewer:
      return '確認のみ';
  }
}

Firestoreに保存する値は変えません。

owner
admin
member
viewer

画面表示だけを変えます。

責任者
管理担当
実務担当
確認のみ

これが安全です。

Step 10：保存値は英語のままにする

初心者のうちは、Firestoreに保存する値は変えないでください。

owner
admin
member
viewer

このままにします。

悪い例です。

role: 管理者
role: 担当者
role: 確認者

良い例です。

role: admin
role: member
role: viewer

理由は、コードの判定で使っているからです。

role == TeamRole.admin

保存値まで変えると、権限判定が壊れやすくなります。

4. 権限説明を変更する

Step 11：roleDescriptionを探す

main.dart の中で、次を検索します。

roleDescription

このような関数があります。

String roleDescription(String role) {
  switch (role) {
    case 'admin':
      return 'タスク作成・編集・削除、メンバー管理ができます。';
    case 'viewer':
      return 'タスクやメンバーを確認できます。作成・編集・削除はできません。';
    case 'member':
    default:
      return 'タスクの作成・編集ができます。削除やメンバー管理はできません。';
  }
}

Step 12：説明文を自分用に変える

たとえば、Web制作チーム向けならこうです。

String roleDescription(String role) {
  switch (role) {
    case 'admin':
      return '案件管理、メンバー管理、タスク削除ができます。';
    case 'viewer':
      return '進捗確認のみできます。編集はできません。';
    case 'member':
    default:
      return '担当タスクの作成・編集ができます。';
  }
}

医療機関向けならこうです。

String roleDescription(String role) {
  switch (role) {
    case 'admin':
      return '院内タスクの管理、メンバー管理、タスク削除ができます。';
    case 'viewer':
      return '院内タスクの確認のみできます。編集はできません。';
    case 'member':
    default:
      return '院内タスクの作成・編集ができます。';
  }
}

説明文を短くすると、読むのが苦手な人にも分かりやすいです。

5. タスクのステータス名を変更する

Step 13：statusLabelを探す

main.dart の中で、次を検索します。

statusLabel

このような関数があります。

String statusLabel(String value) {
  switch (value) {
    case 'doing':
      return '進行中';
    case 'done':
      return '完了';
    case 'todo':
    default:
      return '未対応';
  }
}

Step 14：表示名だけ変える

たとえば、制作管理向けならこうです。

String statusLabel(String value) {
  switch (value) {
    case 'doing':
      return '作業中';
    case 'done':
      return '完了';
    case 'todo':
    default:
      return '未着手';
  }
}

医療・院内業務向けならこうです。

String statusLabel(String value) {
  switch (value) {
    case 'doing':
      return '対応中';
    case 'done':
      return '対応済み';
    case 'todo':
    default:
      return '未対応';
  }
}

Firestoreに保存する値は変えません。

todo
doing
done

画面表示だけを変えます。

6. 優先度の表示名を変更する

Step 15：priorityLabelを探す

main.dart の中で、次を検索します。

priorityLabel

このような関数があります。

String priorityLabel(String value) {
  switch (value) {
    case 'high':
      return '優先度：高';
    case 'low':
      return '優先度：低';
    case 'normal':
    default:
      return '優先度：中';
  }
}

Step 16：表示名だけ変える

たとえば、短くしたい場合です。

String priorityLabel(String value) {
  switch (value) {
    case 'high':
      return '高';
    case 'low':
      return '低';
    case 'normal':
    default:
      return '中';
  }
}

分かりやすくしたい場合です。

String priorityLabel(String value) {
  switch (value) {
    case 'high':
      return '急ぎ';
    case 'low':
      return '余裕あり';
    case 'normal':
    default:
      return '通常';
  }
}

Firestoreに保存する値は変えません。

low
normal
high

画面表示だけを変えます。

7. タスク項目を変更する

Step 17：今のタスク項目を確認する

今のタスクには、主に次の項目があります。

title
description
assigneeEmail
assigneeId
priority
status
createdBy
createdAt
updatedAt

画面入力では、主にこの3つを使っています。

タイトル
説明
担当者メール

Step 18：ラベル名だけ変える

初心者におすすめなのは、まずラベル名だけ変える方法です。

showCreateTaskSheet() や showEditTaskSheet() の中で、次を探します。

AppTextField(
  controller: titleController,
  label: 'タスク名',
),

たとえば、Web制作向けならこうします。

AppTextField(
  controller: titleController,
  label: '作業名',
),

医療機関向けならこうです。

AppTextField(
  controller: titleController,
  label: '院内タスク名',
),

Step 19：説明欄の名前を変える

次を探します。

AppTextField(
  controller: descriptionController,
  label: '説明',
  maxLines: 3,
),

Web制作向けならこうです。

AppTextField(
  controller: descriptionController,
  label: '作業内容',
  maxLines: 3,
),

医療機関向けならこうです。

AppTextField(
  controller: descriptionController,
  label: '対応内容',
  maxLines: 3,
),

Step 20：担当者メールの名前を変える

次を探します。

AppTextField(
  controller: assigneeEmailController,
  label: '担当者メール',
  keyboardType: TextInputType.emailAddress,
),

分かりやすくするなら、こうです。

AppTextField(
  controller: assigneeEmailController,
  label: '担当者のメールアドレス',
  keyboardType: TextInputType.emailAddress,
),

または、

AppTextField(
  controller: assigneeEmailController,
  label: '連絡先メール',
  keyboardType: TextInputType.emailAddress,
),

8. タスク項目を増やしたい場合

Step 21：初心者はまず「ラベル変更」だけでOK

タスク項目を増やすには、次の変更が必要です。

Controllerを追加
入力欄を追加
Firestore保存項目を追加
編集画面にも追加
TaskCard表示にも追加

少し難しくなります。

そのため、初心者はまず次だけでOKです。

タイトルの名前を変える
説明の名前を変える
担当者メールの名前を変える
ステータス名を変える
優先度名を変える

これだけでも、かなり自分用になります。

Step 22：どうしても項目を増やす例

たとえば「期限」を追加したい場合です。

まず、Controllerを追加します。

final dueDateController = TextEditingController();

dispose() にも追加します。

dueDateController.dispose();

入力欄を追加します。

AppTextField(
  controller: dueDateController,
  label: '期限',
),

保存時に追加します。

'dueDate': dueDateController.text.trim(),

表示するときは、Firestoreから読みます。

final dueDate = (data['dueDate'] ?? '').toString();

ただし、期限を本格的に扱うなら Timestamp にする方がよいです。

このページでは、まず文字として保存するところまででOKです。

9. 自分用カスタマイズ例

Web制作チーム向け

アプリ名：Web Progress Board
色：ネイビー
タスク名：作業名
説明：作業内容
担当者メール：担当者メール
ステータス：未着手 / 作業中 / 完了
優先度：低 / 中 / 高

権限名です。

owner：責任者
admin：案件管理者
member：制作担当
viewer：確認者

医療機関向け

アプリ名：Clinic Task Board
色：医療系ブルー
タスク名：院内タスク名
説明：対応内容
担当者メール：担当者メール
ステータス：未対応 / 対応中 / 対応済み
優先度：通常 / 急ぎ / 余裕あり

権限名です。

owner：責任者
admin：管理担当
member：実務担当
viewer：確認のみ

学校・クラス向け

アプリ名：Class Task Board
色：やさしいティール
タスク名：やること
説明：内容
担当者メール：担当者メール
ステータス：これから / やっている / 終わった
優先度：あとで / ふつう / 急ぎ

権限名です。

owner：先生
admin：リーダー
member：メンバー
viewer：見るだけ

10. カスタマイズで壊しやすい場所

保存値は変えない

初心者が一番壊しやすいのは、Firestoreに保存する値を変えてしまうことです。

変えない方がよい値はこちらです。

role:
owner
admin
member
viewer

status:
todo
doing
done

priority:
low
normal
high

変えてよいのは、画面に出す日本語です。

表示名だけ変える

悪い例

Firestoreに日本語で保存してしまう例です。

'role': '管理者',
'status': '対応中',
'priority': '急ぎ',

このようにすると、判定が壊れることがあります。

良い例

Firestoreには英語で保存します。

'role': 'admin',
'status': 'doing',
'priority': 'high',

画面表示だけ日本語にします。

return '管理者';
return '対応中';
return '急ぎ';

よくあるエラーと直し方

エラー	原因	直し方
色を変えたのに反映されない	保存していない	`command + S`
アプリ名が変わらない	別の場所にも文字がある	`WorkBoard` で検索
権限が効かなくなった	保存値を日本語にした	`admin/member/viewer` に戻す
ステータス表示がおかしい	`todo/doing/done` 以外を保存した	保存値を英語に戻す
優先度表示がおかしい	`low/normal/high` 以外を保存した	保存値を英語に戻す
期限項目が保存されない	`.set()` や `.update()` に入れていない	保存処理に項目を追加
編集画面に出ない	編集側に入力欄がない	`showEditTaskSheet()` にも追加

保存して確認する

Step 23：保存する

main.dart を保存します。

Macの場合：

command + S

Windowsの場合：

Ctrl + S

Step 24：アプリを実行する

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

flutter run

すでに起動中なら、ターミナルで r を押します。

大きく変えた場合は、R を押します。

Step 25：画面で確認する

次を確認します。

アプリ名が変わった
色が変わった
権限名が変わった
権限説明が変わった
ステータス名が変わった
優先度名が変わった
タスク入力欄の名前が変わった

Firestoreの保存値は、英語のままか確認します。

role: admin
status: doing
priority: high

最短作業まとめ

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

1. アプリ名を変える

title: 'Clinic Task Board',

2. 色を変える

static const lineGreen = Color(0xFF2F80ED);
static const lineGreenDark = Color(0xFF1C5FB8);

3. 権限表示を変える

String teamRoleLabel(TeamRole role) {
  switch (role) {
    case TeamRole.owner:
      return '責任者';
    case TeamRole.admin:
      return '管理担当';
    case TeamRole.member:
      return '実務担当';
    case TeamRole.viewer:
      return '確認のみ';
  }
}

4. ステータス表示を変える

String statusLabel(String value) {
  switch (value) {
    case 'doing':
      return '対応中';
    case 'done':
      return '対応済み';
    case 'todo':
    default:
      return '未対応';
  }
}

5. 保存値は変えない

role: owner / admin / member / viewer
status: todo / doing / done
priority: low / normal / high

チェックリスト

□ main.dartを開いた
□ MaterialAppのtitleを変えた
□ 画面内のアプリ名も検索して変えた
□ AppColorsを探した
□ メインカラーを変えた
□ teamRoleLabelを変えた
□ roleDescriptionを変えた
□ statusLabelを変えた
□ priorityLabelを変えた
□ タスク入力欄のラベルを変えた
□ 保存値は英語のままにした
□ 保存した
□ flutter runで確認した
□ Firestoreの保存値を確認した

ミニ確認問題

Q1. アプリ名はどこで変えますか？

回答

MaterialApp の title を変えます。

title: 'Clinic Task Board',

画面上の文字は、別で検索して変更します。

Q2. 色はどこで変えますか？

回答

AppColors で変えます。

class AppColors {
  ...
}

Q3. Firestoreに保存するroleを日本語にしてもよいですか？

回答

初心者のうちは、しない方がよいです。

admin
member
viewer

のように、英語のまま保存します。

Q4. ステータスの保存値は何ですか？

回答

次の3つです。

todo
doing
done

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

回答

必要ありません。

Flutterのコードを少し変更するだけです。

このページのまとめ

カスタマイズは、まず表示名と色から変える。
アプリ名は MaterialApp の title と画面内テキストを変える。
色は AppColors を変える。
権限名は teamRoleLabel() を変える。
権限説明は roleDescription() を変える。
ステータス名は statusLabel() を変える。
優先度名は priorityLabel() を変える。
初心者は、Firestoreの保存値は変えない。
保存値は英語、表示は日本語にする。
このページではnpmや環境変数は不要。

次のページでやること

次のページでは、アプリを完成版として確認します。

新規登録、ログイン、チーム作成、タスク作成、メンバー追加、権限変更まで、最初から最後まで通して動作確認します。

このページでやること

このページでは、作ってきたLINE風チームタスク管理アプリを、自分用にカスタマイズします。

変更する場所は、主にこの4つです。

1. アプリ名
2. 色
3. 権限の名前・説明
4. タスク項目

コードを大きく作り直すのではなく、必要な場所だけを変えます。

今日のゴール

次のように、自分の目的に合わせたアプリにできます。

WorkBoard Firebase
↓
Clinic Task Board

LINE風グリーン
↓
医療系ブルー

admin / member / viewer
↓
管理者 / 担当者 / 確認者

タスク項目
↓
患者導線・SNS投稿・Web修正などに合わせる

npmや環境変数は必要？

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

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

Flutterのコードを少し変更するだけです。

main.dartを開く
↓
アプリ名を変える
↓
AppColorsを変える
↓
権限ラベルを変える
↓
タスク項目を変える
↓
保存して確認

Step 1：main.dartを開く

次のファイルを開きます。

lib/main.dart

ターミナルから開く場合はこちらです。

code lib/main.dart

1. アプリ名を変更する

Step 2：MaterialAppを探す

main.dart の中で、次を検索します。

MaterialApp

このようなコードがあります。

return MaterialApp(
  title: 'WorkBoard Firebase',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: AppColors.lineGreen,
    ),
  ),
  home: const AuthGate(),
);

Step 3：titleを変更する

アプリ名を変えたい場合は、title を変更します。

return MaterialApp(
  title: 'Clinic Task Board',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: AppColors.lineGreen,
    ),
  ),
  home: const AuthGate(),
);

変更するのはここだけです。

title: 'Clinic Task Board',

Step 4：画面上の名前も変える

画面に表示しているアプリ名がある場合は、文字列を検索します。

WorkBoard

VS Codeで検索します。

command + F

出てきた文字を、自分のアプリ名に変更します。

例です。

const Text('WorkBoard')

これを変更します。

const Text('Clinic Task Board')

2. 色を変更する

Step 5：AppColorsを探す

main.dart の中で、次を検索します。

class 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;
}

Step 6：メインカラーを変える

LINE風グリーンを、医療系ブルーに変える例です。

class AppColors {
  static const bg = Color(0xFFF5F8FB);
  static const chatBg = Color(0xFFEAF2F8);
  static const card = Colors.white;

  static const lineGreen = Color(0xFF2F80ED);
  static const lineGreenDark = Color(0xFF1C5FB8);

  static const text = Color(0xFF111827);
  static const subText = Color(0xFF6B7280);
  static const border = Color(0xFFE5E7EB);

  static const danger = Color(0xFFE53935);
  static const success = Color(0xFF2F80ED);
  static const warning = Color(0xFFFFB300);

  static const primary = lineGreen;
}

名前は lineGreen のままでも動きます。

分かりやすくしたい場合は、後で primaryBlue などに変えてもOKです。

初心者のうちは、名前はそのままで、色だけ変える方が安全です。

Step 7：色コードの見方

Flutterの色は、この形で書きます。

Color(0xFF2F80ED)

大事なのは後ろの6文字です。

2F80ED

これは青色です。

最初の 0xFF は透明度です。

初心者のうちは、消さずにそのまま使います。

0xFF + 色コード

よく使いやすい色セット

LINE風グリーン

static const lineGreen = Color(0xFF06C755);
static const lineGreenDark = Color(0xFF00B900);

医療系ブルー

static const lineGreen = Color(0xFF2F80ED);
static const lineGreenDark = Color(0xFF1C5FB8);

落ち着いたネイビー

static const lineGreen = Color(0xFF1F3A5F);
static const lineGreenDark = Color(0xFF102A43);

やさしいティール

static const lineGreen = Color(0xFF14B8A6);
static const lineGreenDark = Color(0xFF0F766E);

まずは1つ選んで入れ替えればOKです。

3. 権限の名前を変更する

Step 8：teamRoleLabelを探す

main.dart の中で、次を検索します。

teamRoleLabel

このような関数があります。

String teamRoleLabel(TeamRole role) {
  switch (role) {
    case TeamRole.owner:
      return 'オーナー';
    case TeamRole.admin:
      return '管理者';
    case TeamRole.member:
      return 'メンバー';
    case TeamRole.viewer:
      return '閲覧者';
  }
}

Step 9：表示名だけ変える

たとえば、医療機関向けにしたい場合です。

String teamRoleLabel(TeamRole role) {
  switch (role) {
    case TeamRole.owner:
      return '責任者';
    case TeamRole.admin:
      return '管理担当';
    case TeamRole.member:
      return '実務担当';
    case TeamRole.viewer:
      return '確認のみ';
  }
}

Firestoreに保存する値は変えません。

owner
admin
member
viewer

画面表示だけを変えます。

責任者
管理担当
実務担当
確認のみ

これが安全です。

Step 10：保存値は英語のままにする

初心者のうちは、Firestoreに保存する値は変えないでください。

owner
admin
member
viewer

このままにします。

悪い例です。

role: 管理者
role: 担当者
role: 確認者

良い例です。

role: admin
role: member
role: viewer

理由は、コードの判定で使っているからです。

role == TeamRole.admin

保存値まで変えると、権限判定が壊れやすくなります。

4. 権限説明を変更する

Step 11：roleDescriptionを探す

main.dart の中で、次を検索します。

roleDescription

このような関数があります。

String roleDescription(String role) {
  switch (role) {
    case 'admin':
      return 'タスク作成・編集・削除、メンバー管理ができます。';
    case 'viewer':
      return 'タスクやメンバーを確認できます。作成・編集・削除はできません。';
    case 'member':
    default:
      return 'タスクの作成・編集ができます。削除やメンバー管理はできません。';
  }
}

Step 12：説明文を自分用に変える

たとえば、Web制作チーム向けならこうです。

String roleDescription(String role) {
  switch (role) {
    case 'admin':
      return '案件管理、メンバー管理、タスク削除ができます。';
    case 'viewer':
      return '進捗確認のみできます。編集はできません。';
    case 'member':
    default:
      return '担当タスクの作成・編集ができます。';
  }
}

医療機関向けならこうです。

String roleDescription(String role) {
  switch (role) {
    case 'admin':
      return '院内タスクの管理、メンバー管理、タスク削除ができます。';
    case 'viewer':
      return '院内タスクの確認のみできます。編集はできません。';
    case 'member':
    default:
      return '院内タスクの作成・編集ができます。';
  }
}

説明文を短くすると、読むのが苦手な人にも分かりやすいです。

5. タスクのステータス名を変更する

Step 13：statusLabelを探す

main.dart の中で、次を検索します。

statusLabel

このような関数があります。

String statusLabel(String value) {
  switch (value) {
    case 'doing':
      return '進行中';
    case 'done':
      return '完了';
    case 'todo':
    default:
      return '未対応';
  }
}

Step 14：表示名だけ変える

たとえば、制作管理向けならこうです。

String statusLabel(String value) {
  switch (value) {
    case 'doing':
      return '作業中';
    case 'done':
      return '完了';
    case 'todo':
    default:
      return '未着手';
  }
}

医療・院内業務向けならこうです。

String statusLabel(String value) {
  switch (value) {
    case 'doing':
      return '対応中';
    case 'done':
      return '対応済み';
    case 'todo':
    default:
      return '未対応';
  }
}

Firestoreに保存する値は変えません。

todo
doing
done

画面表示だけを変えます。

6. 優先度の表示名を変更する

Step 15：priorityLabelを探す

main.dart の中で、次を検索します。

priorityLabel

このような関数があります。

String priorityLabel(String value) {
  switch (value) {
    case 'high':
      return '優先度：高';
    case 'low':
      return '優先度：低';
    case 'normal':
    default:
      return '優先度：中';
  }
}

Step 16：表示名だけ変える

たとえば、短くしたい場合です。

String priorityLabel(String value) {
  switch (value) {
    case 'high':
      return '高';
    case 'low':
      return '低';
    case 'normal':
    default:
      return '中';
  }
}

分かりやすくしたい場合です。

String priorityLabel(String value) {
  switch (value) {
    case 'high':
      return '急ぎ';
    case 'low':
      return '余裕あり';
    case 'normal':
    default:
      return '通常';
  }
}

Firestoreに保存する値は変えません。

low
normal
high

画面表示だけを変えます。

7. タスク項目を変更する

Step 17：今のタスク項目を確認する

今のタスクには、主に次の項目があります。

title
description
assigneeEmail
assigneeId
priority
status
createdBy
createdAt
updatedAt

画面入力では、主にこの3つを使っています。

タイトル
説明
担当者メール

Step 18：ラベル名だけ変える

初心者におすすめなのは、まずラベル名だけ変える方法です。

showCreateTaskSheet() や showEditTaskSheet() の中で、次を探します。

AppTextField(
  controller: titleController,
  label: 'タスク名',
),

たとえば、Web制作向けならこうします。

AppTextField(
  controller: titleController,
  label: '作業名',
),

医療機関向けならこうです。

AppTextField(
  controller: titleController,
  label: '院内タスク名',
),

Step 19：説明欄の名前を変える

次を探します。

AppTextField(
  controller: descriptionController,
  label: '説明',
  maxLines: 3,
),

Web制作向けならこうです。

AppTextField(
  controller: descriptionController,
  label: '作業内容',
  maxLines: 3,
),

医療機関向けならこうです。

AppTextField(
  controller: descriptionController,
  label: '対応内容',
  maxLines: 3,
),

Step 20：担当者メールの名前を変える

次を探します。

AppTextField(
  controller: assigneeEmailController,
  label: '担当者メール',
  keyboardType: TextInputType.emailAddress,
),

分かりやすくするなら、こうです。

AppTextField(
  controller: assigneeEmailController,
  label: '担当者のメールアドレス',
  keyboardType: TextInputType.emailAddress,
),

または、

AppTextField(
  controller: assigneeEmailController,
  label: '連絡先メール',
  keyboardType: TextInputType.emailAddress,
),

8. タスク項目を増やしたい場合

Step 21：初心者はまず「ラベル変更」だけでOK

タスク項目を増やすには、次の変更が必要です。

Controllerを追加
入力欄を追加
Firestore保存項目を追加
編集画面にも追加
TaskCard表示にも追加

少し難しくなります。

そのため、初心者はまず次だけでOKです。

タイトルの名前を変える
説明の名前を変える
担当者メールの名前を変える
ステータス名を変える
優先度名を変える

これだけでも、かなり自分用になります。

Step 22：どうしても項目を増やす例

たとえば「期限」を追加したい場合です。

まず、Controllerを追加します。

final dueDateController = TextEditingController();

dispose() にも追加します。

dueDateController.dispose();

入力欄を追加します。

AppTextField(
  controller: dueDateController,
  label: '期限',
),

保存時に追加します。

'dueDate': dueDateController.text.trim(),

表示するときは、Firestoreから読みます。

final dueDate = (data['dueDate'] ?? '').toString();

ただし、期限を本格的に扱うなら Timestamp にする方がよいです。

このページでは、まず文字として保存するところまででOKです。

9. 自分用カスタマイズ例

Web制作チーム向け

アプリ名：Web Progress Board
色：ネイビー
タスク名：作業名
説明：作業内容
担当者メール：担当者メール
ステータス：未着手 / 作業中 / 完了
優先度：低 / 中 / 高

権限名です。

owner：責任者
admin：案件管理者
member：制作担当
viewer：確認者

医療機関向け

アプリ名：Clinic Task Board
色：医療系ブルー
タスク名：院内タスク名
説明：対応内容
担当者メール：担当者メール
ステータス：未対応 / 対応中 / 対応済み
優先度：通常 / 急ぎ / 余裕あり

権限名です。

owner：責任者
admin：管理担当
member：実務担当
viewer：確認のみ

学校・クラス向け

アプリ名：Class Task Board
色：やさしいティール
タスク名：やること
説明：内容
担当者メール：担当者メール
ステータス：これから / やっている / 終わった
優先度：あとで / ふつう / 急ぎ

権限名です。

owner：先生
admin：リーダー
member：メンバー
viewer：見るだけ

10. カスタマイズで壊しやすい場所

保存値は変えない

初心者が一番壊しやすいのは、Firestoreに保存する値を変えてしまうことです。

変えない方がよい値はこちらです。

role:
owner
admin
member
viewer

status:
todo
doing
done

priority:
low
normal
high

変えてよいのは、画面に出す日本語です。

表示名だけ変える

悪い例

Firestoreに日本語で保存してしまう例です。

'role': '管理者',
'status': '対応中',
'priority': '急ぎ',

このようにすると、判定が壊れることがあります。

良い例

Firestoreには英語で保存します。

'role': 'admin',
'status': 'doing',
'priority': 'high',

画面表示だけ日本語にします。

return '管理者';
return '対応中';
return '急ぎ';

よくあるエラーと直し方

エラー	原因	直し方
色を変えたのに反映されない	保存していない	`command + S`
アプリ名が変わらない	別の場所にも文字がある	`WorkBoard` で検索
権限が効かなくなった	保存値を日本語にした	`admin/member/viewer` に戻す
ステータス表示がおかしい	`todo/doing/done` 以外を保存した	保存値を英語に戻す
優先度表示がおかしい	`low/normal/high` 以外を保存した	保存値を英語に戻す
期限項目が保存されない	`.set()` や `.update()` に入れていない	保存処理に項目を追加
編集画面に出ない	編集側に入力欄がない	`showEditTaskSheet()` にも追加

保存して確認する

Step 23：保存する

main.dart を保存します。

Macの場合：

command + S

Windowsの場合：

Ctrl + S

Step 24：アプリを実行する

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

flutter run

すでに起動中なら、ターミナルで r を押します。

大きく変えた場合は、R を押します。

Step 25：画面で確認する

次を確認します。

アプリ名が変わった
色が変わった
権限名が変わった
権限説明が変わった
ステータス名が変わった
優先度名が変わった
タスク入力欄の名前が変わった

Firestoreの保存値は、英語のままか確認します。

role: admin
status: doing
priority: high

最短作業まとめ

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

1. アプリ名を変える

title: 'Clinic Task Board',

2. 色を変える

static const lineGreen = Color(0xFF2F80ED);
static const lineGreenDark = Color(0xFF1C5FB8);

3. 権限表示を変える

String teamRoleLabel(TeamRole role) {
  switch (role) {
    case TeamRole.owner:
      return '責任者';
    case TeamRole.admin:
      return '管理担当';
    case TeamRole.member:
      return '実務担当';
    case TeamRole.viewer:
      return '確認のみ';
  }
}

4. ステータス表示を変える

String statusLabel(String value) {
  switch (value) {
    case 'doing':
      return '対応中';
    case 'done':
      return '対応済み';
    case 'todo':
    default:
      return '未対応';
  }
}

5. 保存値は変えない

role: owner / admin / member / viewer
status: todo / doing / done
priority: low / normal / high

チェックリスト

□ main.dartを開いた
□ MaterialAppのtitleを変えた
□ 画面内のアプリ名も検索して変えた
□ AppColorsを探した
□ メインカラーを変えた
□ teamRoleLabelを変えた
□ roleDescriptionを変えた
□ statusLabelを変えた
□ priorityLabelを変えた
□ タスク入力欄のラベルを変えた
□ 保存値は英語のままにした
□ 保存した
□ flutter runで確認した
□ Firestoreの保存値を確認した