Flutter自定义浮动操作按钮插件custom_floating_action_button的使用

Flutter自定义浮动操作按钮插件custom_floating_action_button的使用

插件介绍

此插件允许您创建一个带有多个选项的浮动操作按钮（FloatingActionButton）。

如何使用

1. 在pubspec.yaml文件中添加以下依赖：

   # 添加这行到你的依赖项
   custom_floating_action_button: ^0.0.3
   

2. 导入插件：

   import 'package:custom_floating_action_button/custom_floating_action_button.dart';
   

3. 在Scaffold上添加自定义浮动操作按钮，最少需要2个选项，最多5个选项：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return CustomFloatingActionButton(
       body: Scaffold(
         appBar: AppBar(
           title: const Text('appbar title'), // 标题
         ),
         body: Container(), // 主体内容
       ),
       options: const [
           CircleAvatar( // 选项一
             child: Icon(Icons.height),
           ),
           CircleAvatar( // 选项二
             child: Icon(Icons.title),
           ),
       ],
       type: CustomFloatingActionButtonType.circular, // 按钮类型为圆形
       openFloatingActionButton: const Icon(Icons.add), // 打开时的图标
       closeFloatingActionButton: const Icon(Icons.close), // 关闭时的图标
     );
   }
   

示例代码

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: CustomFloatingActionButton(
        body: Scaffold(
          appBar: AppBar(
            title: const Text('Custom FAB'), // 自定义FAB标题
          ),
          body: const Center(
            child: Text('Custom Floating Action Button Plugin'), // 内容文本
          ),
        ),
        openFloatingActionButton: const Icon(Icons.add), // 打开时的图标
        closeFloatingActionButton: const Icon(Icons.close), // 关闭时的图标
        type: CustomFloatingActionButtonType.circular, // 类型为圆形
        spaceFromBottom: 100, // 距离底部的距离
        options: const [
          CircleAvatar( // 选项一
            child: Icon(Icons.height),
          ),
          CircleAvatar( // 选项二
            child: Icon(Icons.title),
          ),
          CircleAvatar( // 选项三
            child: Icon(Icons.translate),
          ),
          CircleAvatar( // 选项四
            child: Icon(Icons.email),
          ),
          CircleAvatar( // 选项五
            child: Icon(Icons.star),
          ),
        ],
      ),
    );
  }
}

截图示例

更改按钮颜色

floatinButtonColor: Colors.blue, // 设置按钮颜色为蓝色

使背景透明（默认颜色是黑色54）

backgroundColor: Colors.transparent, // 设置背景色为透明

将类型更改为水平

type: CustomFloatingActionButtonType.horizontal, // 类型为水平

向选项中添加任何小部件

options: const [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
                child: Text(
                  'demo',
                  style: TextStyle(color: Colors.white), // 文本颜色为白色
                ),
              ),
              const SizedBox(
                width: 5,
              ),
              CircleAvatar(
                child: Icon(Icons.title),
              ),
            ],
          ),
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
                child: Text(
                  'demo',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              const SizedBox(
                width: 5,
              ),
              CircleAvatar(
                child: Icon(Icons.translate),
              ),
            ],
          ),
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
                child: Text(
                  'demo',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              const SizedBox(
                width: 5,
              ),
              CircleAvatar(
                child: Icon(Icons.event),
              ),
            ],
          ),
      ],

将类型更改为垂直向下

// 可以添加距离底部和右侧的空间
// 最大底部空间为500，最大右侧空间为50
spaceFromBottom: 300,
type: CustomFloatingActionButtonType.verticalDown, // 类型为垂直向下

将类型更改为垂直向上

type: CustomFloatingActionButtonType.verticalUp, // 类型为垂直向上