Timer の使い方

ここでは Flutter でタイマーを使う方法を説明します。

タイマーは、例えば 5 秒後に _foo というファンクションを呼び出すとか、 1 分おきに _bar というファンクションを呼び出すという動きを実現したい時に使えます。

Flutter では Dart ライブラリに含まれる dart:async ライブラリで定義される Timer クラスを利用することができます。

ここでは 1 秒置きにファンクションを呼び出して、時刻を表示する「時計」ウィジェットを作りましょう。

さっそく Clock (時計) ウィジェット clock.dart は次のようになります。

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';

class Clock extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ClockState();
  }
}

class _ClockState extends State<Clock> {
  String _time = '';

  @override
  void initState() {
    Timer.periodic(
      Duration(seconds: 1),
      _onTimer,
    );
    super.initState();
  }

  void _onTimer(Timer timer) {
    var now = DateTime.now();
    var formatter = DateFormat('HH:mm:ss');
    var formattedTime = formatter.format(now);
    setState(() => _time = formattedTime);
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      _time,
      style: TextStyle(
        fontSize: 60.0,
        fontFamily: 'IBMPlexMono',
      ),
    );
  }
}

まずは必要なパッケージを取り込みます。

前述の通り、Timer は dart:async に含まれるので、これをインポートします。

また、時刻をフォーマットするので、pubspec.yaml で dependencies の下に intl: ^0.15.8 を取り込み、 さらにコードで package:intl/intl.dart をインポートします。

ここではウィジェットをステートフルウィジェットとし、時刻を保持する _time プロパティを作ります。 この文字列を 1 秒置きにタイマーで更新することで、時計にします。

Timer の設定

タイマーの設定は initState で行なっています。

1 回呼び出して終了する場合、例えば 10 秒後に 1 度 _onTimer という名前のファンクションを呼ぶなら次のようにします。

Timer(const Duration(seconds: 10), _onTimer);

void _onTimer() {
  ...
}

決めた時間で繰り返し呼び出す場合、例えば 10 秒置きに繰り返し _onTimer というファンクションを呼ぶには Timer.periodic を使って次のようにします。

Timer.periodic(const Duration(seconds: 10), _onTimer);

void _onTimer(Timer timer) {
  ...
}

コールバックされるファンクションに渡される Timer オブジェクトを使って、タイマーを止める (cancel()) ことなどができます。

その他、単にただちに非同期で処理を実行したい場合は Timer.run にファンクションを渡すだけです。

以上、Timer はこのような使い方ができるのですが、ここでは時計を実装するために 1 秒おきに _onTimer というファンクションをコールバックし続けるので、 Timer.periodic メソッドに Duration を 1 秒とファンクションを渡します。

その他

その他、時刻の出力は等幅フォントを使いました。今回は Google Fonts から "IBMPlexMono" をダウンロードしてきて使いました。

main.dart は次の通り。

アプリケーションのメイン部分です。上で作った Clock ウィジェットを取り込むだけです。

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

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        home: MyApp(),
      ),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timer Test'),
      ),
      body: Center(
        child: Clock(),
      ),
    );
  }
}

以上で Timer の使い方を説明しました。