Flutter 底部向上动画弹出的菜单选项

题记

—— 优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维。


Flutter是谷歌推出的最新的移动开发框架。

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

【x4】一目了然的源码

【x5】简短的视频不一样的体验


本文章实现Demo运行效果 如下:
在这里插入图片描述

小编以将这个效果写成了一个依赖库,大家可以直接调用使用pub

dependencies:
  shake_animation_widget: ^2.1.2

然后如上图的Demo实现,首先是构建一个页面,代码如下:

class HomePage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("测试"),
      ),
      body: Container(
        //填充
        constraints: BoxConstraints.expand(),
        //层叠布局
        child: Stack(
          children: [
            //页面中的其他布局
            //右侧向上弹出的动画菜单
            buildContainer(),
          ],
        ),
      ),
    );
  }
 }

然后就是通过 RoteFlowButtonMenu 来构建实现,代码如下:

  Container buildContainer() {
    return Container(
      child: RoteFlowButtonMenu(
        //菜单图标组
        iconList: [
          Icon(
            Icons.backup_table_sharp,
            color: Colors.white,
          ),
          Icon(Icons.aspect_ratio, color: Colors.white),
          Icon(Icons.medical_services, color: Colors.white),
          Icon(Icons.add, color: Colors.white),
        ],
        //菜单项所使用的背景颜色
        iconBackgroundColorList: [
          Colors.deepOrangeAccent,
          Colors.deepPurple,
          Colors.blueGrey,
          Colors.blueAccent,
        ],
        //点击事件回调
        clickCallBack: (int index) {},
      ),
    );
  }

本文章提供的效果如果能满足你的开发需求,直接使用就可以,如果还需要其他效果也以联系小编进行扩展,当然你也可以下载下来依赖库源码参考小编的实现,举一反三实现你想要的效果。

不局限于思维,不局限语言限制,才是编程的最高境界。

以小编的性格,肯定是要录制一套视频的,点击这里查看详情

有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人

在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
相关推荐
<p> 本课程将使用 flutter 实现类似抖音首页面效果 </p> <p> <br /></p> <p> </p><ol><li> <span style="color:#64451D;"> </span><span style="color:#64451D;">通过</span><span style="color:#64451D;font-size:13px;"> TabBar </span><span style="color:#64451D;font-size:13px;">与</span><span style="color:#64451D;font-size:13px;"> TabBarView </span><span style="color:#64451D;font-size:13px;">结合使用</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">实现仿抖音</span><span style="color:#64451D;font-size:13px;">APP</span><span style="color:#64451D;font-size:13px;">首页面</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">关注</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">与推荐</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">页面左右滑动</span><span style="color:#64451D;font-size:13px;">ui</span><span style="color:#64451D;font-size:13px;">构建</span> </li> <li> <span style="color:#64451D;">通过</span><span style="font-size:13px;color:#64451D;"> PageView </span><span>来实现上下整屏切换效果</span> </li> <li> <span style="color:#5F70A8;font-size:13px;"><span style="color:#64451D;">使用 </span><span style="color:#64451D;">VideoPlayer</span><span>组件实现视频播放功能</span></span> </li> <li> <span><span style="font-size:13px;color:#64451D;">通过 CircularProgressIndicator实现 </span></span><span style="color:#64451D;">有圆形背景样式的按钮浮在视频列表上方来实现控制视频的播放与暂停,并会综述一个</span><span style="font-size:13px;color:#64451D;"> Align </span><span>在手机坐标系中的对齐方式</span> </li> <li> <span style="color:#64451D;">通过</span><span style="color:#64451D;font-size:13px;"> ClipOval</span><span style="color:#64451D;font-size:13px;">、</span><span style="color:#64451D;font-size:13px;">CachedNetworkImage </span><span style="color:#64451D;font-size:13px;">实现圆形头像</span> </li> <li> <span style="color:#5F70A8;font-size:13px;"><span style="color:#64451D;">通过</span><span style="color:#64451D;"> showModalBottomSheet </span><span>实现从页面底部上滑的弹框,结合</span><span style="color:#64451D;"> ListView </span><span>实现弹框显示评论列表功能</span></span> </li> <li> <span style="color:#64451D;">通过</span><span style="color:#64451D;font-size:13px;"> showModalBottomSheet </span><span style="color:#64451D;font-size:13px;">实现从页面底部上滑的弹框,结合</span><span style="color:#64451D;font-size:13px;"> GridView </span><span style="color:#64451D;font-size:13px;">实现弹框显示九宫格列表功能</span> </li> </ol>
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页