在挪动利用开发中,咱们常常会遇到弹出菜单的开发需要,对于下拉菜单能够参考Flutter 自定义下拉菜单,而如果是向上的弹出菜单或者更加负责的扇形菜单,则须要开发者进行自定义开发。

下面是自定义向上弹出菜单的示例,如果要实现下面的成果,须要开发者对动画(AnimationController、Animation)和Flow组件可能很纯熟的进行应用。,为了不便大家疾速的进行开发,当初咱们将它封装城一个组件,应用前须要增加如下插件依赖代码。

shake_animation_widget: ^2.1.2

而后,再增加如下测试代码。

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: [                        Positioned(              right: 33,              bottom: 33,              //悬浮按钮              child: RoteFloatingButton(                //菜单图标组                iconList: [                  Icon(Icons.add),                  Icon(Icons.message),                  Icon(Icons.aspect_ratio),                ],                //点击事件回调                clickCallback: (int index){                },              ),            ),          ],        ),      ),    );  }

除了下面这种线性的菜单外,扇形菜单或者圆形菜单也是比拟罕用的,例如上面是扇形菜单的示例代码。

void main() {  runApp(RootPage());}class RootPage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: HomePage(),    );  }}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(),          ],        ),      ),    );  }  Container buildContainer() {    return Container(      child: BottomRoundFlowMenu(        iconList: [          Icon(            Icons.add_circle_outline,            color: Colors.white,          ),          Icon(Icons.directions_car, color: Colors.white),          Icon(Icons.camera, color: Colors.white),          Icon(Icons.local_shipping, color: Colors.white),        ],        iconBackgroundColorList: [          Colors.deepOrangeAccent,          Colors.deepPurple,          Colors.blueGrey,          Colors.blueAccent,        ],        //点击事件回调        clickCallBack: (int index) {},      ),    );  }}

能够发现,配合动画组件和Flow组件,咱们能够开发出很多简单的成果。

参考:Flow弹出菜单