Building a Flutter app, part 5: adding Firebase to the Flutter project

Welcome to part 5 of my Flutter App development journal, where I document my process of building a “grocery list” app from scratch.

Part 1 – Flutter installation and environment setup
Part 2 – Structuring the app’s main screen UI
Part 3 – Navigating between app screens with routes
Part 4 – Refactors and improvements
Part 5 – Hooking up Firebase to my Flutter project
Part 6 – Developing the create, read, and update features
Part 7 – A ton of feature work
Part 8 – User accounts [someday]

In this post: Adding Firebase to my Flutter app. This is mostly setup (there was a fair amount of it) and the actual coding resumes in Part 6.

At this point, passing around the mock data objects is getting to be more of a nuisance than a help. I don’t want to write code just to support the passing-around of mock data, so it’s time to start putting that data into the db and retrieving it.

I decided to use Firebase for my project’s database needs. Flutter and Firebase are both Google projects and there is a lot of documentation that shows you how to use them together, so this seemed like a good place to start.

Setting up a new Firebase project

In the interest of not duplicating the official docs, I’ll just share the ones I followed:

I used this guide to set up a new Firebase project
I watched this 11-minute video from the Flutter team

But there were still a few places where I felt my experience deviated from the videos/docs or where I just kinda got lost, so I am documenting them here.

Registering the app with iOS

The Firebase instructions assume you’re working in Xcode, but if you’re like me and working with a different IDE (Android Studio) in my case you might be wondering how to get the iOS bundle ID.

Here’s what I did (and as far as I can tell, this step has to be done in Xcode.)

Open Xcode
Go to “File… Open” and open just the iOS directory of my project

3. Click on the “Runner” header in the project structure at left and retrieve the “Bundle identifier” from the information at right (just copy/paste it and leave XCode open because we come back to it in a later step).

4. Give that information to Firebase and click Register App

5. Download the GoogleService-Info.plist file it generates for you

6. Note that they tell you this file belongs in the “root of your Xcode” project. (The Flutter/Firebase video totally skips this step, too!) It took me some trial and error to discover that the right way to “install” this file is to drag it from Finder to the Runner folder in Xcode.

Do not do this operation just in Finder (or via Terminal), you must do this step in Xcode.
Make sure “Copy items if needed” is checked
Make sure “Add to targets Runner” is checked

If it looks like this, you’re done and can close Xcode:

7. Since this file contains things like my API key, I added *.plist to my .gitignore file (so you won’t see it if you browse the project there).

8. Back in Firebase setup, I skipped this step:

9. I also skipped the “Add initialization code” step which is for native projects.

Registering the app for Android

The Flutter/Firebase video covers this, but it happens so fast I had to watch it like 5 times to figure out where, exactly, this file is (and of course, pausing the video brings up a bunch of YouTube links and “related video” junk that covers the code, lol).

Search for and open AndroidManifest.xml:

The line in question is at the top, and the highlighted line is the part you need:

I do not actually have an Android device so for now I just have to hope this works, but I won’t know until later in development. I’ll come back and update this section if I have trouble using Firebase on an Android device.

Creating the Firebase database

After the project was successfully created on Google’s end, I created a new database and went with the default settings for now.

Note: I later had to change the “false” to “true”, because by default the Firebase database doesn’t allow access to *anyone*.

Adding the Firebase packages to pubspec.yaml

I added cloud_firestore and firebase_storage package dependencies to pubspec.yaml.

Now, return to Terminal and run flutter pub get (or if you are in Android Studio it might prompt you to update dependencies as soon as you flip over to another file).

Rebuilding the app

Finally, stop the app if you have it running and rebuild (hit the green “Play” button in Android Studio). Just a heads up, this particular build took a lot longer than they normally do.

Continue on to Part 6 where I write some basic create, read, and update operations for the app.