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.
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.