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

Overview

fancy_bottom_navigation_plus 是一个用于 Flutter 应用程序的底部导航栏插件。它提供了丰富的自定义选项，可以轻松地为您的应用添加美观且功能强大的底部导航栏。

特点

• 支持 2 到 5 个标签页
• 自定义图标、标题、颜色等
• 简单易用的 API

安装

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

dependencies:
  ...
  fancy_bottom_navigation_plus: ^1.0.3

基本用法

添加底部导航栏

在 Scaffold 中添加 FancyBottomNavigationPlus 小部件：

bottomNavigationBar: FancyBottomNavigationPlus(
  tabs: [
    TabData(icon: const Icon(Icons.home), title: "Home"),
    TabData(icon: const Icon(Icons.history), title: "History"),
    TabData(icon: const Icon(Icons.search), title: "Search"),
    TabData(icon: const Icon(Icons.phone), title: "Phone"),
    TabData(icon: const Icon(Icons.settings), title: "Settings"),
  ],
  onTabChangedListener: (position) {
    setState(() {
      currentPage = position;
    });
  },
)

TabData

TabData 是用于定义每个标签页的数据结构，包含以下属性：

• icon - 用于标签页的图标小部件
• title - 用于标签页的标题字符串
• onClick - 可选函数，当点击活动标签页的圆圈时调用

可选参数

FancyBottomNavigationPlus 还支持以下可选参数：

• initialSelection - 默认值为 0，表示初始选中的标签页
• circleColor - 圆圈的颜色，默认从主题中获取
• textColor - 文本的颜色，默认从主题中获取
• barBackgroundColor - 导航栏的背景颜色，默认从主题中获取
• barHeight - 导航栏的高度，默认为 60
• circleRadius - 圆圈的半径，默认为 60
• shadowRadius - 阴影的半径，默认为 10
• circleOutline - 圆圈的轮廓，默认为 10
• titleStyle - 标题的样式，默认值已给出
• key - 默认为 null

主题

导航栏会尝试使用当前的主题，但您可以根据需要进行自定义。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 FancyBottomNavigationPlus：

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int currentPage = 0;

  Center? _getPage(int page) {
    switch (page) {
      case 0:
        return Center(
          child: Text("Welcome to Home page"),
        );
      case 1:
        return Center(
          child: Text("Welcome to History page"),
        );
      case 2:
        return Center(
          child: Text("Welcome to Search page"),
        );
      case 3:
        return Center(
          child: Text("Welcome to Phone page"),
        );
      case 4:
        return Center(
          child: Text("Welcome to Settings page"),
        );
      default:
        return Center(
          child: Text("Welcome to $page page"),
        );
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.purple,
        iconTheme: const IconThemeData(
          color: Colors.white,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Fancy Bottom Navigation'),
          backgroundColor: Colors.purple,
        ),
        body: _getPage(currentPage),
        bottomNavigationBar: FancyBottomNavigationPlus(
          barBackgroundColor: Colors.purple,
          tabs: [
            TabData(icon: const Icon(Icons.home), title: "Home"),
            TabData(icon: const Icon(Icons.history), title: "History"),
            TabData(icon: const Icon(Icons.search), title: "Search"),
            TabData(icon: const Icon(Icons.phone), title: "Phone"),
            TabData(icon: const Icon(Icons.settings), title: "Settings"),
          ],
          onTabChangedListener: (position) {
            setState(() {
              currentPage = position;
            });
          },
        ),
      ),
    );
  }
}

展示

如果您在实际应用中使用了这个插件，请告诉我，我会在这里展示您的应用。

致谢

这个插件受到了 fancy_bottom_navigation 的启发。

提交问题

如果您发现任何问题或有改进建议，请提交 issue。

贡献

欢迎贡献代码，请提交 PR。

希望这个插件能帮助您创建出更加美观和功能强大的 Flutter 应用程序！