はじめに

Flutter

Flutter - Build apps for any screen

構築手順

以下を中心に参照しました。
https://docs.flutter.dev/install/quick

開発の目的

ポモドーロタイマーアプリは、今では多くのスマホアプリやiPhoneアプリが既にリリースされています。
そのため、今回の開発は車輪の再発明ではありますが、技術的な網羅性として

状態管理
タイマー処理
UI描画
データ永続化
通知
といったモバイルアプリ開発の基本要素をひと通り経験でき、これら機能が連携する設計の手法を学ぶのに有用なテーマと考えて取り組むこととしました。

実装技術要素

状態管理とライフサイクル
作業中・休憩中・一時停止・リセットなど複数の状態を正確に管理する設計、および4セット後の長休憩提案での状態遷移のロジック設計。
タイマー処理とバックグラウンド動作
CountDownTimer や Handler を使った正確な時間計測、アプリがバックグラウンドに回った際の処理継続。
カスタムUI描画（円形プログレス）
Canvas や CustomPainter などを使った円形プログレスバーの実装による標準ウィジェットに頼らない描画技術とアニメーションとの連携。
ローカルデータ永続化
SharedPreferences を使った完了ログの保存・読み出しにより、アプリを閉じてもデータが残る仕組みを実装。JSON のシリアライズ/デシリアライズも採用。
通知・アラーム・バイブレーション
時間終了時の音声再生やバイブレーション制御を通してOSのシステム機能と連携。通知パーミッションの取り扱いも含む。
ユーザー入力とバリデーション
タスク名の入力・変更機能にてテキスト入力の管理や入力値の検証といったフォーム処理の基本。
イベント駆動設計
Start / Pause / Reset / スキップといった複数の操作ボタンがタイマー状態と連動して有効・無効を切り替えるイベント駆動型UIの仕組み。

注記！

本稿は、モバイル向けポモドーロタイマーアプリのWindwos PCでの開発環境構築・Windows上のWebブラウザでのエミュレーションをゴールとした記事になります。
ターゲット（スマートフォン(Androidデバイス)）での動作実行は今後取り組む予定です。

ポモドーロタイマーアプリ設計・実装

1. アプリ仕様

1.1 概要

ポモドーロテクニックに基づいた時間管理アプリを作成します。
メインの機能は集中作業（25分）と休憩（5分）を自動的に切り替えるものです。
なお、集中-休憩を4セット繰り返した後に長い休憩（15〜30分）をとるように提案するようにします。

1.2 機能一覧

タイマー
25分（作業）→ 5分（休憩）の自動切り替え
セット管理
4セット完了後に15〜30分の長い休憩を提案
操作ボタン
Start / Pause / Reset
通知
時間終了時にアラーム音＋バイブレーション
円形プログレス
円形グラフで残り時間を視覚表示
セット数記録
完了したセット数をカウント・表示
タスク名変更
自由にタスク名を設定可能
ログ保存
完了ログをローカルに永続保存（SharedPreferences）
休憩スキップ
休憩中にスキップボタンで次の作業セッションへ

1.3 画面構成の概要

     タスク名（編集可） 
                         
    「集中タイム」表示   
                         
      ────────────
      円形プログレス  
                      
        24:59       
                    
      ────────────
                        
   セット: 2 / 4        
                        
  [Start] [Pause] [Reset]
  [休憩スキップ]        
                        
  ── 完了ログ一覧 ──   
  2025-01-01 タスクA 4set 
  ...

1.4 状態遷移

// [ ]内は状態、( )内はイベント

[初期状態] -> (Start) 
  ↑             ↓ 
  │        [作業中:25分](※1)
  │             ↓ 
  │          (タイマー終了 -> 通知)
  │             ↓ 
  │        [休憩中:5分] <- or -> [休憩スキップ]
  │             ↓
  │          (タイマー終了 -> 通知)
  │             ↓
  │        セット + 1
  │             ↓
  │        4セット完了？ -> (Yes) -> [長い休憩:15-30分)]
  │             ↓
  │             ↓ (No)
  │             ↓
  │        [次の作業中:25分](※1に戻る)
  │
  │
  (Reset) で [初期状態] に戻る
  (Pause) で一時停止

2. 開発環境構築（Windows）

2.1 本開発環境

Windows 11 Pro / 23H2 / 22631.6199（64bit）
16GB RAM
管理者権限

