Flutter自定义导航栏插件navigation_bar_milo的使用

特性

Navigation Bar Milo 提供了多种形状和模式。

开始使用

安装插件

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

dependencies:
  navigation_bar_milo: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

使用方法

首先，需要导入插件包：

import 'package:navigation_bar_milo/navigation_bar_milo.dart';

接下来，我们通过一个完整的示例展示如何使用 navigation_bar_milo 插件。

示例代码

以下是一个完整的示例代码，展示了如何使用 navigation_bar_milo 创建自定义导航栏：

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

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

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

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

class _MyAppState extends State<MyApp> {

  // 当前选中的 Tab 索引
  int tabIndex = 0;

  // 更新选中的 Tab 索引
  void updateIndex(int index){
    setState(() {
      tabIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BottomNavigationBarWidget(
      onTap: (index) => updateIndex(index), // 监听点击事件
      selectedItemColor: Colors.amber, // 选中项的颜色
      selectedItemIndex: tabIndex, // 当前选中的 Tab 索引
      selectedItemFontSize: 12, // 选中项字体大小
      unselectedItemFontSize: 12, // 非选中项字体大小
      backgroundBorderRadius: const BorderRadius.all(Radius.circular(12)), // 背景圆角
      outsidePadding: const EdgeInsets.symmetric(horizontal: 10), // 外部间距
      floatingButtonBorderColor: Colors.white, // 浮动按钮边框颜色
      floatingActionButton: SizedBox(
        height: 50,
        width: 50,
        child: FittedBox(
          child: FloatingActionButton(
            backgroundColor: Colors.black, // 浮动按钮背景颜色
            child: const Icon(Icons.add_rounded, size: 40), // 浮动按钮图标
            onPressed: () {}, // 按钮点击事件
          ),
        ),
      ),
      items: const [
        // 第一个 Tab 项
        BottomNavigationItem(
          selectedIcon: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Icon(Icons.home), // 选中状态下的图标
          ),
          unselectedIcon: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Icon(Icons.home, color: Colors.white,), // 非选中状态下的图标
          ),
          title: 'Hoje', // Tab 名称
        ),
        // 第二个 Tab 项
        BottomNavigationItem(
          selectedIcon: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Icon(Icons.home),
          ),
          unselectedIcon: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Icon(Icons.home, color: Colors.white,),
          ),
          title: 'Solicitações',
        ),
        // 第三个 Tab 项
        BottomNavigationItem(
          selectedIcon: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Icon(Icons.home),
          ),
          unselectedIcon: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Icon(Icons.home, color: Colors.white,),
          ),
          title: 'Relatórios',
        ),
        // 第四个 Tab 项
        BottomNavigationItem(
          selectedIcon: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Icon(Icons.home),
          ),
          unselectedIcon: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Icon(Icons.home, color: Colors.white,),
          ),
          title: 'Mais',
        ),
      ],
      child: const Column(), // 导航栏下方的内容区域
    );
  }
}