Smart / Dumb Components in Flutter

The un-opinionated nature of flutter gives room to apply almost any pattern you want. Coming from an angular background I am used to working with the Smart Components (Container) and Dumb Components (Presentation) strategy, in almost all my projects. So it felt natural for me to attempt to apply this paradigm to my flutter projects. What follows is the outcome of my experimentation on this topic.

Disclaimer: I use this pattern because it feels natural to me, this may not be the case for someone else. This article is about how to implement it in flutter and not to advocate in favor or against it.

The Dumb Component (Presentation)

The characteristics of dumb components:

• It should not hold any state
• It should only use provided values
• It should emit events or call callback functions

Simple right lets see how we can implement the above requirements in a flutter widget.

Let’s say that our dumb component is only responsible to show a list of Stringvalues and notify the container when the user selects one of them. The code looks like this:

The Smart Component (Container)

The characteristics of smart components:

• Should hold state
• Should be composed of one or more dumb components
• Should provide the state as input to its dumb components
• Should respond to events or callbacks from the dumb components

This screams for a StatefulWidgetwhich holds the list state and provides it to the ListPresentation widget. It should also provide anItemSelectedCallback in order to respond to the selection of an item in the list.

The above example is a fairly simple one, but it can be applied to a lot of cases in a mobile app. More tricky is the application to a dumb form component, but it can be done. More on this in an upcoming post.

(FROM Efthymis’ Blog)