📘

flutterで超シンプルなストップウォッチ

2023/06/11に公開

flutterアプリ作成で時間だけ取得するストップウォッチ的なのが欲しかったので
公式サイトを参考にしながらriverpodバージョンに変更してみました。
備忘録として残します。
誰かの参考になれば幸いです。

注意事項

  • 筆者はflutter初心者なのでコードがお粗末です
  • ストップウォッチといっても計測時間をリアルタイムで表示するわけではないです(結果のみをテキスト表示します)

完成イメージ

ConsumerWidgetだけ使います。
StatefulWidgetは使いません。

パッケージ追加

flutter pub add flutter_riverpod

コード全文

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

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

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);

  
  Widget build(BuildContext context, WidgetRef ref) {
    final StopWatchModel stopWatchModel = ref.watch(stopwatchProvider);
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                onPressed: () {
                  stopWatchModel.sp.reset(); // ストップウォッチリセット
                  stopWatchModel.sp.start(); // 計測開始
                  print(stopWatchModel.sp.isRunning); // ストップウォッチが動いでいればtrue
                },
                child: const Text('開始')),
            ElevatedButton(
                onPressed: () {
                  stopWatchModel.sp.stop(); // ストップ
                  print(stopWatchModel.sp.isRunning); // 止まったか確認falseなら停止
                  print(stopWatchModel.sp.elapsedMilliseconds / 1000.0);
                  stopWatchModel.timeChange(); // textに表示する文字を更新
                  //停止時間出力 秒

                },
                child: const Text('停止')),
            Text(stopWatchModel.time.toString())  //計測時間
          ],
        ),
      ),
    );
  }
}

// 以下はriverpodのモデル
final stopwatchProvider = ChangeNotifierProvider((ref) => StopWatchModel());

class StopWatchModel extends ChangeNotifier {
  final sp = Stopwatch(); // インスタンス生成
  double time = 0; // タイマー初期化
  // テキストの文字更新するための関数
  void timeChange () {
    time = sp.elapsedMilliseconds / 1000.toDouble();
    notifyListeners();
  }
}

おわりに

もしこうした方がシンプルに書けるよ!など
リアルタイムで秒数を表示する簡単な方法があれば是非、お気軽にコメントください!

Discussion