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

本说明文档描述了如何使用flex_nav_bar插件。如果你将此包发布到pub.dev，此文档的内容会出现在你的包的首页。

简介

flex_nav_bar 是一个用于创建自定义底部导航栏的 Flutter 插件。它提供了丰富的配置选项，使开发者能够轻松地定制底部导航栏的外观和行为。

使用示例

以下是一个简单的示例，展示了如何使用 flex_nav_bar 创建一个底部导航栏。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RootPage(),
    );
  }
}

class RootPage extends StatefulWidget {
  const RootPage({super.key});

  [@override](/user/override)
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  final Color navigationBarColor = Colors.green;
  int selectedIndex = 0;
  late PageController pageController;

  [@override](/user/override)
  void initState() {
    super.initState();
    pageController = PageController(initialPage: selectedIndex);
  }

  List<Widget> pages = [
    // 首页
    Container(
      alignment: Alignment.center,
      child: Icon(
        Icons.home,
        size: 56,
        color: Colors.redAccent[400],
      ),
    ),
    // 收藏页
    Container(
      alignment: Alignment.center,
      child: Icon(
        Icons.favorite,
        size: 56,
        color: Colors.green[400],
      ),
    ),
    // 邮件页
    Container(
      alignment: Alignment.center,
      child: Icon(
        Icons.email,
        size: 56,
        color: Colors.blue[400],
      ),
    ),
    // 个人资料页
    Container(
      alignment: Alignment.center,
      child: Icon(
        Icons.person,
        size: 56,
        color: Colors.deepOrangeAccent[400],
      ),
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: PageView(
          physics: const NeverScrollableScrollPhysics(), // 禁止页面滑动
          controller: pageController,
          children: [pages[selectedIndex]], // 显示当前选中的页面
        ),
      ),
      bottomNavigationBar: FlexNavBarWidget(
        backgroundColor: Color(0XFF292929), // 导航栏背景颜色
        selectedTextColor: Colors.white, // 选中项文字颜色
        unSelectedTextColor: Colors.white, // 未选中项文字颜色
        waterDropColor: Colors.amber, // 水滴效果颜色
        inactiveIconColor: Colors.white, // 未选中项图标颜色
        selectedIndex: selectedIndex, // 当前选中的索引
        barItems: [
          BarItem(
            label: 'Home', // 项目标签
            filledIcon: Icons.bookmark_rounded, // 选中时的图标
            outlinedIcon: Icons.bookmark_border_rounded, // 未选中时的图标
          ),
          BarItem(
            label: 'Favorite',
            filledIcon: Icons.favorite_rounded,
            outlinedIcon: Icons.favorite_border_rounded,
          ),
          BarItem(
            label: 'Email',
            filledIcon: Icons.email_rounded,
            outlinedIcon: Icons.email_outlined,
          ),
          BarItem(
            label: 'Profile',
            filledIcon: Icons.folder_rounded,
            outlinedIcon: Icons.folder_outlined,
          ),
        ],
        onItemSelected: (int index) { // 选择项回调
          setState(() {
            selectedIndex = index;
          });
          pageController.animateToPage(
            selectedIndex,
            duration: const Duration(milliseconds: 10),
            curve: Curves.easeOutCubic,
          );
        },
      ),
    );
  }
}

代码解析

导入依赖：

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

创建主应用类：
```
void main() => runApp(MyApp());
```

创建根页面类：

class RootPage extends StatefulWidget {
  const RootPage({super.key});

  [@override](/user/override)
  State<RootPage> createState() => _RootPageState();
}

初始化状态：

class _RootPageState extends State<RootPage> {
  final Color navigationBarColor = Colors.green;
  int selectedIndex = 0;
  late PageController pageController;

