Flutter浮动底部导航栏插件simple_floating_bottom_nav_bar的使用

当然，以下是如何在Flutter项目中使用simple_floating_bottom_nav_bar插件的详细代码示例。首先，你需要确保你的Flutter项目已经配置好，并且已经添加了simple_floating_bottom_nav_bar依赖。

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

dependencies:
  flutter:
    sdk: flutter
  simple_floating_bottom_nav_bar: ^最新版本号  # 请替换为最新的版本号

1. **运行flutter pub get**来安装依赖。

2. 使用simple_floating_bottom_nav_bar插件：

以下是一个完整的Flutter应用示例，它展示了如何使用simple_floating_bottom_nav_bar来创建一个带有浮动底部导航栏的应用。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Floating Bottom Nav Bar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Home Screen'),
      ),
    ),
    Scaffold(
      appBar: AppBar(
        title: Text('Search'),
      ),
      body: Center(
        child: Text('Search Screen'),
      ),
    ),
    Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: Center(
        child: Text('Profile Screen'),
      ),
    ),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widgetOptions[_selectedIndex],
      floatingActionButton: SimpleFloatingActionButton(
        icon: Icons.menu,
        menuItems: [
          SimpleFloatingActionMenuItem(
            icon: Icons.home,
            title: 'Home',
            onPressed: () {
              _onItemTapped(0);
            },
          ),
          SimpleFloatingActionMenuItem(
            icon: Icons.search,
            title: 'Search',
            onPressed: () {
              _onItemTapped(1);
            },
          ),
          SimpleFloatingActionMenuItem(
            icon: Icons.person,
            title: 'Profile',
            onPressed: () {
              _onItemTapped(2);
            },
          ),
        ],
        backgroundColor: Colors.blue,
        fabColor: Colors.white,
        fabElevation: 8.0,
        fabSize: 56.0,
        fabIconSize: 24.0,
        fabRippleEffectColor: Colors.lightBlueAccent,
        menuBackgroundColor: Colors.white,
        menuElevation: 16.0,
        menuCornerRadius: 16.0,
        menuWidth: 200.0,
        menuItemSpacing: 16.0,
        menuItemIconSize: 24.0,
        menuItemLabelStyle: TextStyle(
          color: Colors.black,
          fontSize: 16.0,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        shape: CircularNotchedRectangle(),
        notchMargin: 4.0,
        child: Container(
          height: 50.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.arrow_back_ios),
                onPressed: () {
                  // Handle back button press
                },
                color: Colors.grey,
              ),
              IconButton(
                icon: Icon(Icons.more_vert),
                onPressed: () {
                  // Handle more options button press
                },
                color: Colors.grey,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释

1. 依赖添加：确保在pubspec.yaml中添加了simple_floating_bottom_nav_bar依赖。
2. 创建主应用：使用MaterialApp创建主应用，并设置首页为MyHomePage。
3. 创建页面选项：在_MyHomePageState中，定义了三个页面选项（Home, Search, Profile），每个选项都是一个Scaffold。
4. 定义底部导航栏：使用SimpleFloatingActionButton来创建浮动底部导航栏，并定义了菜单项及其图标和标题。
5. 处理菜单项点击事件：通过_onItemTapped方法来处理菜单项的点击事件，并更新当前显示的页面。
6. 底部应用栏：添加了一个BottomAppBar，其中包含返回按钮和更多选项按钮。

这个示例展示了如何使用simple_floating_bottom_nav_bar插件来创建一个带有浮动底部导航栏的Flutter应用。你可以根据需要进一步定制和扩展这个示例。