Flutter菜单动画插件flutter_boom_menu的使用

Flutter菜单动画插件flutter_boom_menu的使用

BoomMenu 是一个用于在 Flutter 应用中创建动画菜单的插件。它可以替代 FloatingActionButton，并支持自定义图标、标题和副标题。下面是使用该插件的详细步骤和示例代码。

使用

BoomMenu 可以放置在 Scaffold.floatingActionButton 参数中。它不能通过 Scaffold.floatingActionButtonLocation 参数来设置位置，但可以通过 marginRight 和 marginBottom 参数（默认值为16）来调整按钮的位置。

每个子按钮可以包含一个 Icon、Title 和 Subtitle。如果未提供 Title 参数，则不会渲染标题。

示例代码（包含所有参数）

import 'package:flutter/material.dart';
import 'package:flutter_boom_menu/flutter_boom_menu.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  bool scrollVisible = true;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Boom Menu Example')),
      body: ListView.builder(
        itemCount: 30,
        itemBuilder: (ctx, i) => ListTile(title: Text('Item $i')),
      ),
      floatingActionButton: BoomMenu(
        animatedIcon: AnimatedIcons.menu_close,
        animatedIconTheme: IconThemeData(size: 22.0),
        onOpen: () => print('OPENING DIAL'),
        onClose: () => print('DIAL CLOSED'),
        scrollVisible: scrollVisible,
        overlayColor: Colors.black,
        overlayOpacity: 0.7,
        children: [
          MenuItem(
            child: Icon(Icons.accessibility, color: Colors.black),
            title: "Profiles",
            titleColor: Colors.white,
            subtitle: "You Can View the Noel Profile",
            subTitleColor: Colors.white,
            backgroundColor: Colors.deepOrange,
            onTap: () => print('FIRST CHILD'),
          ),
          MenuItem(
            child: Icon(Icons.brush, color: Colors.black),
            title: "Profiles",
            titleColor: Colors.white,
            subtitle: "You Can View the Noel Profile",
            subTitleColor: Colors.white,
            backgroundColor: Colors.green,
            onTap: () => print('SECOND CHILD'),
          ),
          MenuItem(
            child: Icon(Icons.keyboard_voice, color: Colors.black),
            title: "Profile",
            titleColor: Colors.white,
            subtitle: "You Can View the Noel Profile",
            subTitleColor: Colors.white,
            backgroundColor: Colors.blue,
            onTap: () => print('THIRD CHILD'),
          ),
          MenuItem(
            child: Icon(Icons.ac_unit, color: Colors.black),
            title: "Profiles",
            titleColor: Colors.white,
            subtitle: "You Can View the Noel Profile",
            subTitleColor: Colors.white,
            backgroundColor: Colors.blue,
            onTap: () => print('FOURTH CHILD'),
          )
        ],
      ),
    );
  }
}