Let’s Talk About Flutter State Management In Navigation

Although the example is for my own Designer Folio, the techniques also work for both desktop and mobile applications. I am going to show how to think about this atomically, and the actual example is navigation.

The Navigation Example

In both web, desktop, and mobile apps we have the problem of how we show the navigation being chosen as indicated by a color change on the button that stays that color. But, how do we do that for both navigation rail, navigation bars, and other buttons?

This is where we think atomically, in that we can re-purpose the ListView builder for this purpose, as that can be rendered in the vertical and horizontal directions. Thus, we can create a custom listview that builds the correct navigational atomic unit already set up to maintain navigation color indication states.

This is the exact Flutter Widget and OOP knowledge use you need to master in crafting the UX to tell the brand story. And, yes, this is why I prefer to manually implement the adaptive and responsive scaffold pattern as these state management tricks then become central to those adaptive and responsive scaffold solutions.

The idea here is not to change the color of the icon or text, but to change the color of the container enclosing the navigation…