Flutter自定义底部导航栏指示器插件custom_line_indicator_bottom_navbar的使用

custom_line_indicator_bottom_navbar是一个完全可定制的底部导航栏插件，支持线性指示器和渐变效果。本文将介绍如何在Flutter项目中使用该插件。

插件功能

• 支持顶部或底部指示器
• 可以设置指示器的颜色、宽度等属性
• 支持渐变效果
• 自定义每个Tab的图标和标签

示例代码

1. 添加依赖

首先，在pubspec.yaml文件中添加插件依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_line_indicator_bottom_navbar: ^latest_version

记得替换^latest_version为最新的版本号。

2. 使用示例（无渐变）

以下是如何使用CustomLineIndicatorBottomNavbar组件而不应用渐变效果的示例：

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

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

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

class MyExample extends StatefulWidget {
  @override
  _MyExampleState createState() => _MyExampleState();
}

class _MyExampleState extends State<MyExample> {
  int _selectedIndex = 0; // 默认选中的索引

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

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

3. 使用示例（带渐变）

如果需要给指示器添加渐变效果，可以修改CustomLineIndicatorBottomNavbar组件的部分参数：

bottomNavigationBar: CustomLineIndicatorBottomNavbar(
  selectedColor: Colors.white,
  unSelectedColor: Colors.black54,
  backgroundColor: Colors.white,
  currentIndex: _selectedIndex,
  onTap: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  enableLineIndicator: true,
  lineIndicatorWidth: 3,
  indicatorType: IndicatorType.Top,
  gradient: LinearGradient(colors: [Colors.pink, Colors.yellow]),
  customBottomBarItems: [
    CustomBottomBarItems(label: 'Home', icon: Icons.home),
    CustomBottomBarItems(label: 'Account', icon: Icons.account_box_outlined),
    CustomBottomBarItems(label: 'Leaves', icon: Icons.calendar_today_outlined),
    CustomBottomBarItems(label: 'Loyalty', icon: Icons.card_giftcard_rounded),
    CustomBottomBarItems(label: 'Requests', icon: Icons.list),
  ],
)

总结

通过上述步骤，您可以轻松地在Flutter项目中集成一个带有自定义指示器的底部导航栏，并根据需求调整其样式。无论是简单的单色指示器还是复杂的渐变效果，都可以通过该插件实现。