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

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

本README描述了该包。如果你将此包发布到pub.dev，此README的内容将出现在你的包的首页。

对于如何编写一个好的包README，可以参考编写包页面指南。

对于开发包的一般信息，可以参考Dart指南的创建包和Flutter指南的开发包和插件。

这个Flutter插件提供了一个简单的导航栏，允许你为移动应用创建一个独特且视觉上吸引人的底部导航栏。它包括各种自定义选项，如不同的渐变用于激活和非激活图标，可调整的图标大小等。

特性

• 创建具有独特外观和感觉的自定义底部导航栏。
• 自定义激活和非激活图标的渐变。
• 调整激活和非激活图标的大小。
• 设置导航栏的初始选中索引。
• 使用渐变作为整个导航栏屏幕的背景。

开始使用

要在你的Flutter项目中使用此包，请按照以下步骤操作：

添加依赖

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

dependencies:
  easy_bottom_navbar: ^latestVersion

安装依赖

通过在终端运行flutter pub get来安装依赖项。

导入包

在你想要使用easy导航栏的Dart文件中导入包：

import 'package:easy_bottom_navbar/easy_bottom_navbar.dart';

现在你可以通过传递所需的参数（例如代表导航项的列表和图标列表）来创建一个GradientNavBar小部件的实例。

使用示例

下面是一个简单的例子来描述该包的使用方法：

// 导入必要的库
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Easy Navigation Bar Example'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GradientNavBar(
      // 列表表示每个导航项要显示的屏幕
      widgetList: [
        Screen1(),
        Screen2(),
        Screen3(),
      ],

      // 图标列表表示每个导航项的图标
      iconList: [
        Icons.home,
        Icons.search,
        Icons.person,
      ],

      // 自定义选项（可以根据需要进行修改）
      activeGradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          Color.fromRGBO(233, 210, 149, 1),
          Color.fromRGBO(255, 170, 87, 1),
          Color.fromRGBO(250, 97, 215, 1),
          Color.fromRGBO(253, 127, 176, 1),
        ],
      ),
      inactiveGradient: LinearGradient(
        colors: [
          Color.fromRGBO(79, 80, 123, 1),
          Color.fromRGBO(64, 65, 101, 1),
        ],
      ),
      activeIconSize: 38,
      inactiveIconSize: 35,
      initialIndex: 1,
      screenGradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [Color(0xFF252429), Color(0xFF171717)],
      ),
    );
  }
}

class Screen1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('Screen 1'),
    );
  }
}

class Screen2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('Screen 2'),
    );
  }
}

class Screen3 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('Screen 3'),
    );
  }
}