ポモドーロタイマーサンプルアプリケーションを作成 (Flutter)

Posted at 2026-02-23

はじめに

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

ポモドーロタイマー サンプルアプリケーションを作成 (Flutter)