Part 2 - Using Cloud Firestore effectively with FlutterFlow
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.
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).
Part 1 - Setting out the platform for your project with FlutterFlow
Subscription, Getting Started, Other tools you may need, System Map/ diagram, Keeping product marketing naming out of your platform naming, FlutterFlow Settings,Integrate Google AdMob with FlutterFlow, Integrate Google Maps with FlutterFlow, Adding GitHub integration to FlutterFlow, Adding Firebase integration to FlutterFlow.
FlutterFlow is a visual application builder that creates flutter code.
Developing an application in Flutter is non-trivial work. Wouldn't it be good if there was a way to accelerate that process, so as to be able to quickly get a fully functioning flutter based app built and into the App Store and Google Play for early feedback, or for a minimum viable product (MVP). Can a visual application builder really have the capability to do it? Read on to find out…
I have an app from about ten years ago. It is the app that was my first successful app using a cross platform application development framework for IOS and Android with data stored in the cloud. The framework and the app are no more but as as a kind of anniversary I wonder if it could be re-implemented entirely using FlutterFlow and published again.
My app used google maps, and a public data API, and stored user settings in the cloud. It is not a trivial app, and it will be a great test of the capabilities of FlutterFlow.
The preparation work in thinking out and drawing the system diagram for the platform has a direct impact on the whole project, so I am going to spend a little time setting out all the project components required. The simplicity of FlutterFlow does not excuse the need to be careful about the overall system design and consistent about its implementation. I find it helpful to write these things down with a diagram or kind of map of the components in the overall project. Heres what it looks like as I start the project. It will probably change before I am finished.
Subscription, and environment
FlutterFlow 'Pro' is needed to access some of the features I need. It has a free trial and is then USD 80 monthly
Once subscribed, the business of setting up a new app is simple. Far more simple than using a traditional and complicated development toolchain with a development workstation. You are going to need a Flutter based development environment though, FlutterFlow takes the pain out of assembling the design, but can't replace all the local build tools. FlutterFlow works best on Chrome, and doesnt seem to work perfectly on a Chromebook so I'm using a Mac, you need a Mac anyway if you want to use the Xcode tools including the iOS Simulator. This isn't a failure of FlutterFlow by the way. FlutterFlow is a brilliant augmentation of the design process for Flutter based apps, you still need to manage your own code as part of your devops process.
Getting started with a FlutterFlow project
To get started, launch FlutterFlow, and create a new app project. Just click 'Create Project' to do that use your chosen codename and launch Flutterlow's app designer …
Firstly, Welcome to FlutterFlow
Click through the reassuring welcome message to get started. You can choose an existing template or a blank app.
FlutterFlow has a comprehensive set of Youtube videos available to guide you through the steps of app building.
TL:DR — FlutterFlow is light years ahead of any competition and fits with professional development and devops environments well. It is early days for me and for FlutterFlow but I think it is viable for production certainly for quick market testing of proper mobile apps or minimum viable product of production quality.
This is the first part of a journey to build and publish a Flutter based app for the App Store and Google Play.
- Permissive license and copyright
- Why are licenses important?
- The starter app
- The promise of Cross platform apps
- Development Pre-requisites, installing Flutter, Android Studio, Xcode and more
- Checking your Flutter environment
- Run your app on a simulator or real Apple or Google Android devices
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!
This site is written for Joomla! 4.0. Joomla 4.0 uses Bootstrap 5.0, we also use prism.js to make code listings easy to see.
If the text is inside the kbd tag it is an indication that it is a command line for the terminal. If the text
is inside the code tag it is an indication that it is a code term.
Bigger sections of code, like this minimal main.dart source code for the project are wrapped in code tags with a class of language-dart like this:
// // Copyright 2021 Multizone Ltd. All rights reserved. // // Redistribution and use in source and binary forms, with or without modification, // are permitted provided that the following conditions are met: // // * Redistributions of source code must retain the above copyright // notice, this list of conditions and the following disclaimer. // * Redistributions in binary form must reproduce the above // copyright notice, this list of conditions and the following // disclaimer in the documentation and/or other materials provided // with the distribution. // * Neither the name of Multizone Ltd. nor the names of its // contributors may be used to endorse or promote products derived // from this software without specific prior written permission. // // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND // ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED // WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE // DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR // ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES // (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; // LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON // ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS // SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. import 'package:flutter/material.dart'; import 'app.dart'; void main() => runApp(App());
Permissive license and copyright BSD 3-Clause "New" or "Revised" License
As you can see from the code above theres a license for all code written for this project. The license is the same as the one used by "The Flutter Authors". This License, the BSD 3-Clause "New" or "Revised" License is a permissive license with a clause that prohibits others from using the name of the project or its contributors to promote derived products without written consent.
This project uses the same license. You can use anything you find here, just dont use the name of this site or my company. I mean, why would you? You're not me.
Copyright applies by default to creative work and this is why licenses are needed. This is explained well by the team at github.
The Legal Side of Open Source
Everything you've ever wondered about the legal side of open source, and a few things you didn't.
"Open source is an unusual circumstance, however, because the author expects that others will use, modify, and share the work. But because the legal default is still exclusive copyright, you need a license that explicitly states these permissions. If you don’t apply an open source license, everybody who contributes to your project also becomes an exclusive copyright holder of their work. That means nobody can use, copy, distribute, or modify their contributions – and that “nobody” includes you. Finally, your project may have dependencies with license requirements that you weren’t aware of. Your project’s community, or your employer’s policies, may also require your project to use specific open source licenses."
Why are licenses important?
Licenses become important if you publish your work, because they give permission, state limitations, warranty and liability, and attach conditions. The chief condition here is to display the license in your work.
If you encounter licenses in the sample code you use, you should leave them in place. There is also a widget to display licenses for all the plugins and widgets used in your app. In a corporate setting you may need to review the licenses used in your project with your legal department.Note: This is not legal advice.
The Flutter license
Copyright 2014 The Flutter Authors. All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of Google Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Individual codelab source file licenses
// Copyright 2019 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file.
Starter app "If you wish to make an apple pie from scratch, you must first invent the universe." — Carl Sagan
First things first lets set up a computer with all the tools and technology needed to build the Starter app for Flutter. Doing this checks the environment is properly set up and serves as a convenient starting point for your application. Here it what it looks like once all the tools are installed and you build it for iOS and Android.
The promise of cross-platform apps One source to rule them all!
Take a moment to marvel at those screenshots. On the left is iOS, a Simulator of the Apple iPhone SE 2nd Generation running iOS 13, on the right is Android, actually a physical Google Nexus 6p running Android 8.1. Theres an appBar elevated from the rest of the content, with a background colour, a Title centred on iOS and left aligned on Android per guidelines on platform variance. The text is nicely centred and theres a floating action button (FAB) at bottom right but nicely padded away from the screen edge and floating above the content. These are completely different operating systems and completely different resolution devices. This is the power that Flutter has. One set of code in one project to manage cross platform development with much of this heavy lifting done for you.
You'll need to get these out of the way first. You will need a recent and decent Apple macOS based computer if you want to build for iOS and submit apps to the App Store. Other computer operating systems are supported by Android Studio and other tools for Flutter development for Android too, but it has to be a macOS based computer to build for iOS because Apple developer tool Xcode is needed and this is only licensed for use on macOS. Even if you do decide for example to use a Chromebook which is very capable indeed of supporting Android Studio and Android app development, you will I hope want to build and run and test on iOS too. It is a key benefit of Flutter to be able to simultaneously ship on both platforms so keeping them both alive in the development and test cycle is crucial.
- Download, install and set up the Flutter SDK
- Install Android Studio and the Flutter and Dart plugins
- Install Xcode for macOS. Android Studio needs to be able to use the Xcode command line tools to build iOS apps, and you will need to make some adjustments to the iOS part of the Flutter project using Xcode.
- Prepare an Android and an iOS device and/or emulators for use as development targets. Real devices are faster and provide more realistic experience although the emulators are good they need a powerful computer to run effectively.
- To publish your app in Google Play you will need to Sign in with your Google Account, Accept the terms, Pay the one time Registration Fee, and complete your Account details
- To publish your app in the App Store you will need to Enroll in Apple Developer Program with an Apple ID and pay for the membership year. You will need an Apple ID with two-factor authentication turned on. You’ll need to provide basic personal information, including your legal name and address. You'll need to provide further business information if you enroll on behalf of a business and it really is worth doing this now as it will eventually cause you problems if you do not. It takes some time to complete the process and check your business information so get this done early or you will delay your app launch. Don't skip this step if you are planning to publish your app. Get started early.
Optional continuous delivery pre-requisites
- Install Fastlane following step one of the instructions for Continuous delivery with Flutter. You'll need Fastlane to handle all the tedious tasks, like generating screenshots, dealing with code signing, and releasing your application. The rest of the steps in Fastlane setup will need to be completed once you create the Flutter project itself.
- Optionally, sign up for up a code repository like GitHub or Assembla for your source code.
Checking your Flutter environment
Once you have completed the development pre-requisites above you can use the flutter doctor command to check your environment is set up correctly and flutter upgrade to check you have the latest release
Run flutter upgrade and the output should confirm flutter is installed
% flutter upgrade Flutter is already up to date on channel stable Flutter 2.0.1 • channel stable • https://github.com/flutter/flutter.git Framework • revision c5a4b4029c (23 hours ago) • 2021-03-04 09:47:48 -0800 Engine • revision 40441def69 Tools • Dart 2.12.0
Run flutter doctor and the output should confirm your environment is set up.
Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.0.1, on macOS 11.2.2 20D80 darwin-x64, locale en-GB) [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) [✓] Xcode - develop for iOS and macOS [✓] Chrome - develop for the web [✓] Android Studio (version 4.1) [✓] Connected device (3 available) • No issues found!
You'll need to work through any issues reported until Flutter doctor reports that there are no issues. Once there are no more issues you're ready to create a Flutter project.
Create the app project
When you originally create the project in Android Studio or using the flutter create command, it will create an
application ID and
package name which used by the android part of the project and will initially be the same. They are in fact independent of each other. You can change the package name (in
pubspec.yaml, which is your code namespace, and it will not affect the application ID in
app/src/main/AndroidManifest.xml. The application ID is used by Google Play and must not be changed once your app binary has been published to any track in Google Play. You can read more about this at developer.android.com. You should seriously consider your app, application ID and related naming for publication now. Changing it is possible later but is not exactly trivial.
flutter create nameofyourproject and the output should be similar to this (more lines though).
flutter create nameofyourproject Creating project nameofyourproject... ...Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created) nameofyourproject/test/widget_test.dart (created) nameofyourproject/nameofyourproject.iml (created) nameofyourproject/.gitignore (created) nameofyourproject/.metadata (created) nameofyourproject/android/app/src/profile/AndroidManifest.xml (created) nameofyourproject/pubspec.yaml (created) nameofyourproject/README.md (created) ... nameofyourproject/ios/Runner.xcodeproj/project.pbxproj (created) nameofyourproject/lib/main.dart (created) ... Running "flutter pub get" in nameofyourproject... 1.7s Wrote 72 files. All done!
Check your devices
It is easier to use an Android device or the iOS simulator here as we dont have any certificates set up for development on real iOS devices. To use the iOS simulator launch using open -a simulator and it will appear as a run target in Android Studio. Check you have a device connected successfully and then you can run your app for the first time.
Type flutter devices and the output should be similar to this
2 connected devices:
Nexus 6P • android-arm64 iPhone SE (2nd generation) • ios
Run the app project on one device
In the terminal change into the project folder. cd nameofyourproject
Output should be similar to this (more lines though)
Running Gradle task 'assembleDebug'... Done 39.3s ✓ Built build/app/outputs/apk/debug/app-debug.apk. Installing build/app/outputs/apk/app.apk... 13.2s
Run the app project on more than one device
Output should be similar to this
Launching lib/main.dart on Nexus 6P in debug mode... Launching lib/main.dart on iPhone SE (2nd generation) in debug mode... ...
✓ Built build/app/outputs/apk/debug/app-debug.apk. Xcode build done. 77.5s Syncing files to device Nexus 6P... 302ms Syncing files to device iPhone SE (2nd generation)... 132ms ...
Starter app With Hot Reload!
Great! The starter app should now be running on your devices. Make and save a change to the text in main.dart and watch it reload. Make the change obvious and look quickly because it is fast! A key benefit of Flutter is this ability to hot reload. It makes the iteration of development changes easier to see on the device instantly.
First ever Warzone victory.
I play far too much Call of Duty® Modern_Warfare® and dont play much 'Warzone' but Im a completionist and want to get the ribbons for my officer progression. I'm not great at Warzone and often get wiped out very early on. But this time. Well this time was special. I missed the guy in the window, and my airstrike was off target but it definitely spooked them! And we won. Phew.CoD
Page 6 of 6