By WalkingTree   October 14th,  2020

Navigation in Flutter – Why Hierarchical Routing Makes Navigation Seamles

There is a constant need to add new features to apps. This is not easy, as integrating new screens within an existing structure can cause technical bottlenecks. How do you fix this? By observing the implementation of routing between screens and working on it.

Consider an app that requires its users to enter data to create a profile. Such an app will have a sequence of steps. The code for such an app will be pretty straightforward. It will have a “continue” button click listener, a repository to store data after clicking on submit, and other things.

What causes navigation issues?

The issue of navigation arises when users need to edit data. A direct solution would be to have each screen support a different mode. As such each time a user clicks “continue”, the mode saves the data and updates the partial change. 

The problem is, this approach adds more dependencies which leads to the tight coupling of individual screens. This can be a major concern in big projects. 

Breaking the tight coupling of individual screens

The simple solution would be to abstract the exit points. This transfers the responsibility of deciding what action to take after the user makes edits. Developers can do this by adding a listener such as ScreenListerner or InteractionListerner suffix. They can pass these listeners through an ancestor state which keeps track of its child.

The Ancestor state has part of the decision making power. However, by doing this, there is a chance that we’re mixing the presentation and navigation logic. Developers can separate these by using a flow controller design pattern.

The flow controller design pattern lets us see groups of related screens that represent a single flow. Such hierarchical routing makes things convenient as it becomes easier to create an “empty” ancestor that is solely responsible for displaying the appropriate screen.

More importantly, this makes navigation so much more manageable by introducing scoped navigation logic. A scoped navigation logic is a place, within each flow, that contains the complete flow description. This includes the order and condition in which screens get displayed, the gathered data, and animations.

This does more than just provide a clear picture of everything. It allows for easy sharing and editing. Another aspect that makes managing a flow-scoped navigation stack easy are the widgets. Mainly that the stack contains only those widgets related to the stack flow. This reduces the risks that come with trivial stack manipulations and also reduce the probability of mistakes.

Read on to understand how to code such a flow using Flutter.

Blogs

Translate »