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,
    shape: BoxShape.circle,
  ),
  child: #iconWidget
),

3、绘制内部 Icon

// iconWidget
Icon(
  Icons.play_circle_filled,
  color: Colors.white.withOpacity(.9),
  size: 40,
)

4、添加动画

// 录制状态
bool recroding = false;

AnimatedSwitcher(
  duration: Duration(milliseconds: 200),
  transitionBuilder:
  (Widget child, Animation<double> animation) {
    // 缩放动画
    return ScaleTransition(
      scale: animation,
      // 渐隐渐显动画,保证切换不那么突兀的
      child: FadeTransition(
        child: child,
        opacity: animation,
      ),
    );
  },
  child: Icon(
    // 通过控制状态改变icon
    recroding
    ? Icons.pause_circle_filled
    : Icons.play_circle_filled,
    // 这一句是关键,如果不加上切换是没有效果的
    key: ValueKey<bool>(recroding),
    color: Colors.white.withOpacity(.9),
    size: 40,
  ),
),

代码仓库

视频教程

关于我

  • 15 年~18 年,使用 Android 原生做智能硬件相关的 App 研发
  • 18 年 5 月,一次偶然的机会接触到了 Flutter ,然后开始自学,可以看 weather_flutter 是我练习 Flutter 的入门实战项目(我现在依然觉得他非常适合 Flutter 入门练习使用)
  • 18 年 8 月,顶着巨大的压力(Flutter 当时还没有 Release 1.0)开始使用 Flutter 开发企业级项目,并且开发维护了十几个 Flutter 插件包(当时插件资源非常的匮乏)
  • 截止目前主导并参与上线了 4 款企业级Flutter App,当前正在负责开发的一款 App 累计用户 120W+,使用 Flutter 得到了极佳的体验

参考链接

已标记关键词 清除标记
相关推荐
<p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <span>本课程根据实际开发中总结出来的一些学习思路,从零开始详细讲解</span><span>Flutter</span><span>的基础知识点。从简到难,从浅入深,逐步带领大家了解</span><span>Flutter</span><span>,熟悉</span><span>Flutter</span><span>的组成部分,并且带领大家学习如何使用</span><span>Flutter</span><span>实现</span><span>UI</span><span>功能编写。通过对本视频的学习,你将会掌握</span><span>Flutter</span><span>常用组件和常用布局构建复杂布局、</span><span>Flutter</span><span>路由导航实现多页面构建和交互、</span><span>Flutetr</span><span>手势处理和动画实现动态交互效果,以及如何使用音视频、图片、文字、字体等资源。除此之外,你还可以收获每一章节遇到的重难点问题的解决方案。</span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858"></a><a href="https://edu.csdn.net/course/detail/26227">https://edu.csdn.net/course/detail/26227</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方式:电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858"></a><a href="https://edu.csdn.net/course/detail/26227">https://edu.csdn.net/course/detail/26227</a>,点击右下方课程资料、代码、课件等打包下载 </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页