การจับเวลาบน 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
ความคิดเห็น