การจับเวลาบน Flutter ทำยังไง (How to count up timer flutter?)


การจับเวลานั้นเป็นหนึ่งในฟีเจอร์ที่สำคัญสำหรับแอพพลิเคชั่นมือถือ ซึ่งสามารถนำไปใช้งานได้หลากหลาย และประยุกต์ได้อีกหลายแบบ สำหรับตัวอย่างเราจะมาสอนการทำฟีเจอร์จับเวลาบน Flutter กันครับ ง่ายๆ แค่ใส่โค้ดหลักหน้าเดียวจบ ไปดูกันเลย

ไฟล์ pubspec.yaml

stop_watch_timer: ^1.1.0+1

ก่อนอื่นเลยให้เราทำการเพิ่ม stop_watch_timer ลงไปในไฟล์ pubspec.yaml ก่อน เพื่อเพิ่มฟีเจอร์การจับเวลาเข้าไป

final StopWatchTimer _stopWatchTimer = StopWatchTimer(
mode: StopWatchMode.countUp,
onChange: (value) => print('onChange $value'),
onChangeRawSecond: (value) => print('onChangeRawSecond $value'),
onChangeRawMinute: (value) => print('onChangeRawMinute $value'),
);

โค้ดหลักๆสำหรับตัวอย่างนี้คือการใช้คำสั่ง บน onPress บน Button ก็คือ start , stop , reset ตามคำสั่งด้านล่างนี้ ซึ่งต้องกำหนด StopWatchTimer ขึ้นมาก่อน มาเก็บในตัวแปร _stopWatchTimer และประกาศ print เพื่อเช็คค่า


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

_stopWatchTimer.rawTime.listen((value) =>
print('rawTime $value ${StopWatchTimer.getDisplayTime(value)}'));
_stopWatchTimer.minuteTime.listen((value) => print('minuteTime $value'));
_stopWatchTimer.secondTime.listen((value) => print('secondTime $value'));
_stopWatchTimer.records.listen((value) => print('records $value'));
}

final _isHours = true;
จากนั้นประกาศ initState() ลง State ของเราก็ก่อน

@override
void dispose() async {
super.dispose();
await _stopWatchTimer.dispose();
}
และ dispose() ด้วย

_stopWatchTimer.onExecute.add(StopWatchExecute.start);
ใช้คำสั่งนี้ เพื่อทำการเริ่มนับเวลา โดยสร้างปุ่มก่อนแล้วใส่ใน onPressed

_stopWatchTimer.onExecute.add(StopWatchExecute.stop);
ใช้คำสั่งนี้เพื่อทำการหยุดเวลา โดยสร้างปุ่มก่อนแล้วใส่ใน onPressed

_stopWatchTimer.onExecute.add(StopWatchExecute.reset);
ใช้คำสั่งนี้เพื่อทำการรีเซ็ตเวลา โดยสร้างปุ่มก่อนแล้วใส่ใน onPressed



ไฟล์ main.dart

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
final _isHours = true;

final StopWatchTimer _stopWatchTimer = StopWatchTimer(
mode: StopWatchMode.countUp,
onChange: (value) => print('onChange $value'),
onChangeRawSecond: (value) => print('onChangeRawSecond $value'),
onChangeRawMinute: (value) => print('onChangeRawMinute $value'),
);

final _scrollController = ScrollController();

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

_stopWatchTimer.rawTime.listen((value) =>
print('rawTime $value ${StopWatchTimer.getDisplayTime(value)}'));
_stopWatchTimer.minuteTime.listen((value) => print('minuteTime $value'));
_stopWatchTimer.secondTime.listen((value) => print('secondTime $value'));
_stopWatchTimer.records.listen((value) => print('records $value'));
}

@override
void dispose() async {
super.dispose();
await _stopWatchTimer.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('CountUp Time'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(40),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20),
child: StreamBuilder<int>(
stream: _stopWatchTimer.rawTime,
initialData: _stopWatchTimer.rawTime.valueWrapper?.value,
builder: (context, snap) {
final value = snap.data!;
final displayTime = StopWatchTimer.getDisplayTime(value,
hours: _isHours);
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(0),
child: Text(
displayTime,
style: const TextStyle(
fontSize: 72,
fontFamily: 'Helvetica',
fontWeight: FontWeight.bold),
),
),
],
);
},
),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: RaisedButton(
padding: const EdgeInsets.all(2),
color: Colors.yellow[600],
shape: const StadiumBorder(),
onPressed: () async {
_stopWatchTimer.onExecute
.add(StopWatchExecute.start);
},
child: const Text(
'Start',
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: RaisedButton(
padding: const EdgeInsets.all(2),
color: Colors.yellow[600],
shape: const StadiumBorder(),
onPressed: () async {
_stopWatchTimer.onExecute
.add(StopWatchExecute.stop);
},
child: const Text(
'Stop',
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: RaisedButton(
padding: const EdgeInsets.all(2),
color: Colors.yellow[600],
shape: const StadiumBorder(),
onPressed: () async {
_stopWatchTimer.onExecute
.add(StopWatchExecute.reset);
},
child: const Text(
'Reset',
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
),
),
),
),
],
),
),
],
),
)
],
),
),
);
}
}

สุดท้ายสำหรับใครที่ต้องการดูตัวอย่างเกี่ยวกับการจับเวลา การนับเวลาต่างๆ สามารถเข้าไปดูได้ที่ลิ้งค์ Credit ได้เลย จะมีตัวอย่างอยู่มากมายให้ทุกคนได้เลือกกัน 

Source Code : https://github.com/tanat29/Flutter_CountUp_Time

Credit : https://fluttergems.dev/stopwatch-timer-countdown/

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

การรับค่า ส่งค่าจากหน้าที่ 1 ไปหน้าที่ 2 บน Flutter (How to pass data between screens in Flutter?)

วิธีการสลับข้อมูล MySQL ในคอลัมน์เดียวกัน