Flutter自定义底部导航栏插件awesome_bottom_bar_custom的使用

在Flutter开发中，awesome_bottom_bar_custom 是一个非常强大的插件，用于创建高度可定制的底部导航栏。通过此插件，您可以轻松地实现具有不同样式的底部导航栏，并根据需求进行个性化设置。

插件功能概览

awesome_bottom_bar_custom 提供了丰富的配置选项，包括但不限于：

• 自定义图标和标题。
• 支持多种样式（如圆形、凸面等）。
• 动画效果可开启或关闭。
• 颜色和背景颜色的自由搭配。

以下是一个完整的示例代码，展示如何使用 awesome_bottom_bar_custom 创建自定义底部导航栏。

示例代码

1. 引入依赖

首先，在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  awesome_bottom_bar_custom: ^版本号
  flutter_svg: ^版本号

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

2. 示例代码

// example/lib/main.dart
import 'package:awesome_bottom_bar_custom/widgets/inspired/inspired.dart';
import 'package:flutter/material.dart';
import 'app_colors.dart';
import 'app_icons.dart';
import 'package:awesome_bottom_bar_custom/awesome_bottom_bar_custom.dart';
import 'package:flutter_svg/svg.dart';

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

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

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

class _MyAppState extends State<MyApp> {

  int index = 2; // 当前选中的索引

  // 点击事件处理函数
  changeIndex(int i){
    setState(() {
      index = i;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('awesome_bottom_bar_custom 示例'),
        ),
        body: Center(
          child: Text('当前页面索引: $index'),
        ),
        bottomNavigationBar:
          BottomBarInspiredOutside(
            items: getItems(index), // 设置导航项
            backgroundColor: AppColors.white, // 背景颜色
            color: AppColors.hintFormColor, // 未选中图标的颜色
            titleStyle: TextStyle(color: AppColors.hintFormColor, fontSize: 10), // 未选中标题的样式
            colorSelected: AppColors.gradientEndButtonColor, // 选中图标的颜色
            indexSelected: index, // 当前选中的索引
            height: 55, // 导航栏高度
            onTap: (int i) => changeIndex(i), // 点击事件回调
            animated: false, // 是否启用动画
            duration: const Duration(microseconds: 0), // 动画持续时间
            top: -20, // 调整顶部位置
            itemStyle: ItemStyle.circle, // 图标样式（圆形）
            sizeInside: 50, // 图标大小
            chipStyle: const ChipStyle( // 芯片样式
              notchSmoothness: NotchSmoothness.sharpEdge, // 尖锐边缘
              color: AppColors.white, // 芯片颜色
              background: AppColors.gradientEndButtonColor, // 芯片背景颜色
            ),
          )
      ),
    );
  }

  // 获取导航栏的 TabItem 列表
  List<TabItem> getItems(int index) {
    return [
      TabItem(
        icon: SvgPicture.asset(
          AppIcons.profile,
          color: index == 0 ? AppColors.white : AppColors.hintFormColor,
          theme: SvgTheme(currentColor: index == 0 ? AppColors.mainTextColorBlue : AppColors.hintFormColor),
        ),
        title: 'profile',
      ),
      TabItem(
        icon: SvgPicture.asset(
          AppIcons.appointments,
          color: index == 1 ? AppColors.white : AppColors.hintFormColor,
          theme: SvgTheme(currentColor: index == 1 ? AppColors.mainTextColorBlue : AppColors.hintFormColor),
        ),
        title: 'appointments',
      ),
      TabItem(
        icon: SvgPicture.asset(
          AppIcons.home,
          color: index == 2 ? AppColors.white : AppColors.hintFormColor,
          theme: SvgTheme(currentColor: index == 2 ? AppColors.mainTextColorBlue : AppColors.hintFormColor),
        ),
        title: 'Home',
      ),
      TabItem(
        icon: SvgPicture.asset(
          AppIcons.notifications,
          color: index == 3 ? AppColors.white : AppColors.hintFormColor,
          theme: SvgTheme(currentColor: index == 3 ? AppColors.mainTextColorBlue : AppColors.hintFormColor),
        ),
        title: 'notifications',
      ),
      TabItem(
        icon: SvgPicture.asset(
          AppIcons.settings,
          color: index == 4 ? AppColors.white : AppColors.hintFormColor,
          theme: SvgTheme(currentColor: index == 4 ? AppColors.mainTextColorBlue : AppColors.hintFormColor),
        ),
        title: 'settings',
      ),
    ];
  }
}