Flutter仿钉钉打卡，移动app定制开发

最新推荐文章于 2024-03-27 11:34:01 发布

m0_64382950

最新推荐文章于 2024-03-27 11:34:01 发布

阅读量689

点赞数

分类专栏：程序员文章标签：面试 android 移动开发

本文链接：https://blog.csdn.net/m0_64382950/article/details/121591336

版权

本文介绍了如何使用Flutter定制开发一款类似钉钉的打卡应用，重点讲解了如何设置渐变色背景、雷达扫描动画效果，以及在不同状态下的视觉表现。通过示例代码展示了CustomPainter的用法，实现雷达扫描动画的绘制和控制。

摘要由CSDN通过智能技术生成

),
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),
]),

设置阴影，同样在在1中Container的BoxDecoration中添加boxShadow：

boxShadow: [
BoxShadow(
// 阴影偏移
offset: Offset(0, 40.0),
// 1为正常状态否则为异常状态
color: type == 1
? Color(0xFF1376EE)
: Color(0xFFED6230),
// 投影模糊程度
blurRadius: 36.0,
// 投影扩散程度，大于0时向外扩散，小于0时呈内聚
spreadRadius: -36.0),
]),