A Better Flutter App #2

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

Three In One For Starters

The starter app produced by this custom template has three separate apps. Two of which you’ll likely recognize while the third demonstrates the use of an SQLite database. The user can switch between the three with a tap of a menu option. Note, the last app displayed will be the first app presented the next time the app starts up. The starter app uses the mobile phone’s platform-specific stored-preferences mechanism to do this. This article will demonstrate how this is done. The gif files below depict the starter app starting up the last app used. As you see, on three separate occasions, three different apps were last used.

What’s Your Preference?

So let’s see how this is done. In the left screenshot below, you see the code involved when determining which of the three apps to display at startup. Note, the static function called, getInt(), from the Prefs package is returning an integer to the property field, _appCount. This counter is used as an index on the List, appNames, to determine which particular Flutter app gets displayed. With every tap of a menu option, that counter is incremented and the index value loops through that List variable. Pretty straightforward. You’d be right if you suspect the default integer value would a zero if the device’s stored preferences don’t yet contain the key, ‘appRun.’

Saving Face

For example, in this starter app, even the last interface used is again brought up the next time the app starts up. As you know, Flutter has been acclaimed to be Google’s answer for cross-platform apps: One codebase with more than one platform-specific interface. For mobile apps, in particular, there is either the Android-style interface (using the Material interface design) or the iOS-style interface (using the Cupertino interface design) depending on which platform the mobile app is running on.

Switch between android-style and iOS-style interface
app.dart

A Better Flutter App #3

Both Andriod and iOS interfaces

--

--

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