A Framework for Flutter Part 4

main.dart

There’s A Structure

Under those two directories, the directory structure further conveys the source code’s areas of responsibility: any code responsible for the app’s interface is under the directory, view, any code responsible for the app’s data source is under the directory, model, and any code responsible for event handling or the app’s ‘business logic’ is found under the directory, controller.

directory structure

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.

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

Other Stories by Greg Perry

The State of Being

To run the example app, the MyApp class is passed to Flutter’s runApp() function. As you see in the first screenshot below, the MyApp class extends a class from the custom framework called, AppStatefulWidgetMVC. As you may have guessed, it’s a StatefulWidget. The second screenshot displays its accompanying State class, _MyAppState, extending another custom framework class called, AppStateMVC.

A State of Your Own

Below is a quick peek at the two abstract classes, AppStatefulWidgetMVC and AppStateMVC, both extending Flutter’s StatefulWidget class and the State class respectively. Both were designed to start up a Flutter app, but they’re not essential to use this custom package! In fact, you’re free to ignore them, and instead continue to implement a ‘State Object Controller’ using the additional classes, StateMVC and ControllerMVC, accordingly.

The First State

Well, on closer examination of the AppStateMVC class, we see in the second screenshot, the asynchronous function, initAsync(). Remember in the first article of this series, it’s involved in preparing an app at startup. Why you would use the AppStateMVC class is not only for that but, in my opinion, because you’ll find the ‘first State object of an app’ to be a pivotal player in any Flutter app. Generally, it’s this object that will supply the overall functionality and ability of the particular app. It’s situated as the basis of what the app can do for the user. You’ll find yourself referencing this particular object a lot in the typical operations of your Flutter app. You’ll find it’s best to make it accessible throughout your app as it’s involved with the functional requirements assigned to the particular Flutter app.

Control the Function

And as you’ve come to know reading this series, I feel the best means to implement the functional requirements assigned to a particular Flutter app is to utilize those ‘State Controllers’ I’ve introduced in this framework. As it happens, the AppStateMVC class can take in any number of Controllers if need be. Below is a screenshot again of the example app demonstrating this. Again, I feel State objects should only contain code concerned with the app’s interface. It’s in the Controllers where the ‘brains of the operation’ should usually reside. And if there’s a number of operations, each could be assigned to an individual Controller making for easier development and maintainability of the code. Of course, being that the StateMVC class is its parent class, in fact, it’s the StateMVC class that is actually taking in one or more Controller. Very nice.

mvc_pattern.dart

How To Set It Up

Remember, back in the first article, I mentioned I purposely delayed the example app at startup for 10 seconds causing a circular process indicator to be displayed? It was so to simulate the ‘setting up’ of a typical app before it's ready to be used by the user. Well, you can see that 10-second delay in the middle screenshot below.

mvc_pattern.dart

Back To Zero

So the first three screens in the example app allowed you to increment the counters on the previous screens. However, there was also the added ability of ‘resetting the count’ on Page 1. I’ll now quickly explain how that was done. It was done using the fact that, in Flutter, although a State object traditionally stays in memory retaining its state, it will be disposed of and re-created when the StatefulWidget is assigned a ‘different’ key.

await tester.tap(find.byKey(const Key('Page 3')));

It’s a Choice, Not a Chore

It doesn’t impose itself on you. It works with Flutter, and it works like Flutter. This ‘State Controller’ can serve as a conduit from the conventionally private State object to the public StatefulWidget — never mind readily supplying the setState() function from outside a build() function.

How To Be A GREAT Programmer

--

--

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