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

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

简单明了的底部导航栏。

安装

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

dependencies:
  flutter:
    sdk: flutter
  nav_bottom_bar: version

引入库

在 Dart 文件中引入 nav_bottom_bar 库：

import 'package:nav_bottom_bar/nav_bottom_bar.dart';

示例代码

以下是一个完整的示例代码，展示了如何使用 nav_bottom_bar 插件来创建一个底部导航栏。

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String body = "Home"; // 当前显示的页面文本
  int index = 0; // 当前选中的索引

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('示例应用'),
        ),
        body: Stack(
          children: [
            Center(
              child: Text(
                body,
                style: TextStyle(fontSize: 32),
              ),
            ),
            Positioned(
              // 调整按钮位置
              bottom: 15,
              child: NavBottomBar(
                showBigButton: true, // 是否显示大按钮
                bigIcon: Icons.add, // 大按钮图标
                currentIndex: index, // 当前选中的索引
                btnOntap: () {
                  setState(() {
                    body = "大按钮按下";
                  });
                },
                buttonPosition: ButtonPosition.end, // 大按钮位置
                children: [
                  NavIcon(
                    icon: Icons.home, // 首页图标
                    activecolor: Colors.red, // 激活颜色
                    onTap: () {
                      setState(() {
                        index = 0;
                        body = "首页";
                      });
                    },
                  ),
                  NavIcon(
                    icon: Icons.history, // 历史图标
                    activecolor: Colors.green, // 激活颜色
                    onTap: () {
                      setState(() {
                        index = 1;
                        body = "历史";
                      });
                    },
                  ),
                  NavIcon(
                    icon: Icons.notifications, // 通知图标
                    onTap: () {
                      setState(() {
                        index = 2;
                        body = "通知";
                      });
                    },
                  ),
                  NavIcon(
                    icon: Icons.person, // 个人中心图标
                    onTap: () {
                      setState(() {
                        index = 3;
                        body = "个人中心";
                      });
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}