A Better Flutter App #1

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

Hurry Up and Wait

Look at the two gif files below. Note, there’s a black screen and a blue circular spinner coming from the ‘better’ starter app. That circular spinner comes about because there’s some work that needs to be done before the starter app is ready to continue. The original starter, being so simple, has no need for such a mechanism. However, that’s certainly an exception and not the rule for a typical Flutter app.

Start-Up With Some Background

If you open the main.dart for this starter app, you’ll find essentially only one line. It’s where the main() function calls the function, runApp(). You can see it in the screenshot’s inset below. The rest of the screenshot is of the class, TemplateApp, that’s called and passed to the runApp() function.

app.dart
app_statefulewidget.dart
app_statefulwidget.dart
app.dart
contacts_controller.dart
contacts_controller.dart

Control The State

A controller for every State object is a design pattern commonly found in this framework. You may have noticed by now that every State object used in this app is a subclass of Flutter’s own State class and is called, StateMVC. Unlike the State class it extends, the StateMVC class has one optional ControllerMVC parameter. See below.

mvc_pattern.dart
contacts_view.dart
mvc_pattern.dart
app_statefulewidget.dart

A Better Flutter App #2

Save User Preferences

--

--

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