【Flutter初心者用】【コピペでOK！】カウントダウンタイマーを作ってみる

こんにちは！文系プログラマーいおです！

今回はFlutterアプリでカウントダウンタイマーを作る方法を具体的なコード例を用いてわかりやすく解説します。

サンプル画面

以下のように、アプリを実行するとカウントダウンするだけのシンプルなアプリです。

サンプルコード全文

main.dart

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'タイマーテスト'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  int _counter = 5;

  @override
  void initState() {
    super.initState();
    Timer.periodic(
      const Duration(seconds: 1),
          (Timer timer) {
        _counter--;
        setState(() {});
        if(_counter == 0){
          timer.cancel();
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
    );
  }
}

実装手順

①カウントダウン用の変数を定義
②Timer.periodic()メソッドを記述し、タイマーを作成

①カウントダウン用の変数を定義

5秒のカウントダウンを行いたいので、5で初期化する。

int _counter = 5;

②Timer.periodic()メソッドを記述し、タイマーを作成

今回はinitState()メソッド内に以下のようにタイマーを作成します。

  @override
  void initState() {
    super.initState();
    Timer.periodic(
      const Duration(seconds: 1),
          (Timer timer) {
        _counter--;
        setState(() {});
        if(_counter == 0){
          timer.cancel();
        }
      },
    );
  }

※initState()メソッド・・・何かしらを初期化したいときに記述するメソッドで、一度しか処理が実行されません。

Timer.periodic()メソッドについて

Timer.periodic()メソッドは、引数を二つ持ちます。

第一引数：処理の時間間隔
第二引数：実行する処理

今回のサンプルでいうと、以下のようになります。

第一引数

const Duration(seconds: 1)

ここでは「1second（秒）」を設定してます。

第二引数

(Timer timer) {
    _counter--;
    setState(() {});
    if(_counter == 0){
        timer.cancel();
    }
 }

ここにはタイマーで実行する処理として、以下を記述しています。

1．変数「_counter」を１引く処理

_counter--;

2．setState()の実行で画面を再描画する処理※

setState(() {});

3．「_counter」が「0」になったらタイマーをキャンセルする処理

if(_counter == 0){
    timer.cancel();
}

※setState()については下記記事にまとめていますので参考にしてみてください。

おわりに

今回は、Flutterでタイマーを用いてカウントダウン処理を実装する方法を解説しました。あなたのお役に立てていれば幸いです。

以上です、最後までお読みいただきありがとうございました！