Navigation patterns for flutter are hard. And this is a scenario I stumbled upon and couldn’t find an agreed upon pattern to handle, so I made up one.

颤振的导航模式很困难。 这是我偶然发现的一个场景，找不到可以处理的商定模式，所以我组成了一个场景。

The scenario is this: You want to navigate to some “Views” of the app, and keep track of the current “View” for usage on some widget outside that view.

场景是这样的：您想要导航到应用程序的某些“视图”，并跟踪当前“视图”以在该视图之外的某些小部件上使用。

In my case, it was the BottomNavigatonVar that needs to constantly have its currentIndex parameter updated to the correct menu item we are viewing.

就我而言，正是BottomNavigatonVar需要不断将其currentIndex参数更新为我们正在查看的正确菜单项。

To solve this, we have 3 issues to tackle:

为了解决这个问题，我们要解决3个问题：

1. Set a central place for the currentView state.

   为currentView状态设置一个中心位置。

2. Update the currentView state whenever navigating to a new “View”.

   导航到新的“视图”时，请更新currentView状态。

3. Update the currentView state whenever user hit “back” (Which is not active navigation, as the widget will not rebuild).

   每当用户单击“后退”时将更新currentView状态(这不是活动的导航，因为小部件将不会重建)。

国家管理 (State management)

For a central place for the state, I chose to use BLoC provider, that will wrap my entire application.

对于州的中心位置，我选择使用BLoC提供程序，它将包装我的整个应用程序。

As changing the currentView state will probably happen all around the app, we need something better than simple StatefulWidget . I chose BLoC, but really, Provider, RXDart or whatever is your favorite state management will work.

由于更改currentView状态可能会在整个应用程序中发生，因此我们需要比简单的StatefulWidget更好的东西。 我选择了BLoC，但实际上， Provider ， RXDart或您最喜欢的状态管理都可以。

导航到新的“视图”时更新状态 (Updating state when navigating to new “View”)

In my opinion the routing functions are the best place to update the currentView state. That way, you guarantee to have it happen when a routing is actively occurring.

在我看来，路由功能是更新currentView状态的最佳位置。 这样，您可以保证在路由活动中积极进行路由。

Updating the state in other places, for example, when the “View” widget is building, is prone to bugs as the widget might rebuild even without new routing occurring.

在其他地方更新状态，例如在构建“视图”窗口小部件时，很容易出现错误，因为即使没有发生新的路由，窗口小部件也可能会重建。

用户返回时的更新状态(导航弹出窗口) (Updating state when user goes back (navigation pop))

We need to “go back” a state whenever the user hits “back”. For that we will use the WillPopScope widget wrapping our app. Using onWillPop parameter to update the state accordingly.

每当用户点击“返回”时，我们都需要“返回”状态。 为此，我们将使用包装我们的应用程序的WillPopScope小部件。 使用onWillPop参数来相应地更新状态。

历史数据结构 (Data structure for the history)

We want to keep track of the history as a whole, for pushing new routes and being able to pop and go back to old routes state.

我们希望跟踪整个历史，以便推动新路线并能够弹出并返回到旧路线状态。

That calls for a stack. Unsurprisingly, if you will look at Navigator implementation you’ll see they use _historystack (implemented through List) internally exactly for this purpose.

那需要堆栈。 毫不奇怪，如果您看一下Navigator实现，您会发现它们完全在内部使用_history堆栈(通过List实现)来实现此目的。

Our implementation will be similar, but limited to our scope. Instead of logging all route changes, we will log only those we care about and in format easy for us.

我们的实现将类似，但仅限于我们的范围。 除了记录所有路线更改之外，我们仅记录我们关心的内容并以易于使用的格式记录。

给我看代码 (Show me the code)

集团集团 (The bloc class)

Several things to address here:

这里要解决的几件事：

• The event enum is an enum that list the possible routes and additional special event go_back that speaks for itself.

  事件枚举是一个枚举，它列出了可能的路线以及说明自己的其他特殊事件go_back 。

• Having this enum separated from the routes code itself is an advantage, as it allows more flexibility for whatever usage you need. For example, having multiple app routes map to a single “View” enum.将此枚举与路由代码本身分开是一个优点，因为它可以为您所需的任何用法提供更大的灵活性。 例如，具有多个应用程序路线映射到单个“视图”枚举。
• The event handling is pretty basic for readability. But this is the place to add code that will reject adding what is already the current route to the history, if that’s something you need.对于可读性而言，事件处理是非常基本的。 但这是添加代码的地方，如果需要的话，该代码将拒绝添加到历史记录的当前路径。

路由到新路线 (Routing to a new route)

Within the routing, we want to issue a bloc event for the appropriate view. that will look like this:

在路由中，我们要为适当的视图发出bloc事件。 看起来像这样：

BlocProvider.of<CurrentViewBloc>(context).add(ViewOptions.home);

Say you are using fluro for navigation in your app, that means having this as the first step of the handlerFunc. Like this:

假设您在应用程序中使用fluro进行导航，这意味着将其作为handlerFunc的第一步。 像这样：

初始化块，路由返回处理 (Initializing the bloc, routing back handling)

We need to initialize the bloc state, and coincidentally here I also take care of the route pop case.

我们需要初始化bloc状态，巧合的是，在这里我还要注意route pop的情况。

This should wrap the part of the app that is relevant for this routing. It can be on top of the entire application if your case necessitates that.

这应该包装与该路由相关的应用程序部分。 如果您的情况需要，它可以位于整个应用程序的顶部。

Thats it.

而已。

Pretty basic, but there are some tricks here that are nice to have in one place — using onWillPop , replicate a local history stack (I spent some time thinking Navigation reveals something like that, and that would have been a better way. But they don’t, _history is private) etc’ etc’.Hope it has been useful for you.

很简单，但是这里有一些技巧很不错，可以使用一个地方-使用onWillPop ，复制本地历史记录堆栈(我花了一些时间认为Navigation显示类似的东西，这本来是更好的方法。 't， _history是私有的)等'等'。希望它对您很有用。