Step 2 · Connect the Apps

Connect the Apps to Firebase

The download points to the demo Firebase project. One command per app folder connects it to your own project.

20 min

The FlutterFire CLI registers each app in your Firebase project and writes its settings file, lib/firebase_options.dart. Every Go4Food app and panel already starts Firebase from that file (DefaultFirebaseOptions.currentPlatform in main.dart), so there is nothing else to change in the Dart code.

You do this for six folders: the three phone apps, the admin panel and the two web projects.

Package names first

Firebase knows each phone app by its package name. Set your own on the previous page before you run FlutterFire. If you change one later, run FlutterFire again for that app.

Connect with FlutterFire#

Install the tools (once)#

You need Node.js and Flutter installed (see Requirements). Then run:

npm install -g firebase-tools
firebase login
dart pub global activate flutterfire_cli

firebase login opens the browser. Sign in with the Google account that owns the Firebase project.

Run FlutterFire in each folder#

Use your project ID (shown in SettingsGeneral in the Firebase console):

cd customer
flutterfire configure --project=your-food-a1b2c

Repeat in every folder below. When it asks Which platforms should your configuration support?, use the arrow keys and Space to tick exactly these, then press Enter:

Folder	What it is	Tick these platforms
`customer/`	Customer app	android, ios
`restaurant/`	Restaurant app	android, ios
`driver/`	Driver app	android, ios
`admin_panel/`	Admin panel	web only
`customer_web/`	Customer website	web only
`restaurant_web/`	Restaurant web panel	web only

If it asks to overwrite firebase_options.dart or google-services.json, answer yes. If it asks which Firebase web app to use, picking the same web app for all three web folders is fine. You are done with a folder when you see:

Firebase configuration file lib/firebase_options.dart generated successfully
with the following Firebase apps:

Platform  Firebase App Id
android   1:123456789012:android:a1b2c3d4e5f6
ios       1:123456789012:ios:a1b2c3d4e5f6

Update the web push settings#

Each web project has a small file that shows push notifications while the tab is in the background: web/firebase-messaging-sw.js in admin_panel, customer_web and restaurant_web. FlutterFire does not change it. Copy the values from the web block of that folder's new lib/firebase_options.dart into it:

web/firebase-messaging-sw.js

firebase.initializeApp({
  apiKey: "YOUR_WEB_API_KEY",
  authDomain: "your-food-a1b2c.firebaseapp.com",
  projectId: "your-food-a1b2c",
  storageBucket: "your-food-a1b2c.firebasestorage.app",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_WEB_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
});

Check it#

Start the admin panel in Chrome. It should open the login page of your own project:

cd admin_panel
flutter pub get
flutter run -d chrome

flutterfire is not recognised?

Add Dart's global tools folder to your PATH and open a new terminal.

WindowsmacOS / Linux

Add %LOCALAPPDATA%\Pub\Cache\bin to the Path user variable.

echo 'export PATH="$PATH:$HOME/.pub-cache/bin"' >> ~/.zshrc
source ~/.zshrc

On Linux with bash, use ~/.bashrc instead of ~/.zshrc.

What FlutterFire changes#

File	What it holds	Written in
`lib/firebase_options.dart`	Your project's settings for each platform you ticked. Used by `main.dart`. Do not edit it by hand.	All six folders
`android/app/google-services.json`	Firebase settings for the Android build. The build fails without it.	customer, restaurant, driver
`ios/Runner/GoogleService-Info.plist`	Firebase settings for the iPhone build.	customer, restaurant, driver
`firebase.json` (in the app folder)	A record for the FlutterFire CLI of which Firebase apps it used.	All six folders

Hosting the admin panel on Firebase?

admin_panel/.firebaserc still names the demo project. When you deploy to Firebase Hosting, run firebase use --add in that folder and pick your project, or put your project ID in that file. See Deploy the websites.

Manual method (without FlutterFire)#

FlutterFire is the easy way. If you cannot run it, you can connect an app by hand in the Firebase console:

Register the app#

In SettingsGeneral, scroll to Your apps and click Add app. Choose Android, iOS or Web, enter the package name or bundle ID from the previous page (any nickname for web) and click Register app.

Download the config files#

Android: download google-services.json and put it in android/app/, replacing the old one. iOS: download GoogleService-Info.plist and put it in ios/Runner/ (in Xcode, drag it into Runner with Copy items if needed ticked). You can skip the console's "Add Firebase SDK" steps; Go4Food already includes them.

Update firebase_options.dart#

Open lib/firebase_options.dart and replace every value in the android, ios or web block with the matching value from your new app: apiKey, appId, messagingSenderId, projectId, storageBucket, and for web also authDomain and measurementId, for iOS also iosBundleId. You find them in the downloaded files or under the app's SDK setup and configuration in Project settings.

Easy to miss a value

A single old value (for example the demo projectId or storageBucket) makes the app talk to the wrong project. If anything behaves strangely, run FlutterFire instead: it rewrites the whole file.

Two more connections come later

SHA-1 and SHA-256 keys for phone and Google sign-in on Android: SHA keys.
Google sign-in on iPhone (the URL scheme in Info.plist) and Apple sign-in: iPhone release.

Step 2 is done

All six apps and panels now talk to your project. Next is Step 3: open the admin panel, create your first admin and fill in the settings.