A Better Flutter App #5

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

The app_template project’s files and folders

The Place For Things

In the graphic above there are five screenshots of the very same files and folders that make up the starter app’s Flutter project, app_template. So far, this series of articles has only really highlighted the framework, mvc_application, as it is supplying most of the functions and features so crucial and so fundamental to any successful Flutter app.

What You See Is What You Get

A closer look at the project's second and third screenshots will demonstrate the importance of this essential characteristic. Please, look below and determine what do you see in the first picture of files and folders? What practical facts about this Flutter project can you glean from that first picture? I can tell you a few things that I know of this app just by looking at that first picture (and not just because I wrote the thing).

What’s Up?

Not too impressed? Well, let’s open up the folder, app, and try this little exercise again. From what I can now see in the second picture above, I know a database is definitely involved with the home screen and not with the app as a whole. In other words, with regards to MVC where M is for data, V is for the interface, and C is for event handling, the app-level contains no database but does have some screens and event handling. It is the home screen that contains all three.

controller.dart
controller.dart
controller.dart

What are Your Imports?

Because of this approach, it’s even possible to get a sense of what’s going on within each individual library file (.dart file). For example, the imports listed in the screenshot below will tell you a few things about the code inside the Dart file. Firstly, we see the function, unawaited, is being used somewhere in the Dart file — some Future function instead of using the ‘await’ clause is not ‘waiting’ and instead is being passed into the unawaited() function. By the way, it’s good practice to sparingly use the ‘show’ clause on particular import statements so ‘the future you’ or other developers can later open up the file and see what specific functions are being used in that file…at a glance.

template_controller.dart

A Better Flutter App #6

Scalability and Maintainability

--

--

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