[Flutter] Timer.periodic에서 현재 시간을 표시하면 오류가 계속 발생했습니다.

Timer.periodic에서 오류



Flutter 개발의 공부중, 현재 시각의 표시를 실시한 후에 화면 천이를 하면, 에러가 계속 출력되는 현상에 조우했습니다.
꽤 곤란해 버렸으므로, 잊지 않게 대처법의 메모 쓰기를 남깁니다.
dispose내에서 제대로 캔슬을 쓰지 않으면 정지되지 않고, 뒤에서 계속 움직여 버리는 것 같습니다.

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

class TimerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TimerState();
  }
}

class _TimerState extends State<TimerPage> {
  String _nowtime = '';
  var formatter = DateFormat('yyyy/MM/dd HH:mm:ss');
  var _timer;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(
      // 定期実行する間隔の設定.
      Duration(milliseconds: 100),
      // 定期実行関数.
      _onTimer,
    );
  }

  @override
  void dispose(){
    // 破棄される時に停止する.
    _timer.cancel();
    super.dispose();
  }

  void _onTimer(Timer timer) {
    var now = DateTime.now();
    var formatterTime = formatter.format(now);
    setState(() {
      _nowtime = formatterTime;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TimerPage')),
      body: Container(
        padding: EdgeInsets.all(20),
        child: ListView(
          children: <Widget>[
            Container(
              child: Text('現在時刻:\n' + _nowtime),
            ),
          ],
        ),
      ),
    );
  }
}

미리보기



화면 천이 후에도 에러가 나오는 일은 없어졌습니다.


참고



  • Timer 사용 - Flutter를 사용한 애플리케이션 개발 - Flutter 시작
  • 좋은 웹페이지 즐겨찾기