Amazon.co.uk Widgets

This is the eleventh part of a journey to build and publish a Flutter™ based app.

This section contains the Firebase configuration, database configuration and project settings required to make the app capable of working with Cloud Firestore. It is quite a set of chores and must be followed carefully. Heres the list of things to accomplish before getting back to Flutter code.

  • Not using Flutter Web
  • Firebase configuration for mobile apps in the Firebase Console
  • Add Firebase to the iOS part of our Flutter project
  • Add Firebase to the Android part of our Flutter project
  • Check the Firebase console shows iOS and Android apps
  • Creating a Cloud Firestore database
  • Import the Cloud Firestore plugin from FlutterFire in our app
  • Adjust the build configuration files (pubspec.yaml, android/build.gradle, android/app/buildgradle

Not using Flutter Web

At this point the codelab on Cloud Firestore has us enable web support for Flutter and essentially work through building a web app. This feature is currently in beta and would mean changing the Flutter tools and version we are using away from the latest stable release. We have a rule for production apps, and you should consider it too - never use beta tools to build production apps - if you do you are building on a potentially unstable foundation that is subject to change. Make your own mind up but this article is going to skip the web part of the codelab and concentrate on extracting enough out of the codelab to be useful for our production mobile app for iOS and Android. We can play with Flutter Web on a different computer at a later date.

Firebase configuration for mobile apps in the Firebase Console

  • Register iOS and Android apps in the Firebase console
  • Download the platform-specific configuration files, and add it to the project.

In the top-level directory of the codelab app, there are subdirectories called ios and android for platform-specific configuration files. These need to be modified to configure the app to use Firebase correctly.

Add Firebase to the iOS part of our Flutter project

  1. In the Firebase console, select Project Overview in the left navigation bar, and click the iOS button under Get started by adding Firebase to your app. Firebase Console screen shot
  2. The iOS bundle ID, is the ID you created in App Store Connect if you followed the previous article.
  3. You need to set it in Xcode for your Flutter app. In the Terminal, change to the topmost directory and type
    open ios/Runner.xcworkspace/
  4. In Xcode, click the 'Runner' item in the left pane, to show the General tab in the right pane. Set the Bundle Identifier value to the value you chose in the Apple Developer website and provided for App Store Connect.Firebase Console screen shot
  5. Make sure the bundle ID from Xcode is entered correctly, optionally set the app nickname, and Store ID, then select the now enabled 'Register app' button.
  6. Download the configuration file GoogleService-Info.plist. Expand the Runner folder in Xcode and then drag the plist file into the Runner folder. You must do this in Xcode to correctly add the file. Click finish to add the file to the project properly.
  7. Firebase Console screen shot
  8. Click Next, and skip the remaining steps to return to the Firebase console and that completes the iOS setup.

Add Firebase to the Android part of our Flutter project

  1. In the Firebase console, select Project Overview in the left navigation bar, and click the 'Add App' button and then the 'Android' button to add Firebase to the Android part of our Flutter projectFirebase Console screen shot
  2. In the Flutter app directory, open android/app/src/main/AndroidManifest.xml .
  3. Find and edit package="com.example.friendlyeats" replacing it with your reverse domain notation package name. This is probably going to be identical to the string you used for your Apple Bundle ID but it isn't a Bundle ID in Android it is the package name. It is your code namespace for this project. Save the file with your change. Note that this will not affect the application ID in app/src/main/AndroidManifest.xml. The application ID is used separately by Google Play and must not be changed once your app binary has been published to any track in Google Play.
  4. Enter the same package name in Firebase Console and select the now enabled 'Register app' button.
  5. Download the configuration file google-services.json. Open the Finder and then drag the plist file into the projects app/android folder.
  6. Click Next, and skip the remaining steps to return to the Firebase console and that completes the Android setup.

Check the Firebase console shows iOS and Android apps

The Firebase console should now show your iOS and Android apps and their names on the Project Overview page.

Firebase Console screen shot

Creating a Cloud Firestore database

See the Flutter Firebase documentation and check out this video on Using Firestore as a backend to your Flutter app

In the Firebase Console, Select Database and create a new collection. There are only collections and documents to worry about. Give your collection a name.

Firebase Console screen shot

Add a few documents to the collection by selecting auto-id which generates a Document id and then adding one or two fields and saving - I added name and capacity fields just to try it out.

Firebase Console screen shot

Now there is some data in the collection. The data is in the cloud. It is ready to be used by our app.

Import the Cloud Firestore plugin from FlutterFire in our app

Cloud Firestore is a FlutterFire plugin, one of several that enable Flutter apps to use Firebase services. It is in beta and the developer page notes it is still under development, and some APIs and platforms might not be available.

Adjust the build configuration files (pubspec.yaml, android/build.gradle, android/app/buildgradle

Firebase setup does require changes to your projects pubspec.yamland the project level and app level gradle configuration files (Gradle is a build tool used for android projects).

  1. Add a dependecy to your pubspec.yaml file:
    
    dependencies:
      cloud_firestore: ^0.13.7
      
      
  2. Install cloud_firestore from the terminal $ flutter pub get or by directly running pub get in Android Studio.
  3. Import it into your project so you can use it in your code by adding the following line to your main.dart
    import 'package:cloud_firestore/cloud_firestore.dart'; 
  4. Now open android/build.gradle and add the classpath to the dependencies section.
     classpath 'com.google.gms:google-services:4.3.3'  // Google Services plugin
  5. Then open android/app/build.gradle and adjust your minSdkVersion to 21 or later as required by Firebase. Note also this file is where the applicationID lives, just check it is correct.
    minSdkVersion 21
    Then add the line to apply the plugin at the bottom of the file.
    apply plugin: 'com.google.gms.google-services'  // Google Services plugin

Once this is all completed successfully test to ensure your app will build without errors. Errors here can be quite opaque but you'll find answers in the flutter project github issues and must resolve them before continuing. On the plus side these platform specific customisations need to be completed only once per project that uses these plugins, and although they are a pain they should not need to be adjusted often.