Flutter可扩展浮动操作按钮插件expandable_fab_lite的使用

Flutter可扩展浮动操作按钮插件expandable_fab_lite的使用

概述

expandable_fab_lite 是一个高度可定制的简单可扩展浮动操作按钮（FAB）组件，适用于Flutter应用。它支持在中心弧方向上展示或隐藏多个带有动画的操作按钮。

预览

安装

1. 在 pubspec.yaml 文件的依赖部分添加最新版本的包。

dependencies:
  flutter:
    sdk: flutter

  expandable_fab_lite: ^0.0.2

1. 在终端运行以下命令或者点击 pub get。

$ flutter pub get

如何使用

下面是一个简单的示例，展示了如何使用该包。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Expandable FAB'),
    ),
    body: Center(
      child: Text(
        'Hello, World!',
        style: TextStyle(fontSize: 24),
      ),
    ),
    bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          label: 'Business',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.add),
          label: '',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          label: 'School',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.account_circle),
          label: 'Profile',
        ),
      ],
      currentIndex: 0,
      selectedItemColor: Colors.deepOrangeAccent,
      onTap: (index) {},
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: ExpandableFab(
      fabMargin: 8,
      children: [
        ActionButton(
            icon: const Icon(Icons.message),
            onPressed: () {
              print("===M1");
            }),
        ActionButton(
            icon: const Icon(Icons.call),
            onPressed: () {
              print("===M2");
            }),
        ActionButton(
            icon: const Icon(Icons.email),
            onPressed: () {
              print("===M3");
            })
      ],
    ),
  );
}

属性

ExpandableFab

ActionButton

示例代码

以下是从 GitHub 获取的示例代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
    Text(
      'Index 3: Profile',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expandable FAB'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        elevation: 0,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.deepOrangeAccent,
        onTap: _onItemTapped,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: ExpandableFab(
        fabMargin: 8,
        children: [
          ActionButton(
              icon: const Icon(Icons.message),
              onPressed: () {
                print("===M1");
              }),
          ActionButton(
              icon: const Icon(Icons.call),
              onPressed: () {
                print("===M2");
              }),
          ActionButton(
              icon: const Icon(Icons.email),
              onPressed: () {
                print("===M3");
              })
        ],
      ),
    );
  }
}