Flutter仿钉钉打卡

最新推荐文章于 2025-05-17 15:17:05 发布

2501_90225587

最新推荐文章于 2025-05-17 15:17:05 发布

阅读量726

点赞数 14

文章标签： flutter 钉钉

本文链接：https://blog.csdn.net/2501_90225587/article/details/145195704

版权

decoration: BoxDecoration(
shape: BoxShape.circle,
…
),
child: Column(
children: [
…
],
),
)

添加文案，文案包含“打卡”和当前时间(HH:mm:ss)，在1中Column的children添加相关文案：

child: Column(
children: [
Text(
“打卡”,
style: TextStyle(
fontSize: 32.0,
color: Colors.white,
),
),
SizedBox(
height: 4.0,
),
Text(
time,
style: TextStyle(fontSize: 24.0, color: Colors.white),
),
],
),

设置渐变色背景，正常状态下背景为蓝色，异常状态下背景为橙色，在1中Container的BoxDecoration中添加gradient：

gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
// 1为正常状态否则为异常状态
colors: type == 1
? [
Color(0xFF1DE0FA),
Color(0xFF1376EE),
]
: [
Color(0xFFFFB164),
Color(0xFFED6230),
]),