史上最详细！如何使用Flutter2.0 绘制华为旋转太空人

前言

最近华为手表的太空人表盘突然间火了，表盘上那个旋转的太空人呆萌可爱。奈何没有一款华为手表，作为一名合格的程序猿，当然要撸起袖子自己来画一个啦~

鉴于最近Flutter推出了2.0稳定版本，除了对移动端Android、iOS的支持外，Web端和桌面端的支持也整合到了Flutter2.0版本中，新特性支持空指针安全。本次通过Flutter2.0来编写封面图展示的效果。

编写思路

在构思太空人如何绘制时，看到其他作者的分享有了思路，站在巨人的肩膀上，才能走的更高更远。

在调研之后，发现直接用代码动态生成的方式，可能不大适合，本人绘画水平也不高，画出来肯定也是不好看。所以转换了个思维，直接用视频播放器来播放（这步偷了个懒，有更好实现方式的朋友，可以提供下新思路）。

具体实现

旋转太空人
1、视频控件

决定使用视频来播放太空人，那么就用普及率最高的video_player来编写。

视频控件的代码： 这部分代码和video_player提供的example一样，只修改了VideoPlayerController的创建。通过assets资源来播放视频：VideoPlayerController.asset(this.videoAssetsUrl)

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class VideoView extends StatefulWidget {
   
  final String videoAssetsUrl;

  @override
  _VideoViewState createState() => _VideoViewState(videoAssetsUrl);

  VideoView(this.videoAssetsUrl);
}

class _VideoViewState extends State<VideoView> {
   
  String videoAssetsUrl;
  late VideoPlayerController _controller;

  _VideoViewState(this.videoAssetsUrl);

  @override
  void initState() {
   
    super.initState();
    // 通过assets资源来播放视频
    _controller = VideoPlayerController.asset(this.videoAssetsUrl)
      ..initialize().then((_) {
   
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {
   
          _controller.setLooping(true);
          _controller.play();
        });
      });
  }

  @override
  Widget build(BuildContext context) {
   
    return Container(
      width: 100,
      height: 100,
      child: _controller.value.isInitialized
          ? AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            )
          : Container(),
    );
  }

  @override
  void dispose() {
   
    super.dispose();
    _controller.dispose();
  }
}

2、在pubspec.yaml中定义视频资源位置

assets:
  - assets/video/

视频效果预览：

动态蛛网

1、配置参数

  // 小球可取的颜色值
  final List<Color>? ballColors;

  /// 小球总数
  final int totalCount;

  /// 小球连线最大的距离
  final double maxDistance;

  /// X轴加速度范围，范围越大，小球速度相差就越大
  final int velocityXRange;

  /// Y轴加速度范围，范围越大，小球速度相差就越大
  final int velocityYRange;

  // 每次刷新,单位位移的像素，大于0就行，越小，小球运动的越慢
  final double eachMovePixel;

  /// 小球连线的宽度
  final double lineWidth;

  /// 连线最大的透明度0~1
  final double maxAlpha;

  /// 小球半径
  final double radius;

  /// 触摸影响半径
  final double touchRadius;

  /// 触摸影响半径
  final Color? touchColor;

2、小球对象信息

import 'package:flutter/material.dart';

/// 小球
class Point {
   
  /// X轴加速度
  int velocityX;

  /// Y轴加速度
  int velocityY;

  /// X轴当前位置
  double x;

  /// Y当前位置
  double y;

  /// 小球颜色
  Color color;

  Point(this.x, this.y,
      {
   this.velocityX = 0, this.velocityY = 0, this.color = Colors.green})