flutter 悬浮按钮菜单 flutter_floating_menu

发布时间:2022-05-16 16:31:40

因为需要在一个页面安排多个按钮,所以使用悬浮按钮菜单 1.引用依赖

flutter_floating_menu: ^0.0.2

2.引入包

import 'package:flutter_floating_menu/floating_menu.dart';
import 'package:flutter_floating_menu/floating_menu_callback.dart';
import 'package:flutter_floating_menu/floating_menu_item.dart';

3.定义按钮组

final List<FloatingMenuItem> floatMenuList = [
      FloatingMenuItem(id: 1, icon: Icons.add, backgroundColor: Colors.deepOrangeAccent),
      FloatingMenuItem(id: 2, icon: Icons.email, backgroundColor: Colors.brown),
    ];

4.在body中引用

body: Stack(
        children: [
        //先添加其他元素
        FloatingMenu(
            menuList: floatMenuList,
            callback: this,
            btnBackgroundColor: Colors.red,
          ),

5.在类上添加实现接口FloatingMenuCallback

class ReceiveBookPageState extends State<ReceiveBook>  with AutomaticKeepAliveClientMixin implements FloatingMenuCallback{

6.添加事件方法

@override
  void onMenuClick(FloatingMenuItem floatingMenuItem) {

    // callback listener, Perform your operations here

    print("onMenuClicked : " + floatingMenuItem.id.toString());
    switch (floatingMenuItem.id) {
      case 1:
        {
          shwoFormDialog();
        }
        break;
      case 2:
        {
          centerText = "Map";
        }
        break;

    }

    setState(() {});
  }

Card image cap
APP STORE
Card image cap
应用宝
Card image cap
小米
Card image cap
华为