Flutter仿钉钉打卡

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

劳恩学Android

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

阅读量682

点赞数

CC 4.0 BY-SA版权

分类专栏： Android 文章标签：经验分享面试 android

本文链接：https://blog.csdn.net/m0_70083119/article/details/124553944

这篇博客介绍了如何使用Flutter来仿制钉钉的打卡功能，特别是雷达扫描动画的实现。通过设置BoxShadow创建阴影效果，然后利用CustomPainter和AnimationController实现雷达扫描动画，并在点击事件中控制动画的显示和隐藏。最后，将动画组件与打卡按钮组合，确保按钮具备交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

]

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

设置雷达扫描样式：

class RadarPainter extends CustomPainter {
final double angle;
Paint _paint = Paint()…style = PaintingStyle.fill;

RadarPainter(this.angle);

@override
void paint(Canvas canvas, Size size) {
var radius = min(size.width / 2, size.height / 2);
// 设置扫描线样式，白色，透明度从0.01过渡到0.5，角度为pi/9=20°
_paint.shader = ui.Gradient.sweep(
Offset(size.width / 2, size.height / 2),
[
Colors.white.withOpacity(0.01),
Colors.white.withOpacity(0.1),
Colors