Learning Flutter™ — Simultaneous publication of apps for Apple and Google Android devices
Wait, what is Flutter?
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.
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 first part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Follow along to learn everything you need to do to set up your environment, build a Flutter based app, put it into source control and publish it to the App Store and Google Play. Along the way you will need some third party tools and services and while the ones used in the examples will hopefully the simplest set of tools you can feel free to make other choices. We have published hundreds of apps for the App Store and Google Play, and will cover wider topics regarding publication and continuing distribution of your app. The first of those is about licenses and it is in this first article. Don't skip it!
TL:DR – Start Here! Get all the tools required and build your first mobile app using Flutter. Build the starter app on a Mac computer with Apple silicon.
- Details
This is the second part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Hot reload is a time saver for viewing changes in your mobile app. You'll wonder how you worked without it.
TL:DR – Start by following the instructions in Getting started with Flutter on a Mac and then you'll be able to complete the tasks in this article.
- Details
This is the third part of my journey to build and publish a Flutter based app for the App Store and Google Play.
2014 Baseline Material color theme
Material Design made its debut with a built-in, baseline theme with 12 colours named and defined. Much has changed but these building blocks are important to understand as you think about the colours in your app.
| Primary #6200EE |
Primary Variant #3700B3 |
Secondary #03DAC6 |
Secondary Variant #018786 |
| Background #FFFFFF |
Surface #FFFFFF |
Error #B00020 |
| On Primary #FFFFFF |
On Secondary #000000 |
| On Background #000000 |
On Surface #000000 |
On Error #FFFFFF |
TL:DR – The colours in mobile apps can look good if you pay attention to themes and colour choices. I like to use tools to help me visualise the app colours and this article shows how.
- Details
Read more: Making mobile apps look better - theme and colours
This is the fourth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Dark and light text theme
This is just some boilerplate text. It is in headline6 text style. headline6 is parchmentLightOnSurface in the light theme and parchmentDarkOnSurface on the dark theme and should change colour automatically when the theme is changed. This is so simple compared to writing specific code to support colour changes.
The baseline Material color theme is ten years old and was supplemented by a dark theme baseline palette. It provides exaclty what it says - a baseline from which to iterate your colour design.
TL:DR – The addition of dark appearance was unfairly derided at the time but is now a critical part of application design thinking. Address it early on in your design process or it will be hard to add later.
- Details
This is the fifth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Apps which start with a Sign in turn end users off. People have low tolerance for such things and wherever possible, apps should deliver their functionality without interrupting the end user with administrative taks. I call it the 'bus top test'. Can you get what you want from your app in the bus stop queue quickly and effectively. If you can't the app designer has failed.
TL:DR – There is not much to see here, but perhaps it is important enough to reiterate. Don't let Sign in pages get in the way of your app.
- Details
Read more: Wiring up the appBar action with a route to a login page using Flutter
This is the sixth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
TL:DR – Typography in Flutter keeps improving. The names of the TextTheme TextStyles here conform to the 2018 Material guidelines and are more understandable than before but the size, weight and spacing are still from the 2014 Material guidelines. Apps can choose to use the 2018 text style by specifying Typography.material2018() as the value for their Theme's typography.
- Details
Read more: Text, Typography, Test Styles and Text Themes (Flutter from soup to nuts, No.6)
This is the seventh part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Adding all the Material Components widgets to our app page
Adding all the MDC-Flutter widgets to the app is a giid way to learn about them. We have already build an Appbar, MaterialApp, Scaffold, ButtonBar, and, FlatButton, (which is inside the Card. There are a lot more.
TL:DR – In this article lets add Buttons, Floating Action Button, Chips, Data table, Dialogs, List View, Popup Menu and Navigation Drawer
- Details
This is the eighth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
TL:DR – In this article lets add Progress indicators, Selection controls (Radio buttons, checkboxes and switches), SnackBar via a Global Key, Bottom Navigation Bar, Text fields
- Details
This is the ninth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Cloud Firestore is a flexible, scalable database for mobile, Google. It supports hierarchical data structures, expressive queries, realtime updates, offline support, and seamless integration with other Firebase and Google Cloud products. It is pretty perfect for mobile apps.
TL:DR – This article goes through the setup steps required to get it going.
- Details
Read more: Setting up Google Firebase with Cloud Firestore for our Flutter App
This is the tenth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Read and pause and read again. The decisions you make here will affect your app for its entire lifecycle.
TL:DR – Sensible naming is important for your project consistency on multiple platforms and tools, especially if you have more than one app or client!
- Details
Read more: Setting up initial information for App Store Connect and Google Play for a new mobile app
This is the eleventh part of my journey to build and publish a Flutter based app for the App Store and Google Play.
There is a long list of chores in here to get Firebase working in your mobile app. Once completed you won't have to deal with it again.
TL:DR – This article contains the Firebase configuration, database configuration and project settings required to make the app capable of working with Cloud Firestore.
- Details
This is the twelth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
The important takeaway is that data from Cloud Firestore 'just works'. Edit an item in the Firebase Console and you'll see it change on your phone or simulator.
TL:DR – At last lets get back to Flutter and add some code from the Firebase Codelab.
- Details
- Authentication to Firebase
- Adding Google as a Sign-in provider
- Asynchronous programming in Flutter using futures, async, await
- Sign in with Apple from Pub.Dev Package Manager for Flutter
- Source Code control with Git from Mac to Chromebook
- Flutter Barcode Scanner (flutter_barcode_scanner: ^2.0.0)
- Flutter development on a Chromebook
- Using Cloud Firestore
- Customising the Firestore Quickstart
- Starting from a sample in Flutter
- Export compliance and the App Store
- Getting the latest YouTube video for a Flutter app