Starting from a sample in Flutter

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.

Create

You can use a command line flutter create to set up many of your apps parameters correctly from the get go. Like this flutter create --org uk.co.yourcompanyname --sample=widgets.Navigator.1 --description "Firebase Admin tools for YellowGreen" yellowgreenadmin. Eventually you'll be able to output the sample on all platforms, and that is what the image shows, but theres a tediously complicated setup to be done first. Anyway the image shows where you end up. One set of source code with Android, iOS, macOS and Web apps. This is surely worth some configuration pain and tedium! Note that this configuration work took me about a day and a half, because I completely messed it up by doing it to the wrong app the first time through, and using the 'wrong' sample second time around. So, now I've done it three times through and am pretty happy with the process.

Setting up your Flutter project

Integrate Firebase

Set up Firebase to work with this Flutter app in addition to the front end FlutterFlow app we have already started.

• Add the FlutterFire dependencies to pubspec.yaml
• Register the desired platforms on the Firebase project
• Download the platform-specific configuration files, and add them to the code.

FlutterFire

There is a dashboard of what versions of the Flutter Plugins are available and what their status is at https://firebase.flutter.dev/ I will use the version of the stable plugin published on the day of creation. Today it looks like this:

pubspec.yaml

Add the dependencies for cloud_firestore and firebase_auth. I chose the published versions number available today from https://firebase.flutter.dev/ shown above. Heres the edit I made to the pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^2.5.0 
  firebase_auth: ^3.0.2   

Configure the platforms in the flutter project for Firebase

Buckle up. This is tedious but needs to be done accurately.

Configure iOS and macOS to use Firebase

1. Click 'Add App'

   

2. Click 'iOS' to select a platform

   

