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

floating_bottom_bar 插件为Flutter应用提供了一个具有动画效果的浮动底部导航栏，它将一个浮动操作按钮（FAB）置于中心，并且通过 AnimatedContainer 和 SlideTransition 来实现底部导航栏图标的动画效果。

Floating Bottom Bar

Usage

示例代码

以下是一个完整的示例demo，展示了如何在Flutter项目中使用floating_bottom_bar插件：

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:floating_bottom_bar/animated_bottom_navigation_bar.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "App Name",
      theme: ThemeData(fontFamily: 'Poppins'),
      home: const BottomNavigatorExample(title: "App Name"),
    );
  }
}

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

  final String title;

  @override
  State<BottomNavigatorExample> createState() => _BottomNavigatorExampleState();
}

class _BottomNavigatorExampleState extends State<BottomNavigatorExample> {
  bool circleButtonToggle = false;
  List<Color> listOfColor = [
    const Color(0xFFF2B5BA),
    Colors.orange,
    Colors.amber,
    Colors.deepOrangeAccent
  ];
  int index = 1;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          elevation: 3,
          backgroundColor: Colors.redAccent,
          title: Text(widget.title),
        ),
        backgroundColor: listOfColor[index],
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: AnimatedBottomNavigationBar(
          barColor: Colors.white,
          controller: FloatingBottomBarController(initialIndex: 1),
          bottomBar: [
            BottomBarItem(
              icon: const Icon(Icons.home, size: 24),
              iconSelected: const Icon(Icons.home, color: Colors.redAccent, size: 24),
              title: "Home",
              dotColor: Colors.redAccent,
              onTap: (value) {
                setState(() {
                  index = value;
                });
                log('Home $value');
              },
            ),
            BottomBarItem(
              icon: const Icon(Icons.photo, size: 24),
              iconSelected: const Icon(Icons.photo, color: Colors.redAccent, size: 24),
              title: "Search",
              dotColor: Colors.redAccent,
              onTap: (value) {
                setState(() {
                  index = value;
                });
                log('Search $value');
              },
            ),
            BottomBarItem(
              icon: const Icon(Icons.person, size: 24),
              iconSelected: const Icon(Icons.person, color: Colors.redAccent, size: 24),
              title: "Person",
              dotColor: Colors.redAccent,
              onTap: (value) {
                setState(() {
                  index = value;
                });
                log('Profile $value');
              },
            ),
            BottomBarItem(
              icon: const Icon(Icons.settings, size: 24),
              iconSelected: const Icon(Icons.settings, color: Colors.redAccent, size: 24),
              title: "Settings",
              dotColor: Colors.redAccent,
              onTap: (value) {
                setState(() {
                  index = value;
                });
                log('Settings $value');
              },
            ),
          ],
          bottomBarCenterModel: BottomBarCenterModel(
            centerBackgroundColor: Colors.redAccent,
            centerIcon: const FloatingCenterButton(
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
            ),
            centerIconChild: [
              FloatingCenterButtonChild(
                child: const Icon(
                  Icons.home,
                  color: Colors.white,
                ),
                onTap: () => log('Item1'),
              ),
              FloatingCenterButtonChild(
                child: const Icon(
                  Icons.access_alarm,
                  color: Colors.white,
                ),
                onTap: () => log('Item2'),
              ),
              FloatingCenterButtonChild(
                child: const Icon(
                  Icons.ac_unit_outlined,
                  color: Colors.white,
                ),
                onTap: () => log('Item3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Required Parameters

bottomBar:

此属性接收一个List<BottomBarItem>类型的列表，用于配置底部导航栏中的各个选项。

bottomBarCenterModel:

BottomBarCenterModel类是底部菜单的模型类。它接受icon、iconSelected、title、titleStyle等参数来定义中心按钮及其子项。

controller:

FloatingBottomBarController用于给底部导航栏设置初始索引，以预选某个项目。

Guideline for contributors

我们欢迎任何对仓库的贡献，请贡献者只向develop分支创建拉取请求。

Guideline to report an issue/feature request

如果您需要报告问题或提出功能请求，建议分享以下信息以便我们更好地理解问题的根源：

• 库版本
• 代码片段
• 日志（如果适用）
• 设备规格（如制造商、操作系统版本等）
• 展示问题重现步骤的截图或视频

LICENSE

该库遵循MIT许可证。

Let us know!

如果您有任何问题或关于我们工作的建议，或者您想分享使用我们组件的项目链接，请发送邮件至sales@mindinventory.com。