Flutter 底部向上动画弹出菜单

在移动应用开发中,我们经常会遇到弹出菜单的开发需求,对于下拉菜单可以参考Flutter 自定义下拉菜单,而如果是向上的弹出菜单或者更加负责的扇形菜单,则需要开发者进行自定义开发。

在这里插入图片描述

上面是自定义向上弹出菜单的示例,如果要实现上面的效果,需要开发者对动画(AnimationController、Animation)和Flow组件能够很熟练的进行使用。,为了方便大家快速的进行开发,现在我们将它封装城一个组件,使用前需要添加如下插件依赖代码。

shake_animation_widget: ^2.1.2

然后,再添加如下测试代码。

class HomePage extends StatefulWidget {
   
  @override
  _TestPageState 
xiangzhihong8 CSDN认证博客专家 HTTPS 前端框架 JavaScript
著有《React Native移动开发实战》、《Kotlin入门与实战》、《Weex跨平台开发与实战》、《React Native开发进阶》和《Flutter跨平台开发实战》,正努力完成《Android应用架构实战》
相关推荐
<p> <span style="color:#333333;">Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的用户界面。本课程以理论+实例的方式带领大家学习动画的基础理论及各种动画特效的编写。</span> </p> <p> <span style="color:#333333;"><strong>本次课程包含以下内容:<br /> 动画基本概念</strong><br /> <span style="color:#333333;">动画的本质</span><br /> <span style="color:#333333;">帧与FPS</span><br /> <span style="color:#333333;">插值器/估值器</span><br /> <span style="color:#333333;">动画类型</span><br /> <br /> <strong>动画相关核心类</strong><br /> <span style="color:#333333;">Animation介绍</span><br /> <span style="color:#333333;">AnimationController动画管理类</span><br /> <span style="color:#333333;">CurvedAnimation非线性动画</span><br /> <span style="color:#333333;">Tween补间值生成类</span><br /> <br /> <strong>动画事件监听及控制流程</strong><br /> <span style="color:#333333;">Listeners和StatusListeners动画监听</span><br /> <span style="color:#333333;">动画控制流程</span><br /> <br /> <strong>动画示例</strong><br /> <span style="color:#333333;">字体放大动画</span><br /> <span style="color:#333333;">缓动动画</span><br /> <span style="color:#333333;">遮罩动画</span><br /> <span style="color:#333333;">数字变化动画</span><br /> <span style="color:#333333;">图表动画</span><br /> <span style="color:#333333;">AnimatedOpacity实现渐变效果</span><br /> <span style="color:#333333;">Hero实现页面切换动画</span><br /> </span> </p>
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值