Flutter底部导航栏插件awesome_bottom_bar的使用

简介

awesome_bottom_bar 是一个用于Flutter的底部导航栏插件，提供了多种风格和动画效果。以下是如何在你的Flutter项目中使用这个插件。

插件安装

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

dependencies:
  awesome_bottom_bar: any

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

接下来，在你的 Dart 文件中导入该插件：

import 'package:awesome_bottom_bar/awesome_bottom_bar.dart';
import 'package:awesome_bottom_bar/widgets/inspired/inspired.dart';

示例代码

以下是一个完整的示例代码，展示如何使用 awesome_bottom_bar 插件来创建一个带有多种风格的底部导航栏。

import 'package:flutter/material.dart';
import 'package:awesome_bottom_bar/awesome_bottom_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(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int visit = 0;
  double height = 30;
  Color colorSelect = const Color(0XFF0686F8);
  Color color = const Color(0XFF7AC0FF);
  Color color2 = const Color(0XFF96B1FD);
  Color bgColor = const Color(0XFF1752FE);

  static const List<TabItem> items = [
    TabItem(icon: Icons.home),
    TabItem(icon: Icons.search_sharp, title: 'Shop'),
    TabItem(icon: Icons.favorite_border, title: 'Wishlist'),
    TabItem(icon: Icons.shopping_cart_outlined, title: 'Cart'),
    TabItem(icon: Icons.account_box, title: 'Profile'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(vertical: 20),
        child: Column(
          children: [
            SizedBox(height: height),
            BottomBarInspiredOutside(
              items: items,
              backgroundColor: bgColor,
              color: color2,
              colorSelected: Colors.white,
              indexSelected: visit,
              onTap: (int index) => setState(() {
                visit = index;
              }),
              top: -25,
              animated: true,
              itemStyle: ItemStyle.hexagon,
              chipStyle: const ChipStyle(drawHexagon: true),
            ),
            SizedBox(height: height),
            BottomBarCreative(
              items: items,
              backgroundColor: Colors.green.withOpacity(0.21),
              color: color,
              colorSelected: colorSelect,
              indexSelected: visit,
              onTap: (int index) => setState(() {
                visit = index;
              }),
            ),
            SizedBox(height: height),
            BottomBarDefault(
              items: items,
              backgroundColor: Colors.green,
              color: Colors.white,
              colorSelected: Colors.orange,
              onTap: (int index) => setState(() {
                visit = index;
              }),
            ),
            SizedBox(height: height),
            BottomBarFloating(
              items: items,
              backgroundColor: bgColor,
              color: color2,
              colorSelected: Colors.white,
              indexSelected: visit,
              onTap: (int index) => setState(() {
                visit = index;
              }),
            ),
          ],
        ),
      ),
      bottomNavigationBar: Container(
        padding: const EdgeInsets.only(bottom: 30, right: 32, left: 32),
        child: BottomBarFloating(
          items: items,
          backgroundColor: Colors.green,
          color: Colors.white,
          colorSelected: Colors.orange,
          indexSelected: visit,
          paddingVertical: 24,
          onTap: (int index) => setState(() {
            visit = index;
          }),
        ),
      ),
    );
  }
}

使用说明

添加TabItem

在上面的示例中，我们定义了一个 List<TabItem>，每个 TabItem 包含一个图标和可选的标题：

static const List<TabItem> items = [
  TabItem(icon: Icons.home),
  TabItem(icon: Icons.search_sharp, title: 'Shop'),
  TabItem(icon: Icons.favorite_border, title: 'Wishlist'),
  TabItem(icon: Icons.shopping_cart_outlined, title: 'Cart'),
  TabItem(icon: Icons.account_box, title: 'Profile'),
];

创建不同的底部导航栏样式

你可以选择不同的底部导航栏样式，例如 BottomBarInspiredOutside、BottomBarCreative、BottomBarDefault 和 BottomBarFloating。每个样式都有自己的参数，如背景颜色、未选中颜色、选中颜色等。

处理点击事件

通过 onTap 回调函数处理用户点击事件，并更新当前选中的索引：

onTap: (int index) => setState(() {
  visit = index;
}),

结论

awesome_bottom_bar 提供了丰富的底部导航栏样式和动画效果，可以满足不同应用的需求。更多详细信息和高级用法，请参考 官方GitHub仓库。

如果你遇到任何问题或有改进建议，欢迎在 GitHub Issues 上提交。