3. Complete the iOS bundle ID so that Firebase knows about your iOS App. You can get this from organisation id and project name you gave when you set up the project, or directly from Xcode by running open ios/Runner.xcworkspace in your flutter project folder.
4. You can get nickname from the descirprion in pubspec.yaml or just type it in. You dont need the App Store ID. This admin app is not likely ever for the App Store. Once you have filled it all out correctly click 'Register app'.
5. Now download the config file GoogleService-Info.plist from Firebase.
6. Make sure the filename is exactly set to GoogleService-Info.plist (it will change if you've done this before to your downloads folder for example) and then drag it into the Runner subfolder. In the resulting dialog box click 'Finish'.
7. Don't try to do this in the file system or via the terminal. It only works correctly if you drag and drop it from finder into the right place in Xcode (I have no idea why - Ask Apple). Verify it is in the right place. Quit Xcode.
8. In Firebase click through the rest of the steps until you go back to the console main page.
9. Now for macOS there are some similar steps, but they operate on the macOS folder so make sure you correctly enter the commands. For macOS re-use the config file GoogleService-Info.plist you downloaded from the Firebase console. Run open macos/Runner.xcworkspace in your flutter project folder. This is the macOS Runner. It is in a different platform folder to the iOS Runner we previously edited. Again, drag the file from finder into the Runner subfolder.
10. Verify that the filename is correct and that is in the correct place.
11. Add the required entitlements to DebugProfile.entitlement. Double click to edit the document then click the right mouse to 'Add Row' and add com.apple.security.network.client as a Boolean and set its value to '1' (true).
12. For Release.entitlements again double click to edit then click the right mouse to 'Add Row' and add com.apple.security.network.client as a Boolean and set its value to '1' (true).
13. Quit Xcode. The configuration is completed for iOS and macOS.

Configure Android to use Firebase

1. Click 'Add App'.
2. Click the Android button to select a platform.
3. Complete the Android package name so that Firebase knows about your iOS App. You can get this from organisation id and project name you gave when you set up the project, or directly from the flutter project by opening android/app/src/main/AndroidManifest.xml in your flutter project folder. Here I am using VSCodium to edit it and can see the package=line which contains the package name.
4. You can get nickname from the description in pubspec.yaml or just type it in. You dont need the Debug Signing certificate SHA-1. Once you have filled it all out correctly click 'Register app'.
5. Now download the config file google-services.json from Firebase.
6. Make sure the filename is exactly set to google-services.json (it will change if you've done this before to your downloads folder for example) Go to your Flutter app directory, for example from VSCodium find it and click right an choose 'Reveal in Finder' and then drag the google-services.json file that you just downloaded into the android/app directory.
7. In Firebase click through the rest of the steps until you go back to the console main page.
8. Find and edit android/build.gradle to add the plugin dependency for google-services.

       dependencies {
           classpath 'com.android.tools.build:gradle:4.1.0'
           classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
           classpath 'com.google.gms:google-services:4.3.5'
       }
   

   Here it is in VSCodium.
9. Find and edit android/app/build.gradle note this is a file with the same filename in a different folder to the one above. Enable the plugin by adding it.

   apply plugin: 'com.android.application'
   apply plugin: 'kotlin-android'
   apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
   apply plugin: 'com.google.gms.google-services'  // new
   

   Here it is in VSCodium.
10. Firebase requires Multidex (whatever that is) to be enabled, so set the minimum supported SDK to 21 or above. Edit your android/app/build.gradle to update minSdkVersion. It defaults to 16 which is silly really these days. SDK 21 is Android 5.0.2 which is also ancient. I really only need Android 27 which is Android 8.1 or later. But I'll go with the recommendation of 21 in case it has other impacts.
11. The configuration is completed for Android.

Configure a web app to use Firebase

1. Click 'Add App'.
2. Click the Web button to select a platform.
3. You can get nickname from the description in pubspec.yaml or just type it in. Once you have filled it all out correctly click 'Register app'.
4. Edit the body section of your web/index.html to add the script for firebase. It seems very particular about the version to use.

   <!-- Add from here -->
     <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
     <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
     <script src="https://www.gstatic.com/firebasejs/8.100.0/firebase-firestore.js"></script>
     <script>
       // Your web app's Firebase configuration
       var firebaseConfig = {
         // Replace this with your firebaseConfig
       };
       // Initialize Firebase
       firebase.initializeApp(firebaseConfig);
     </script>
     <!-- to here. -->
   

   It isnt completely clear to me exactly where to add it, but the firebase console instructions say Copy and paste these scripts into the bottom of your <body> tag before you use any Firebase services so that is what I have done.
5. Here it is in VSCodium.
6. The configuration is completed for the web.

But wait, there's more - Cocoapods

You can read about Cocoapods and what it does if you wish, but for now, lets just make them work with our sample app and move on.

macOS

macOS Flutter builds use cocoapods. Update the `platform :osx, '10.11'` line in your iOS/Podfile to enable it.

platform :osx, '10.12'

Open your macos/Runner.xcodeproj Xcode project and under the 'Runner' target General tab set your Deployment Target to 10.12 or later.

iOS

iOS Flutter builds use cocoapods. You can see there is a dependency on iOS 10.0 or later because in ios/Pods/Local Podspecs there are json podspec configuration files containing

  "platforms": {
    "ios": "10.0"

Specifically, Flutter.podspec.json, firebase_auth.podspec.json, cloud_firestore.podspec.jsonand firebase_core.podspec.json. I would have thought this would be easier to manage but it is not. Read each file and choose the latest ios platform dependency. In this case firebase_auth.podspec.json, cloud_firestore.podspec.json bothe require iOS 10. So uncomment the `platform :ios, '10.0'` line in your ios/Podfile and change it to version `10`.

platform :ios, '10'

Open your ios/Runner.xcodeproj Xcode project and under the 'Runner' target General tab set your Deployment Target to 10.0 or later.
Note:You may need to run flutter clean and % pod repo update, if you have attempted to build before now.

Finally your app can build all the code to generate all the applications and their screenshots above. Now we have a baseline app from which to add our Firebase CRUD functionality. When I worked at Sun Microsystems, a colleage showe me a nice but unremarkable sheet of paper. 'took me a week to figure out how to print this but I learned a lot' he said. I feel a bit like that today.

I have six apps in my firebase console now, an admin and a FlutterFlow app for ios (and macOS), Android, and web. Thats a good end to my Friday.