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

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

Aqua Nav Bar Flutter插件为您的Flutter应用程序提供了一个漂亮且可定制的导航栏。它具有流畅的动画效果，现代的设计风格，使其成为增强应用用户体验的理想选择。

截图

特性

• 美丽且现代的设计。
• 平滑且流畅的动画效果。
• 可自定义的颜色、图标和标签。
• 支持iOS和Android平台。
• 轻松集成到现有的Flutter项目中。

安装

要使用Aqua_Nav_Bar插件，请按照以下步骤操作：

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

dependencies:
  aqua_nav_bar: <最新版本>

1. 运行以下命令以获取插件：

flutter pub get

1. 在Dart代码中导入插件：

import 'package:aqua_nav_bar/aqua_nav_bar.dart';

使用

要在Flutter应用中使用Aqua_Nav_Bar，请参考以下示例代码：

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 导航页列表
  final _navPages = [
    const ItemOne(),
    const ItemTwo(),
    const ItemThree()
  ];

  // 当前选中的索引
  int currentIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      // 底部导航栏
      bottomNavigationBar: AquaNavBar(
        currentIndex: currentIndex,
        textSize: 15.0,
        activeColor: Colors.blueAccent,
        onItemSelected: (index) {
          setState(() {
            currentIndex = index;
          });
        },
        barItems: [
          BarItem(
              title: "首页",
              icon: const Icon(
                Icons.home,
                size: 30.0,
              )),
          BarItem(
              title: "设置",
              icon: const Icon(
                Icons.settings,
                size: 30.0,
              )),
          BarItem(
              title: "个人资料",
              icon: const Icon(
                Icons.person,
                size: 30.0,
              ))
        ],
      ),
      body: SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: _navPages[currentIndex],
      ),
    );
  }
}

// 第一个页面
class ItemOne extends StatelessWidget {
  const ItemOne({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.pink,
      child: const Center(
        child: Text(
          "第一页",
          style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

// 第二个页面
class ItemTwo extends StatelessWidget {
  const ItemTwo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: const Center(
        child: Text(
          "第二页",
          style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

// 第三个页面
class ItemThree extends StatelessWidget {
  const ItemThree({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: const Center(
        child: Text(
          "第三页",
          style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}