StateX

‘@immutable’ warning
‘setState’ warning

The Warnings: ‘@immutable’ and ‘setState’

StatelessWidgets and StatefulWidgets are to contain unchanging (immutable) instance fields or properties — not doing so impedes Flutter’s functionality and degrades its overall performance. As for not calling the State class’ setState() function directly but through a subclass, that’s just good practice. It’s currently a ‘protected’ function — you’re to implement a subclass to call such a function.

I Like Screenshots. Tap Caption For Gists.

As always, I prefer using screenshots in my articles over gists to show concepts rather than just show code. I find them easier to work with frankly. However, you can click or tap on their captions to see the code in a gist or in Github. Tap or click on the screenshots themselves to zoom in on them for a closer look. With that, you ironically will find it best to read this article about mobile development on your computer rather than on your phone.

No Moving Pictures, No Social Media

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 or Facebook. They may come out as static pictures or simply blank placeholders. Please, be aware of this and maybe read this article on medium.com or on their own app.

Other Stories by Greg Perry

Show By Example

We’ll use the ol’ startup app created with every new Flutter project to demonstrate the StateX class in action. Here is a gist file for you to download and try yourself: statex_counter_app.dart. Below is a screenshot of this startup app. You can see there have been some changes made. The class, State, has been replaced with the class, StateX, and then that class object takes in a StateXController object named…well, ….Controller.

statex_counter_app.dart
statex_counter_app.dart
statex_counter_app.dart
statex_counter_app.dart
statex_counter_app.dart

A Case Of Deja Vu

If you are a longtime reader of my articles, may by now recognize this package — it’s something I’ve written about many times before. Simply put, it was time for a rebranding of my original Dart package, mvc_pattern. It was a mistake to include the ‘MVC’ label in the title. It never did require the MVC design pattern to be used. It has nothing to do with any particular design pattern at all! It merely extended the capabilities of Flutter’s State class to include ‘State Object Controllers’ and the app’s ‘lifecycle events.’ Of course, with that 3-letter abbreviation, many thought otherwise. Developers are always looking for ‘the best’ State Management architecture and ‘the best’ Design Pattern for their apps, and as misguided as they are, MVC is not their first choice. However, I realized this package needn’t get mired in that debate. I realized instead it needed a new name: StateX

Control The State

When using this package, through the course of an app’s lifecycle, a controller can be registered to any number of StateX objects. A StateXController object works with ‘the last’ State object it’s been assigned to but keeps a reference of any and all past StateX objects it’s worked with previously on in the Widget tree. Very powerful.

‘First In, Last Out’ when queuing a controller’s State objects.
One State with many controllers
statex_counter_app.dart

Xtend The State

Let’s finish up this article by simply listing the additional functions and features you gain when you use the StateX class. The first list below contains all functions unique to the StateX class. Most pertain to retrieving a particular controller currently linked to the StateX object. Later articles will demonstrate these functions in detail and note the examples on Github and Pub.dev.

Find Your State

This next list is of functions found only in a StateXController object. Most here retrieve a particular StateX object currently running in the app. You’ll find this an indispensable capability.

Share a Lifecycle Together

Lastly, there are twenty-one event handlers added to the StateX class in the state_extended package, and when a controller is linked to a StateX object, it too then has access to these event handlers and to events that may be triggered in the app. I suspect Android developers in particular will recognize this as an indispensable capability as well.

Init for One, Init for All

A screenshot of the StateX class and its initState() function below, presents how a StateX object, after running its own initState() function, then runs the initState() function of each and every controller currently associated with it at the time. You see, each controller may have its own operations or services that need to run before the StateX object can continue. Instead of a large and messy initState() function in the one State object — there can be individual controllers running their own initState() functions. Very clean. Very modular.

state_extended.dart

StateX Series

You can continue from this intro. to the 4-part series of articles below that even further examines the functions and features of the state_extended package. Each will detail one of the four example apps that accompany the package when it’s installed.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store