點燈坊

失くすものさえない今が強くなるチャンスよ

Timer 實現倒數計時

Sam Xiao's Avatar 2024-11-29

Timer 可指定時間觸發，可藉此實現倒數計時。

Flutter

countdown01

  • Android 與 iOS 都成功使用 Timer 實現倒數計時

Timer

import 'dart:async';

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _Home();
}

class _Home extends State<Home> {
  var _secondsRemaining = 60;
  late Timer timer;

  @override
  void initState() {
    super.initState();
    startTimer();
  }

  void startTimer() {
    timer = Timer.periodic(
      Duration(seconds: 1),
      (Timer t) {
        if (_secondsRemaining > 0) {
          setState(() => _secondsRemaining--);
        } else {
          timer.cancel();
        }
      },
    );
  }

  @override
  void dispose() {
    timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Countdown Timer'),
      ),
      body: Center(
        child: Text(
          '$_secondsRemaining',
          style: TextStyle(
            fontSize: 48,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

Line 13

var _secondsRemaining = 60;
late Timer timer;
  • _secondRemaining：定義倒數即時的變數
  • timer：Timer 物件

Line 16

@override
void initState() {
  super.initState();
  startTimer();
}
  • 在 initState() 啟動 Timer 開始倒數

Line 22

void startTimer() {
  timer = Timer.periodic(
    Duration(seconds: 1),
    (Timer t) {
      if (_secondsRemaining > 0) {
        setState(() => _secondsRemaining--);
      } else {
        timer.cancel();
      }
    },
  );
}
  • Timer.periodic()
    • Duration：設定 定時觸發 時間
    • Callback：當 定時觸發 時間到了所值的 function
      • 當 0 時將停止 Timer

Line 47

body: Center(
  child: Text(
    '$_secondsRemaining',
    style: TextStyle(
      fontSize: 48,
      fontWeight: FontWeight.bold,
    ),
  ),
),
  • 將 _secondsRemaining 即時顯示

Conclusion

  • Timer 使用了 Dart 的內建 package：dart:async

# Flutter