StatefulWidget’s Key & State

An in-depth look at Flutter’s StatefulWidget and its Lifecycle.

You’re going to use StatefulWidget’s. If you're going to use Flutter, you’re going to use StatefulWidget’s. A lot of them. Together. One on top of the other. It’s inevitable. As you learn Flutter more and more, your apps will get more complicated…with more Widgets. More StatefulWidgets. A Stateless widget never changes. A Stateful widget can change in response to user interactions or other events. This widget’s ‘state’ is represented by a separate class object called, well… State. The State object consists of values that can change. The State object contains its associated widget’s ‘mutable state.’ — it stores values that can change over time. When those values have changed, more often than not, the associated StatefulWidget is re-created.

Learn By Example

In many of my articles, I try to use established examples from Google’s own Flutter website to convey a concept, a particular Widget, etc. In this article, I’ll use the ‘example app’ generated for you every time you create a ‘New Flutter Project...’. Below, I’ve isolated both the StatefulWidget and its State object found in that generated code. Comments and other code removed for brevity.

I Like Screenshots. Click For Gists.

As always, I prefer using screenshots over gists to show concepts rather than just show code in my articles. I find them easier to work with frankly. However, you can click or tap on these screenshots to see the code they represent in a gist or in Github. Ironically, it’s better to read this article about mobile development on your computer than on your phone. Besides, we program on our computers — not on our phones. For now.

No Moving Pictures No Social Media

Note, there will be gif files in this article demonstrating aspects of the topic at hand. However, it’s said viewing such gif files is not possible when reading this article on platforms like Instagram, Facebook, etc. Please, be aware of this and maybe read this article on medium.com

Let’s begin.