Learning Flutter
Wait, what is Flutter™ ?
A framework for simultaneous publication of apps for Apple and Google Android devices
Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
I create mobile applications that can be published in the App Store and Google Play. I'm not a hard core developer, I have professional developers working with me in my clients and contracted work. But I am a product manager / interim CTO.
It seemed to me that going through the whole process of app creation and management and documenting it for others would be useful. I've been writing requirements and producing mobile applications for decades but I thought I'd like to learn at a far deeper level about Flutter just for fun and because cross platform applications are something I have a passion for. This is my learned experience of picking up these development tools and seeing what I can do.
Books
You might enjoy printed books. If you do then this one would be a strong pick - Flutter for Beginners: An introductory guide to building cross-platform mobile applications with Flutter 2.5 and Dart, 2nd Edition. As is Flutter Projects: A practical, project-based guide to building real-world cross-platform mobile applications and games (both on Amazon UK).
Of course, one does not simply publish an app.
In order to publish an app you have to plan, code, build, test, publish, operate, monitor, manage and update it. This is a familiar pattern these days, its sometimes called 'devops', and it can't be avoided, for if you skip elements of it then updating your app or managing it might become impossible over time. You don't want that! So while this collection of articles is based around Flutter it is also about all the surrounding disciplines that need to be considered as part of development and operating a cross platform mobile application and the inevitable platform behind it.
Flutter tech notes and demos
This is the thirteenth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Lets create an authenticated end user.
TL:DR – Authentication is built-in to Firebase. All that heavy lifting is done for you and lets you focus on your unique functionality.
- Details
This is the fourteenth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Once you have a user signed in you can open up your mobile app to personalisation based on the end user.
TL:DR – Now we have an authenticated connected to Google Firebase and its Cloud Firestore database, lets extend our app to do something with it.
- Details
This is the fifteenth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Now we have started to look at sign in it gets more complicated and we need to get current device information from within our Flutter application and present choices in the user interface that are relevant.
TL:DR – The focus here is on device information which might be helpful for your app.
- Details
Read more: Asynchronous programming in Flutter, futures, async, await
This is the sixteenth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Introducing plugins from pub.dev.
TL:DR – Now we have an authenticated connected to Google Firebase and its Cloud Firestore database, lets extend our app to allow sign in with Apple too.
- Details
Read more: Sign in with Apple from Pub.Dev Package Manager for Flutter
This is the seventeenth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Eventually you'll need to think about the fundamentals of source code control.
TL:DR – This article focuses on Git, a popular and powerful version control system
- Details
Read more: Source Code control with Git from Mac to Chromebook
Building the Flutter 💙 Barcode Scanner app
My project needs to be able to scan an inventory of items with barcodes and save them to a database. Optionally it could look up the description of the item from a source database or service. Then it needs to make that inventory available for use by other services such as a web site. This seems like something Flutter, and Firebase ought to be able to do.
You can find and use packages to build Dart and Flutter apps at pub.dev which is where flutter_barcode_scanner: ^2.0.0 is to be found.
TL:DR — It 'just works' with Flutter 2.x so it will be good for the project.
- Details
Read more: Flutter Barcode Scanner (flutter_barcode_scanner: ^2.0.0)
Flutter 💙 development on a Chromebook
It is a revelation to have Android Studio, ChromeOS and Android all running simultaneously on a Chromebook. The Android subsystem is not an emulator either it is the full ChromeOS Android implementation. It all works beautifully.
ChromeOS is a very good choice for a development environment for Flutter based apps. The Chromebook needs to be capable of supporting Linux and Google Play, and all Chromebooks available new now do. But, I'd still recommend seeking out an original Google Pixelbook i7, with 16GB Ram and a 512GB SSD (at Computer Exchange for £290 in Spring 2024 - Google Pixelbook/i7-7Y75/16GB Ram/512GB SSD/13"/ChromeOS/B) or a newer Google Pixelbook Go i7, with 16GB Ram and a 256GB SSD (at Computer Exchange for £370 in Spring 2024 - Google Pixelbook Go/i7-8500Y/16GB Ram/256GB SSD/13"/ChromeOS/Just Black/B). These are still the best development chromebooks. Cheap chromebooks are awful. These are not! They make almost perfect development machines, excepting that you cannot build for iOS or macOS on a Chromebook, you will need a Mac for that!
TL:DR — This is way more difficult than it should be because the instructions on the flutter web site don't represent the reality of working with ChromeOS. They need a rewrite. This set of steps works!
- Details
Using Cloud Firestore
Cloud Firestore, Firestore CLI, Firebase Emulator, Cloud Functions
Cloud Firestore is a flexible, scalable database for mobile, web, and server development. Support for it is built-in to FutterFlow. The easiest path to publication, for a mobile app that needs a database back end is to implement the data required in Cloud Firestore.
Cloud Firestore is a NoSQL database, which means you don't define its entire structure in databases and tables ahead of implementation and you dont use SQL statements to access it. Instead, you store data collections, which contain doucuments which contain fields of various data types, mapped to values. The data types are supported are: Array, Boolean, Bytes, Date and time, Floating-point number, Geographical point, Integer, Map, Null, Reference, Text string.
Data model
Firestore is flexible but it helps to think about the data model
My app is going to need a collection called 'territories' which will contain an organisation within it about which we wish to display some data. Easy. Easier if you have a diagram I think.
┌───────────┐
│ │
│Territories│
│ │
└─────┬─────┘
│
│ ┌───────────────┐
└─┤Organisation 1 │
├───────────────┤
│ │
│ ranking: 2.75 │
│ │
│ category: "a" │
│ │
│ id: "text id" │
│ │
│ name: "name" │
│ │
│ dataPoint1: 1 │
│ │
│ dataPoint2: 2 │
│ │
│ dataPoint3: 3 │
│ │
│ dataPoint4: 4 │
│ │
│ etc ... │
└───────────────┘
Cloud Firestore doesnt have a built-in mechanism for calculation of these fields or aggregation of them. My data set will need to be modified to adjust values of several fields for a given organisation. The firestore documentation encourages us to either, use a client-side transaction (which isn't possible yet using FlutterFlow and probably isn't desirable) or, to use a Cloud Function for Firebase to update aggregate information in the Firestore database for the app. It is a small data set at first, so it should be easy to add it manually, in the firebase console for testing, and then via a simple admin web app for ongoing admin and adjustment.
TL:DR — Theres a good bit to learn here and of course, more setup is required. We're going to need to set up Cloud Firestore for the Web, and to run it you might need to install Java because Firebase Local Emulator Suite requires a Java Runtime Environment (JRE).
- Details
Customising the Firestore Quickstart and making it use the Firebase Local Emulator Suite
Previously, we set up a Mac as a development environment for a mobile app built with FlutterFlow and Firebase and copied the FriendlyEats' Firestore quickstart web app which had most of the required functionality to be the start point for a web admin app for our mobile app data.
TL:DR — This article focus was on the modifications being made to the quickstart to try to turn it into a working admin app for the Firestore database for my FlutterFlow mobile app. In the end I didn't pursue this approach.
- Details
Starting from a sample in Flutter
So I started by creating an admin app for my YellowGreen project for Firebase, in flutter, using a sample from Flutter.Dev - Navigator 1.
TL:DR — This article focused on iterating towards using a Flutter app to bootstrap my FlutterFlow app data. The thinking was that I should just use the simplest Flutter app possible for this 'back end' app and FlutterFlow for my prettier 'front end' app for end users. That didnt really work out in practice. It is easier to build the admin functionality as elevated capabilities by role or user in FlutterFlow. All the logic in one place. Better adherence to 'DRY' coding.
- Details
Encryption and export administration regulations compliance (EAR)
When you submit an app for publication in the App Store you are uploading your app to the United States. Downloads of your app outside of the United States and Canada are considered to be exports from the United States so you must ensure you are in compliance with United States Department of Commerce encryption export administration regulations if you use encryption.
TL:DR – Apps are exports from the United States and must have a certificate or an exemption for encyrption.
- Details
I needed a way to get the latest video from a particular YouTube channel for an app which I am working on in FlutterFlow. I thought it would be pretty trivial. I had no idea how far down the YouTube, XML and Dart custom action rabbit hole I would have to go. But I persevered and cracked it and thought it might be worth writing up in case anyone else is trying to do something similar.
This detail page in my app is, on the face of it, very simple. Part of it comprises a container, which is populated with data from Google Firebase, in order to make the elements of the container engaging and useful. You can tap the YouTube Video to play it, tap the buttons to invoke the relevant engagement methods with the entity for which the information has been populated from Firebase. The YouTube Player component from FlutterFlow is very nice, and all it needs is the URL to the video to work with.
Container for YouTube Player and engagement method buttons
A FlutterFlow container based widget comprising a YouTube player, and button based links in a row to the engagement methods of Twitter, YouTube, Facebook and phone call.
Screenshot from FlutterFlow designer
FlutterFlow Widget tree for YouTube Player and engagement method buttons
The widget comprises a ListView which gets a document from a collection in Firebase, and a container with a column and text widgets to display it. The buttons have actions which are populated by data from Firebase
Screenshot from FlutterFlow designer
In the end this became a bit of a journey into FlutterFlow custom actions, pubspec dependencies, dart programming and XML. It took me far too long to do because I needed to learn each thing sequentially and then go back and iterate again adjusting my bad understanding of things until finally I cracked it and it works reliably and automatically.
- Details
Read more: Getting the latest YouTube video for a Flutter app