  [@override](/user/override)
  void initState() {
    super.initState();
    pageController = PageController(initialPage: selectedIndex);
  }

创建页面列表：

List<Widget> pages = [
  Container(
    alignment: Alignment.center,
    child: Icon(
      Icons.home,
      size: 56,
      color: Colors.redAccent[400],
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: Icon(
      Icons.favorite,
      size: 56,
      color: Colors.green[400],
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: Icon(
      Icons.email,
      size: 56,
      color: Colors.blue[400],
    ),
  ),
  Container(
    alignment: Alignment.center,
    child: Icon(
      Icons.person,
      size: 56,
      color: Colors.deepOrangeAccent[400],
    ),
  ),
];

构建页面：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: PageView(
        physics: const NeverScrollableScrollPhysics(),
        controller: pageController,
        children: [pages[selectedIndex]],
      ),
    ),
    bottomNavigationBar: FlexNavBarWidget(
      backgroundColor: Color(0XFF292929),
      selectedTextColor: Colors.white,
      unSelectedTextColor: Colors.white,
      waterDropColor: Colors.amber,
      inactiveIconColor: Colors.white,
      selectedIndex: selectedIndex,
      barItems: [
        BarItem(
          label: 'Home',
          filledIcon: Icons.bookmark_rounded,
          outlinedIcon: Icons.bookmark_border_rounded,
        ),
        BarItem(
          label: 'Favorite',
          filledIcon: Icons.favorite_rounded,
          outlinedIcon: Icons.favorite_border_rounded,
        ),
        BarItem(
          label: 'Email',
          filledIcon: Icons.email_rounded,
          outlinedIcon: Icons.email_outlined,
        ),
        BarItem(
          label: 'Profile',
          filledIcon: Icons.folder_rounded,
          outlinedIcon: Icons.folder_outlined,
        ),
      ],
      onItemSelected: (int index) {
        setState(() {
          selectedIndex = index;
        });
        pageController.animateToPage(
          selectedIndex,
          duration: const Duration(milliseconds: 10),
          curve: Curves.easeOutCubic,
        );
      },
    ),
  );
}

更多关于Flutter底部导航栏插件flex_nav_bar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼

更多关于Flutter底部导航栏插件flex_nav_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter中使用flex_nav_bar插件来实现底部导航栏的示例代码。flex_nav_bar是一个流行的Flutter包，用于创建灵活且高度可定制的底部导航栏。

首先，确保你已经在pubspec.yaml文件中添加了flex_nav_bar依赖：

dependencies:
  flutter:
    sdk: flutter
  flex_nav_bar: ^x.y.z  # 请替换为最新版本号

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

接下来是示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlexNavBar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    Text('Home Page'),
    Text('Search Page'),
    Text('Profile Page'),
    Text('Settings Page'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlexNavBar Demo'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: FlexNavBar(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        items: [
          FlexNavBarItem(
            icon: Icons.home,
            title: Text('Home'),
          ),
          FlexNavBarItem(
            icon: Icons.search,
            title: Text('Search'),
          ),
          FlexNavBarItem(
            icon: Icons.person,
            title: Text('Profile'),
          ),
          FlexNavBarItem(
            icon: Icons.settings,
            title: Text('Settings'),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        color: Colors.blue,
        selectedColor: Colors.white,
        unselectedColor: Colors.grey,
        iconSize: 24,
        labelStyle: TextStyle(fontSize: 12),
      ),
    );
  }
}

代码解释：

依赖添加：确保在pubspec.yaml文件中添加了flex_nav_bar依赖。
主应用入口：MyApp类是一个无状态组件，定义了应用的主题和主页。
主页：MyHomePage是一个有状态组件，用于管理导航栏的当前选中项。
导航项：在_MyHomePageState类中，我们定义了一个_widgetOptions列表，其中包含不同页面的内容（在这个示例中，只是简单的文本）。
FlexNavBar：在Scaffold的bottomNavigationBar属性中，我们使用了FlexNavBar。你可以通过items属性传递一个FlexNavBarItem列表，每个FlexNavBarItem包含一个图标和一个标题。
事件处理：onTap回调函数用于处理导航栏项的点击事件，更新当前选中的索引，并重新构建UI以显示相应的页面。
样式：你可以通过color、selectedColor、unselectedColor、iconSize和labelStyle等属性来自定义导航栏的样式。

这个示例展示了如何使用flex_nav_bar插件来创建一个简单且功能齐全的底部导航栏。根据你的需求，你可以进一步自定义和扩展这个示例。