Flutter浮动操作按钮插件diamond_dial_fab的使用

Flutter浮动操作按钮插件diamond_dial_fab的使用

Diamond shaped floating action button with dials.

截图

使用

添加依赖

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

dependencies:
    flutter:
      sdk: flutter
    diamond_dial_fab: 0.0.3

在Scaffold中使用DiamondDialFab

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold (
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton:
          DiamondDialFab(
            children: [
              DiamondDialChild(
                child: const Icon(Icons.wine_bar),
                label: "Wine Bar",
              ),
              DiamondDialChild(
                child: const Icon(Icons.wc),
                label: "Toilet"
              )
            ]
          ),
                ....

自定义

以下是可以用于 DiamondDialFab 的选项：

属性 类型 描述
children List DiamondDialChild列表
buttonSize double 主FAB大小
mainIcon Icon 主FAB图标
mainBackgroundColor Color 主FAB背景颜色
mainForegroundColor Color 主FAB前景颜色
pressedIcon Icon 按下时的主FAB图标
pressedBackgroundColor Color 按下时的主FAB背景颜色
pressedForegroundColor Color 按下时的主FAB前景颜色
cornerRadius double 钻石角半径。应小于按钮大小的四分之一
dimOverlay DimOverlay .dark, .light 或 .none.
dimOpacity double 应小于1.0
childLabelLocation LabelLocation .left 或 .right. 它不依赖于主FAB的位置，需要手动应用。
childrenButtonSize Size 子FAB大小
notifierIsOpen ValueNotifier<bool> 可以通知FAB是否打开。
animationSpeed int 目前未工作
heroTag String 目前未工作

示例代码

import 'package:flutter/material.dart';
import 'package:diamond_dial_fab/diamond_dial_fab.dart';
import 'package:diamond_dial_fab/diamond_dial_fab_child.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Diamond FAB',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Diamond Dial FAB Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FloatingActionButtonLocation _fabLocation = FloatingActionButtonLocation.centerFloat;
  LabelLocation _labelLocation = LabelLocation.left;
  double _cornerRadius = 2.0;
  DimOverlay _dimOverlay = DimOverlay.none;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
       title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Diamond Corner Radius ${_cornerRadius.round()}'),
            Slider(
              label: '${_cornerRadius.round()}',
              value: _cornerRadius,
              min: 0,
              max: 30,
              onChanged: (value) {
                  setState(() {
                      _cornerRadius = value;
                    });
            }),
            const Text('Fab Location'),
            Row(
              children: [
                Expanded(
                  child: RadioListTile(
                    title : const Text('Left'),
                    value: FloatingActionButtonLocation.startFloat,
                    groupValue: _fabLocation,
                    onChanged: (value) {
                      setState(() {
                        _fabLocation = value as FloatingActionButtonLocation;
                      });
                    },
                  ),
                ),
                Expanded(
                  child: RadioListTile(
                    title : const Text('Center'),
                    value: FloatingActionButtonLocation.centerFloat,
                    groupValue: _fabLocation,
                    onChanged: (value) {
                      setState(() {
                        _fabLocation = value as FloatingActionButtonLocation;
                      });
                    },
                  ),
                ),
                Expanded(
                  child: RadioListTile(
                    title : const Text('Right'),
                    value: FloatingActionButtonLocation.endFloat,
                    groupValue: _fabLocation,
                    onChanged: (value) {
                      setState(() {
                        _fabLocation = value as FloatingActionButtonLocation;
                      });
                    },
                  ),
                ),
              ],
            ),
            const Text('Label Location'),
            Row(
              children: [
                Expanded(
                  child: RadioListTile(
                    title : const Text('Left'),
                    value: LabelLocation.left,
                    groupValue: _labelLocation,
                    onChanged: (value) {
                      setState(() {
                        _labelLocation = value as LabelLocation;
                      });
                    },
                  ),
                ),
                Expanded(
                  child: RadioListTile(
                    title : const Text('Right'),
                    value: LabelLocation.right,
                    groupValue: _labelLocation,
                    onChanged: (value) {
                      setState(() {
                        _labelLocation = value as LabelLocation;
                      });
                    },
                  ),
                ),
              ],
            ),
            const Text('Dim Overlay'),
            Row(
              children: [
                Expanded(
                  child: RadioListTile(
                    title : const Text('None'),
                    value: DimOverlay.none,
                    groupValue: _dimOverlay,
                    onChanged: (value) {
                      setState(() {
                        _dimOverlay = value as DimOverlay;
                      });
                    },
                  ),
                ),
                Expanded(
                  child: RadioListTile(
                    title : const Text('Dark'),
                    value: DimOverlay.dark,
                    groupValue: _dimOverlay,
                    onChanged: (value) {
                      setState(() {
                        _dimOverlay = value as DimOverlay;
                      });
                    },
                  ),
                ),
                Expanded(
                  child: RadioListTile(
                    title : const Text('Light'),
                    value: DimOverlay.light,
                    groupValue: _dimOverlay,
                    onChanged: (value) {
                      setState(() {
                        _dimOverlay = value as DimOverlay;
                      });
                    },
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButtonLocation: _fabLocation,
      floatingActionButton: DiamondDialFab(
        cornerRadius: _cornerRadius,
        childLabelLocation: _labelLocation,
        dimOverlay: _dimOverlay,
        dimOpacity: 0.5,
        mainIcon: Icons.account_balance_sharp,
        pressedIcon: Icons.close,
        pressedBackgroundColor: Colors.white,
        pressedForegroundColor: Colors.amber,
        mainBackgroundColor: Colors.amber,
        children: [
          DiamondDialChild(
            child: const Icon(Icons.wine_bar),
            label: "Wine Bar",
          ),
          DiamondDialChild(
              child: const Icon(Icons.wc),
              label: "Toilet"
          ),
        ],
      ),
    );
  }
}

更多关于Flutter浮动操作按钮插件diamond_dial_fab的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter浮动操作按钮插件diamond_dial_fab的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


diamond_dial_fab 是一个用于 Flutter 的浮动操作按钮（FAB）插件，它提供了一个类似于钻石形状的浮动操作按钮，并且可以展开为多个子按钮。这个插件非常适合在应用中创建一个美观且功能丰富的浮动操作按钮。

安装

首先，你需要在 pubspec.yaml 文件中添加 diamond_dial_fab 依赖：

dependencies:
  flutter:
    sdk: flutter
  diamond_dial_fab: ^0.0.1  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

基本使用

以下是一个简单的示例，展示如何使用 diamond_dial_fab：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Diamond Dial FAB Example'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
        floatingActionButton: DiamondDialFab(
          children: [
            DiamondDialFabItem(
              icon: Icons.add,
              onPressed: () {
                print('Add pressed');
              },
            ),
            DiamondDialFabItem(
              icon: Icons.edit,
              onPressed: () {
                print('Edit pressed');
              },
            ),
            DiamondDialFabItem(
              icon: Icons.delete,
              onPressed: () {
                print('Delete pressed');
              },
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

  • children: 一个 DiamondDialFabItem 列表，每个 DiamondDialFabItem 代表一个子按钮。
    • icon: 子按钮的图标。
    • onPressed: 点击子按钮时的回调函数。

自定义样式

你可以通过 DiamondDialFab 的构造函数中的其他参数来自定义样式，例如：

  • mainButtonColor: 主按钮的背景颜色。
  • childButtonColor: 子按钮的背景颜色。
  • mainButtonIcon: 主按钮的图标。
  • animationDuration: 动画持续时间。
DiamondDialFab(
  mainButtonColor: Colors.blue,
  childButtonColor: Colors.green,
  mainButtonIcon: Icons.menu,
  animationDuration: Duration(milliseconds: 300),
  children: [
    DiamondDialFabItem(
      icon: Icons.add,
      onPressed: () {
        print('Add pressed');
      },
    ),
    DiamondDialFabItem(
      icon: Icons.edit,
      onPressed: () {
        print('Edit pressed');
      },
    ),
    DiamondDialFabItem(
      icon: Icons.delete,
      onPressed: () {
        print('Delete pressed');
      },
    ),
  ],
)
回到顶部