关于flutter:Android进阶Flutter-雷达扫描效果Flutter旋转扫描

效果图：

1 . 测试 Demo 启动文件

main() {
  runApp(MaterialApp(home: SignSwiperPage(),
  ));
}

class SignSwiperPage extends StatefulWidget {
  @override
  _SignSwiperPageState createState() => _SignSwiperPageState();
}

class _SignSwiperPageState extends State<SignSwiperPage>
    with SingleTickerProviderStateMixin {}

接下来的代码都在 _SignSwiperPageState 中编写

2 . 动画控制器用来实现旋转

// 动画控制器
  AnimationController _animationController;

  @override
  void initState() {super.initState();

    // 创立
    _animationController = new AnimationController(vsync: this, duration: Duration(milliseconds: 2000));
    // 增加到事件队列中
    Future.delayed(Duration.zero, () {
      // 动画反复执行
      _animationController.repeat();});
  }

  @override
  void dispose() {
    // 销毁
    _animationController.dispose();
    super.dispose();}

3 . 旋转扫描成果

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Swiper Demo"),
      ),
      backgroundColor: Colors.white,
      // 居中
      body: Center(
        // 层叠布局
        child: Stack(
          children: [
            // 第一层的背景 圆形剪裁
            ClipOval(
              child: Container(
                width: 200,
                height: 200,
                color: Colors.green,
              ),
            ),
            // 第二层的扫描
            buildRotationTransition(),],
        ),
      ),
    );
  }

RotationTransition 用来实现旋转动画

RotationTransition buildRotationTransition() {
    // 旋转动画 
    return RotationTransition(
      // 动画控制器
      turns: _animationController,
      // 圆形裁剪
      child: ClipOval(
        // 扫描突变
        child: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            // 扫描突变
            gradient: SweepGradient(colors: [Colors.white.withOpacity(0.2),
              Colors.white.withOpacity(0.6),
            ]),
          ),
        ),
      ),
    );
  }