A new look at Flutter design with old eyes…
I started writing software on a Digital Equipment Corporation (DEC) PDP 11/44 processor running RSX11-M operating system using FORTRAN, Macro Assembly, Pascal and C languages way back in 1982. After retiring from almost 35 years working in the telephone industry, I decided to try my hand doing one of the things I loved most during my career, programming.
I did not understand Object Oriented Programming (OOP), so I bought a Raspberry Pi and began my journey of rediscovery, at 54 years of age. I actually started with Scratch, then some work with Python to get my head around the concepts.
The first steep learning curve was Android framework and Java language. I took a few online classes, spent countless hours using the great resources of Stack Overflow. This was an on again, off again, process as I was not yet fully locked into the idea of starting a new career in mobile app development.
Next came iOS with Swift. By that time I had a pretty good understanding of OOP having finished an Android App for my first client. Very different development environments, fundamental concepts the same, but how things are done so very different. In the fall of 2019 I completed an App for a client with both Android and iOS versions published.
I was not looking forward to writing every app twice, knowing the challenges with getting both Android and iOS to look and feel consistent across platforms. Then I attended Google DevFest and was introduced to Flutter and Dart.
Over the last year I have been shifting all my focus to Flutter and Dart. Taking an online course, leveraging the great online resources, but this was yet another significant learning challenge. I’ve just completely rewritten my very first App in Flutter and will soon publish for both Android and iOS.
There is much writing about Flutter, many articles on Medium, often very helpful content. But sometimes it gets a bit confusing, all the discussions about ‘Every thing is a Widget’, difficulties with ‘State Management’, long discussions about file/folder organization, etc.
Here are a few things I wanted to share with anyone beginning their journey with Flutter/Dart.
From my perspective, a good design with Flutter is to consider three functional groups of code:
- Context
- State
- Services
I’m sure everyone reading this article is familiar with MVVM, MVC, and other patterns. Context is similar to View, State is like Controller, with services in support of the project.
The reason I use the term Context is relative to the Flutter framework and widget object building blocks. So many things depend on the actual context of widget builds. The ‘Everything is a Widget’ concept is absolutely related to the User Interface (UI). Compared to Android and iOS, building a UI with Flutter is incredibly powerful and I believe much easier. My project folder structure has Screens with a dart file for each screen presented to the user and a Widgets folder to contain widgets used by multiple screens. I limit, as much as possible, ANY logic processing in screen or supporting widget files, just the UI, nothing but the UI.
State has been the topic of countless discussions regarding Flutter. There are many choices for solutions. I use Provider in every App to hold global state and main logic functions. Most Apps I am writing use Firebase and my Bloc Provider is where I listen to streams. In a very basic view, Provider is instantiated once and remains in memory while the App is loaded and running. UI events like onPress are handled by functions in my Bloc and any state I need to maintain resides within it, using notifyUsers to update the widgets (UI) as state changes.
There is a folder for Services. One example is having a Dart file with all the functions for interacting with a back-end server. Here is where localization classes reside and other things like bar code scanning functions. In almost every case, it is the Bloc that is calling services, passing results as needed back to the UI.
When I finally arrived at this understanding, my Flutter and Dart code began to coalesce into a more coherent structure making both development and testing incredibly easy.
I share this in hopes that others might see the value of looking at Flutter with a Context, State and Services perspective, also sharing their feedback and experiences working with this wonderful new mobile application framework.
