问题背景
本文介绍如何使用flutter实现一个好看的计时器。
问题分析
直接上效果图。
问题解决
话不多说,直接上代码
main.dart文件,代码如下:
import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: "My Stopwatch",
home: StopwatchApp());
}
class StopwatchApp extends StatefulWidget {
@override
_StopwatchAppState createState() => _StopwatchAppState();
}
class _StopwatchAppState extends State<StopwatchApp> {
String timeString = "00:00:00";
Stopwatch stopwatch = Stopwatch();
late Timer timer;
void start() {
stopwatch.start();
timer = Timer.periodic(Duration(milliseconds: 100), update);
}
void update(Timer t) {
if (stopwatch.isRunning) {
setState(() {
timeString =
(stopwatch.elapsed.inMinutes % 60).toString().padLeft(2, "0") +
":" +
(stopwatch.elapsed.inSeconds % 60).toString().padLeft(2,
"0") +
":" +
(stopwatch.elapsed.inMilliseconds % 1000 / 10).clamp(0, 99)
.toStringAsFixed(0)
.padLeft(2, "0");
});
}
}
void stop() {
setState(() {
timer.cancel();
stopwatch.stop();
});
}
void reset() {
timer.cancel();
stopwatch.reset();
setState(() {
timeString = "00:00:00";
});
stopwatch.stop();
}
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(
title: const Text("My Stopwatch"),
),
backgroundColor: Colors.blue,
body: Column(
children: <Widget> [
Padding(padding: const EdgeInsets.symmetric(horizontal: 80,
vertical: 60),
child: Text("STOPWATCH",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.grey.shade900,
)
),
),
Expanded(
child: Container(
width: 250,
height: 250,
decoration: BoxDecoration(
color: Colors.pink,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
offset: Offset(10,10),
color: Colors.red,
blurRadius: 5),
BoxShadow(
offset: Offset(-10,-10),
color: Colors.white.withOpacity(0.85),
blurRadius: 5)
]),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('$timeString',
style: TextStyle(
fontSize: 40,
color: Colors.grey.shade900,
)
)
],
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical:
60),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
TextButton(
onPressed: reset,
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: Icon(Icons.refresh, size: 60),
)
),
TextButton(
onPressed: () => {
stopwatch.isRunning ? stop() : start()
},
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: Icon(stopwatch.isRunning ? Icons.pause :
Icons.play_arrow, size: 60),
),
)
],
),
)
],
)
);
}
}
问题总结
本文介绍了如何使用flutter实现一个好看的计时器,有兴趣的同学可以进一步深入研究。