Widget View Pattern Towards Clean Architecture

Flutter is a little different from some native front-end frameworks in that a stateful view is its own separate bigger view from the stateless view. One of the methods we can use to separate out the layout from the logic is just encapsulating the state and logic differently from the layout.

Why Should We Do This

Why should we do this? With complicated screens taking up in LoC counts of 200 to 500 lines of code with multiple builders, it becomes somewhat difficult to at a glance understand what the code for that screen is doing.

And, it’s an easy way to use abstraction and generics before you get to starting to learn such things as Bloc, Provider, Get, and or MobX.

The Implementation

The same code is in this repo:

GitHub - fredgrott/viewmodel_playground: flutter view model playground

And the implementation is: