The WidgetView Pattern In The Flutter Skeleton Template

What sucks about the Skeleton App Template introduced in Flutter 2.5 is that it’s missing some core best practices. Some of those are on the project dev-ops side, some are on the app architecture side, and some are on the UX best practices side.

You cannot build the awesome UI transitions triggered by app state changes or user actions until you architecture your app to do real state management. Part of the is correctly separating layers.

Let me break it down for you.

State Management Background

This is the app state:

And there are some nodes of interest. Computed state node is what our UseCase’s compute as far as state triggered changes. The display node is the state change interactions in the controller code structures. It is beneficial in architecting an app to have those two nodes grouped by features.

We do it in use cases by grouping the use cases per screen or per view-model. But how do we group it by features on the UI code side?

We can make that easier if we separate the widget layout from our code view…