Flutter 敲一个灵动的录音按钮动画 - Speed Code

先看效果

通过此项目可以学习到 Container、AnimatedSwitcher、FadeTransition、ScaleTransition 等组件的基础用法，最终我们将构建一个灵动动画的录音状态切换按钮

这里按钮全部是用 Container 编写的，圆环 和 圆形 都是 Container 的属性效果，具体可以看下面的文章或视频

核心代码

1、绘制最外层的灰色边框

Container(
  height: 80,
  width: 80,
  padding: EdgeInsets.all(2),
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      color: Color(0x999999).withOpacity(.3),
      width: 3,
    ),
  ),
  child: $blueWidget
),

2、绘制内部蓝色区域

// blueWidget
Container(
  width: 70,
  height: 70,
  decoration: BoxDecoration(
    color: Colors.blueAccent,
    sha