2.2 Flutter SDKのインストール

以下リンク先の構築手順を記載したサイトを参照。
[Flutter] 開発環境（SDK）構築手順 for Windows

3. プロジェクト作成とパッケージ導入

3.1 プロジェクト作成

ここではC:\dev\flutterにビルドプロジェクト（'timo'フォルダ）を作成します。

cd C:\dev\flutter
flutter create timo
cd timo

3.2 pubspec.yaml の依存パッケージ

エディタでC:\dev\flutter\timo\pubspec.yamlファイルを開いて以下の行を追加

dependencies:
  flutter:
    sdk: flutter
  audioplayers: ^6.1.0  # アラーム音再生
  vibration: ^2.0.0  # バイブレーション
  shared_preferences: ^2.3.0  # ログの永続保存
  intl: ^0.19.0  # 日付フォーマット

3.3 パッケージインストール

start ms-settings:developers

Windowsの設定ポップアップウィンドウが開く
「開発者向け」（Developer Mode）を探す
「開発者モード」をオンにする
再起動を求められたら再起動する

flutter pub get

3.4 アラーム音ファイルの配置

プロジェクトルートに assets/ フォルダを作成
アラーム音ファイル（例: alarm.mp3）を assets/ に配置
- フリー素材サイト（効果音ラボ、Pixabay等）からダウンロード
エディタでC:\dev\flutter\timo\pubspec.yamlファイルを開いて以下の行を追加

flutter:
  sdk: flutter
  assets:  // <- ここに追加
    - assets/alarm.mp3  // <- ここに追加

※今回はフリーの音声素材　https://otologic.jp/free/se/cuckoo-clock01.html
を使用させていただきました。

3.5 Android設定

timoフォルダ直下にある以下のパスのファイル
android/app/src/main/AndroidManifest.xmlをエディタで開き以下を追加:

<uses-permission android:name="android.permission.VIBRATE"/>

※ <manifest...と <application... の間の行に上記追加する。

4. ソースコード構成

dartソースコードをビルドプロジェクトフォルダの以下のパスに配置する。

// アプリのエントリーポイント
lib/main.dart
// タイマー制御・状態管理・アラーム・バイブレーション・ログ永続化の各機能（ビジネスロジック）
lib/pomodoro_timer.dart
// メイン画面UIのウィジェット
lib/screens/timer_screen.dart
// 円形タイマーのUIウィジェット
lib/widgets/circular_progress.dart
// 操作ボタン群のウィジェット
lib/widgets/control_buttons.dart
// 完了ログ一覧のウィジェット
lib/widgets/log_list.dart

dartコード間依存関係は以下。

main.dart
  └-> screens/timer_screen.dart
       ├-> pomodoro_timer.dart
       ├-> widgets/circular_progress.dart
       ├-> widgets/control_buttons.dart
       └-> widgets/log_list.dart
              └-> pomodoro_timer.dart（PomodoroLogクラスを使用）

※dartソースコードファイルは下記githubのリポジトリをご参照ください。

5. ビルドと実行

5.1 デバッグ実行

カレントパスはC:\dev\flutter\timo

# エミュレータで実行
flutter run
...

Connected devices:
Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version
10.0.22631.6199]
Chrome (web)      • chrome  • web-javascript • Google Chrome 145.0.7632.76
Edge (web)        • edge    • web-javascript • Microsoft Edge
145.0.3800.70
[1]: Windows (windows)
[2]: Chrome (chrome)
[3]: Edge (edge)
Please choose one (or "q" to quit):

上記にて2（Chrome）を選択。

Chromeブラウザが自動で開いてアプリのUIが表示されます。

Startボタンを押すと25分間の集中タイム(Concentration)タイマーが起動します。

Pauseボタンを押すとタイマーが一時停止します。

25分経過するとアラームが鳴り5分間の休憩タイマーが起動します。
画面下のCompleted Logには実行した25分間タスクの名前と終了時刻(11:30)、セット数(1セット)が表示されます。

Skipボタンを押すと5分間の休憩タイムをスキップし25分間の集中タイムが再起動します。
また、Resetボタンを押すとStand-by状態に戻ります。
画面右下ゴミ箱ボタン（Delete All Logs）を押すと新たにポップアップが表示されて、Deleteボタンを選択するとCompleted Logの内容が消去されます。

6.GitHub

以下開発環境・ソースコード一式を保存しています。