Flutter底部导航栏带指示器插件bottom_navbar_with_indicator的使用

bottom_navbar_with_indicator 是一个Flutter包，用于创建带有线条指示器和渐变效果的完全可自定义的底部导航栏。它允许创建包含任何自定义小部件（无状态或有状态）的底部栏，并且具有非常流畅的动画效果，支持Android、iOS、WebApp和DesktopApp。

安装

要安装此包，请按照以下步骤操作：

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

   dependencies:
     bottom_navbar_with_indicator: ^latest_version # 请将 latest_version 替换为最新版本号
   

2. 或者在项目根目录下运行命令：

   flutter pub add bottom_navbar_with_indicator
   

3. 在您的Dart文件中导入包：

   import 'package:bottom_navbar_with_indicator/bottom_navbar_with_indicator.dart';
   

使用示例

不带渐变的底部导航栏

下面是一个不带渐变效果的底部导航栏的完整示例代码：

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyExample(),
    );
  }
}

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

  @override
  _MyExampleState createState() => _MyExampleState();
}

class _MyExampleState extends State<MyExample> {
  int _selectedIndex = 0; // 默认索引
  static const String basePath = "assets/images";
  static const String accountImage = "$basePath/account.png";

  final List<Widget> _widgetOptions = [
    const Text('Home'),
    const Text('Account'),
    const Text('Leaves'),
    const Text('Loyalty'),
    const Text('Requests'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: CustomLineIndicatorBottomNavbar(
        selectedColor: Colors.blue,
        unSelectedColor: Colors.black54,
        backgroundColor: Colors.white,
        currentIndex: _selectedIndex,
        unselectedIconSize: 15,
        selectedIconSize: 20,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        enableLineIndicator: true,
        lineIndicatorWidth: 3,
        indicatorType: IndicatorType.top,
        customBottomBarItems: [
          CustomBottomBarItems(
            label: 'Home',
            icon: Icons.home,
            isAssetsImage: false,
          ),
          CustomBottomBarItems(
            label: 'Account',
            assetsImagePath: accountImage,
            isAssetsImage: true,
          ),
          CustomBottomBarItems(
            label: 'Leaves',
            icon: Icons.calendar_today_outlined,
            isAssetsImage: false,
          ),
          CustomBottomBarItems(
            label: 'Loyalty',
            icon: Icons.card_giftcard_rounded,
            isAssetsImage: false,
          ),
          CustomBottomBarItems(
            label: 'Requests',
            assetsImagePath: accountImage,
            isAssetsImage: true,
          ),
        ],
      ),
    );
  }
}

带渐变的底部导航栏

如果您希望使用带有渐变效果的底部导航栏，只需取消注释并配置 gradient 属性即可：

CustomLineIndicatorBottomNavbar(
  ...
  gradient: LinearGradient(
    colors: [Colors.pink, Colors.yellow],
  ),
  ...
)

构造函数参数说明

通过这些配置选项，您可以根据需要自定义底部导航栏的外观和行为。