Flutter 动画菜单、仿开源中国APP动画菜单、垂直向上弹出的菜单

题记

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

---

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

本文章实现Demo运行效果 如下：

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

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) {},      ),    );  }

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

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

点击查看原文可获取源码。