navbar_router 0.1.2

Pub

这是在考虑了现实世界应用的高级用例后创建的终极底部导航栏。该小部件以最少的代码和精力处理了处理以下功能的样板代码。您所要做的就是指定导航栏菜单项、路由和目标，其余的将由 navbar_router 处理。

功能

  • 更改导航栏目标时的平滑过渡
  • 能够将路由推入嵌套或根导航器
  • 在按下返回按钮时发出通知，以便像专业人士一样处理应用程序退出
  • 可以从 widget 树的任何部分以编程方式控制底部导航栏的状态，例如更改索引、隐藏/显示底部导航栏、弹出特定标签的路由等。
  • 在底部导航栏选项卡之间持久化状态
  • 点击相同的导航栏按钮会弹出到嵌套导航器的基础路由（与 Instagram 相同）
  • 以动画切换导航栏目标

这是一个使用此包构建的示例应用程序，以了解其工作原理。

示例应用的视频演示

navbar_route demo

此包将帮助您节省至少 50% 的代码行，并且仅需所需时间的一半即可实现上述功能。这是不使用该包的相同示例应用程序，它需要大约 800 行代码。

用法

添加到 pubspec.yaml

  navbar_router: ^0.1.2

示例

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

  List<NavbarItem> items = [
    NavbarItem(Icons.home, 'Home', backgroundColor: colors[0]),
    NavbarItem(Icons.shopping_bag, 'Products', backgroundColor: colors[1]),
    NavbarItem(Icons.person, 'Me', backgroundColor: colors[2]),
  ];

  final Map<int, Map<String, Widget>> _routes = const {
    0: {
      '/': HomeFeeds(),
      FeedDetail.route: FeedDetail(),
    },
    1: {
      '/': ProductList(),
      ProductDetail.route: ProductDetail(),
    },
    2: {
      '/': UserProfile(),
      ProfileEdit.route: ProfileEdit(),
    },
  };

  @override
  Widget build(BuildContext context) {
    return NavbarRouter(
      errorBuilder: (context) {
        return const Center(child: Text('Error 404'));
      },
      onBackButtonPressed: (isExiting) {
        return isExiting;
      },
      destinationAnimationCurve: Curves.fastOutSlowIn,
      destinationAnimationDuration: 600,
      decoration:
          NavbarDecoration(navbarType: BottomNavigationBarType.shifting),
      destinations: [
        for (int i = 0; i < items.length; i++)
          DestinationRouter(
            navbarItem: items[i],
            destinations: [
              for (int j = 0; j < _routes[i]!.keys.length; j++)
                Destination(
                  route: _routes[i]!.keys.elementAt(j),
                  widget: _routes[i]!.values.elementAt(j),
                ),
            ],
            initialRoute: _routes[i]!.keys.first,
          ),
      ],
    );
  }
}

功能分解

在导航栏目标之间进行淡入淡出

通过设置 destinationAnimationCurve 和 destinationAnimationDuration 属性，您可以在导航栏目标之间实现平滑的过渡。

默认为

  destinationAnimationCurve: Curves.fastOutSlowIn,
  destinationAnimationDuration: 700,

隐藏或显示底部导航栏

您可以从 widget 树的任何位置用一行代码隐藏或显示底部导航栏。这使您可以处理用例，例如向下滚动以隐藏导航栏或在打开抽屉时隐藏导航栏。

 NavbarNotifier.hideBottomNavBar = true;
滚动时隐藏/显示导航栏 抽屉打开/关闭时隐藏/显示导航栏

按下返回按钮时通知

navbar_router 提供了一个 onBackButtonPressed 回调来拦截来自 Android 返回按钮的事件。使您能够处理应用程序退出（例如，您可能希望实现双击返回按钮退出）。

实现双击返回按钮退出的示例代码

      onBackButtonPressed: (isExitingApp) {
        if (isExitingApp) {
          newTime = DateTime.now();
          int difference = newTime.difference(oldTime).inMilliseconds;
          oldTime = newTime;
          if (difference < 1000) {
            hideSnackBar();
            return isExitingApp;
          } else {
            showSnackBar();
            return false;
          }
        } else {
          return isExitingApp;
        }
      },

文档

destinations：一个 DestinationRouter 列表，当用户点击 [NavbarItem] 时显示。每个 DestinationRouter 指定一个目标列表、初始路由以及与该目标对应的导航栏项。

errorBuilder：当用户尝试导航到 [destinations] 中不存在的路由时显示给用户的 WidgetBuilder。

decoration：导航栏的装饰具有您在 [BottomNavigationBar] 中期望的所有属性，用于调整导航栏的样式。

onBackButtonPressed：一个函数，用于确定它是根导航器还是非根导航器。如果该方法返回 true，则导航器位于导航器堆栈的底部。

destinationAnimationCurve：用户点击导航栏项时目标的动画曲线。默认为 Curves.fastOutSlowIn。

destinationAnimationDuration：目标动画的持续时间（以毫秒为单位）。默认为 700 毫秒。

shouldPopToBaseRoute：一个布尔值，决定了当当前导航栏被深度嵌套时，点击导航栏按钮是否应该弹出到基础路由（弹出除第一个之外的所有内容）。此功能类似于 Instagram 的导航栏，默认为 true。

好奇 navbar_router 是如何工作的？

在medium 博文中阅读更多内容以获取详细解释。

贡献

欢迎贡献！有关如何贡献的更多详细信息，请参阅贡献指南

GitHub

查看 Github