⏰

【Flutter】Timerの使い方（超基礎編）👍

2022/03/27に公開

Flutter

Timerとは

１回または繰り返し起動するようにできているカウントダウンタイマー⏰
繰り返し起動するタイマーを使いたい場合、Timer.periodic()を使用
Timer.periodic(繰り返す間隔の時間, その間隔毎に動作させたい処理)
公式ドキュメント：Timer class

やりたいこと

1秒ごとにカウンターを1ずつ足していき、そのカウンターの数を表示するアプリを作りたいと思います😀

詳しく書くよ

まずはカウント変数を初期化する

// カウンター
int _counter = 0;

initState内でTimer.periodic()　を呼び出す
今回は「１秒毎にカウンターの数を1ずつ足していく」処理を書きました

@override
  void initState() {
    super.initState();
    // 1. Timer.periodic : 新しい繰り返しタイマーを作成します
    // 1秒ごとに _counterを1ずつ足していく
    Timer.periodic(
      // 第一引数：繰り返す間隔の時間を設定
      const Duration(seconds: 1),
      // 第二引数：その間隔ごとに動作させたい処理を書く
      (Timer timer) {
        _counter++;
        setState(() {});
      },
    );
  }

カウンターの数を表示する
_counterはint型なのでtoString()でString型に型変換している

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('タイマー'),
      ),
      body: Center(
        child: Text(_counter.toString()),
      ),
    );
  }

全体像

下記のURLから今回のアプリにおけるプロジェクトをご覧いただけます😀

main.dart

import 'dart:async';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  // カウンター
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    // 1. Timer.periodic : 新しい繰り返しタイマーを作成します
    // 1秒ごとに _counterを1ずつ足していく
    Timer.periodic(
      // 第一引数：繰り返す間隔の時間を設定
      const Duration(seconds: 1),
      // 第二引数：その間隔ごとに動作させたい処理を書く
      (Timer timer) {
        _counter++;
        setState(() {});
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('タイマー'),
      ),
      body: Center(
        child: Text(_counter.toString()),
      ),
    );
  }
}

Timerとは

やりたいこと

詳しく書くよ

全体像

Discussion