![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
- タイマー(Timer)の基本
- 一定間隔で画面の表示を変更する
開発環境
- Dart 3.0.0
- Flutter 3.10.0
目次
タイマー(Timer)の基本
概要
タイマーは、指定した時間が経過した後に、一度だけ、または繰り返し特定の処理を実行するために使います。Flutterでタイマーを使用するには、dart:async
パッケージが提供するTimer
クラスを利用します。
タイマーの作成方法
まずは、単純な一度きりのタイマーの作成方法から見ていきましょう。
サンプルコード
import 'dart:async';
void main() {
// 動作させたい時間を5秒後に設定
Timer(Duration(seconds: 5), () {
// 5秒後に一度だけタイマー発動!とコンソールに出力する
print('タイマー発動!');
});
}
サンプルコードの解説
- 1行目では、タイマー機能を使うために
dart:async
パッケージをインポートしています。 - 5行目で、
Timer
クラスのコンストラクタに、動作させたい時間(Duration
)と、時間が経過した後に実行される関数を渡しています。
繰り返し実行するタイマー
次に、一定間隔で繰り返し実行されるタイマーの作成方法です。
サンプルコード
import 'dart:async';
void main() {
// 1秒ごとに繰り返す設定
Timer.periodic(Duration(seconds: 1), (Timer timer) {
// 1秒ごとに繰り返し1秒経過とコンソールに出力させる
print('1秒経過');
});
}
サンプルコードの解説
- 1行目で、
dart:async
パッケージをインポートしています。 - 5行目で、
Timer.periodic
メソッドを使用し、第一引数に繰り返しの間隔をDuration
で指定し、第二引数に繰り返し実行される関数を渡しています。
一定間隔で画面の表示を変更する
概要
Flutterで画面の表示を一定間隔で更新するには、StatefulWidget
を使用して、タイマーが発火するたびにsetState
を呼び出します。
サンプルコード
import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TimerExample(),
);
}
}
class TimerExample extends StatefulWidget {
@override
_TimerExampleState createState() => _TimerExampleState();
}
class _TimerExampleState extends State<TimerExample> {
int _counter = 0;
Timer? _timer;
@override
void initState() {
super.initState();
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
setState(() {
_counter++;
});
});
}
@override
void dispose() {
_timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('タイマーでカウント'),
),
body: Center(
child: Text('カウンター: $_counter', style: TextStyle(fontSize: 24)),
),
);
}
}
サンプルコードの解説
_TimerExampleState
クラスのinitState
メソッドでタイマーを開始し、1秒ごとにカウンターを増やしています。setState
を使ってカウンターの値が変わるたびにウィジェットを再ビルドし、新しい値を画面に表示しています。dispose
メソッドでタイマーをキャンセルし、リソースを適切に解放しています。
動作確認
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
それでは、動作を確認してみましょ〜
![【Flutter】タイマー(Timer)の基本から一定間隔で画面の表示を変更する方法](https://memoriainc.com/wp-content/uploads/2024/03/【Flutter】タイマーTimerの基本から一定間隔で画面の表示を変更する方法.gif)
![【Flutter】タイマー(Timer)の基本から一定間隔で画面の表示を変更する方法](https://memoriainc.com/wp-content/uploads/2024/03/【Flutter】タイマーTimerの基本から一定間隔で画面の表示を変更する方法.gif)
Timerを使用した実践的な処理についてご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://memoriainc.com/wp-content/uploads/2024/03/【Flutter】ボタン長押し処理の基本から長押し処理時の状態管理までの完全ガイド!-300x169.jpg)
![](https://memoriainc.com/wp-content/uploads/2024/03/【Flutter】ボタン長押し処理の基本から長押し処理時の状態管理までの完全ガイド!-300x169.jpg)
![](https://memoriainc.com/wp-content/uploads/2024/03/【Flutter】ボタン長押し処理の基本から長押し処理時の状態管理までの完全ガイド!-300x169.jpg)
【Flutter】ボタン長押し処理の基本から長押し処理時の状態管理までの完全ガイド!
こんばんは〜弊社ブログに辿り着いていただきありがとうございます!株式会社メモリアインクのいちのです この記事を読んでわかること ボタン長押し処理の基本 ボタンを…
まとめ
いかがでしたでしょうか?今回は、タイマー(Timer)の基本から一定間隔で画面の表示を変更する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント
コメント一覧 (1件)
[…] […]