Mar 22, 2022
[Series] Continuously Improving Your Flutter App: Setting up Firebase
Your product’s success is not just from writing clean codes, creating awesome UI/animation, using cutting-edge technology, or having all testing covered. That’s not the end of the SDLC.
In this series, we’re going to focus on the sixth step of the SDLC: “Maintenance”.
After delivering the product to the end users, we still have to find some ways to get users’ feedback in order to continuously improve our product or app. To do so, we need tools that allow us to track users’ usage data. Our tool of choice is Firebase. Like Flutter, Firebase is also from Google, so in this article I will show you how to set up and connect your Flutter app to Firebase.
Firebase is a platform that focuses on helping mobile app development easier. They’ve prepared a lot of useful tools such as crash log, performance, push notification, remote config, analytics, and so on.
Flutter team has a nice tutorial on how to install right here:
After installing Firebase, don’t forget to add these two lines of code before the runApp function in main.dart
WidgetsFlutterBinding.ensureInitialized();await Firebase.initializeApp();
Many people tend to forget this part, so make sure to do so. Otherwise, it won’t work.
Follow their tutorial until you finish creating Firebase with Flutter. If you complete the “Try out an example app with Analytics” part, your first analytics will show up on your console. But why does it take so long to show up? 😢 To fix this, we need to set up real-time debugView by inserting the below command in your terminal. If you skip this, your analytics might take up to an hour to appear in the console.
For Android, change package_name to your package name.
adb shell setprop debug.firebase.analytics.app package_nameFor iOS is a little harder. You have to go to Xcode, click ‘Runner’ on the left of the hammer icon, then go to ‘Edit Scheme’ before adding -FIRDebugEnabled in Arguments Passed on Launch
Now you can track analytics close to real-time from your device. There might be 3–5 seconds delay but it’s much better than no flag.
Next, we’re going to separate the configuration between development and production so that the data won’t mix up. To separate them in Flutter, we’re using “flavor”. Your Flutter command will change from…
flutter run
to…
flutter run --flavor dev or flutter run --flavor production instead.
The flavor will tell Flutter to use separate configuration between development and production. You can change the app name, app package, credential, etc. However, this will require some knowledge in Native on both iOS/Android. Let’s start with Android
Android Studio
Add this code in build.gradle (app) and put it under android tag.
flavorDimensions “version” can be anything that you want it to be, but it has to match with the flavorDimensions inside. You can change the name to the flavor or something else but don’t forget to change the tag inside as well.
For dev, uat and production, you can change the names as well, but they have to match the name of the Android folder > app > src as seen below.
In the dev folder, insert google-services.json that you get from the dev environment. You can do the same for others environments as well. That’s all for Android.
Xcode
Go to your Xcode Project and choose Runner > Manage Schemes
Choose Runner Scheme > Edit > Duplicate
Keep doing so until you get all the environments you want.
Notes: this scheme name has to be exactly like in Android. Otherwise, when you call flutter flavor, it will work only on one platform.
If you use Automatically manage signing in Signing&Capabilities, you’re all set. However, if you’re in a big team and need a manual sign for sharing certificates among developers, the step below is required.
Go to Runner and click the ‘+’ sign at the Configuration sections, select Duplicate Debug Configuration for three environments, and Duplicate Release for three environments.
The final result will look like this. Don’t forget to add dev, uat, production using the same name as in the schema. Now we can install the certificates in each configuration. I don’t use Debug, Release anymore, but I keep it just in case I might use it in the future. Debug is for building in real devices for testing while Release is used for shipping to testers or for deploying the app to the production.
The next step is about assets. I have created the folders dev uat production in the Xcode project. That said, don’t import it to Xcode.
Copy the asset that you want and paste in this folder such as Info.plist, GoogleService-Info.plist and etc. Use below script to copy and replace info.plist and GoogleService-Info.plist from the flavor directory to Runner directory
That should be it for iOS and Android. You can test it out by running a different flavor and see if the data goes to the correct Firebase projects. Now you can finally start using Firebase in your Flutter, including using flutter run --flavor dev for development 😘
In the next chapter, we will discuss how to add Firebase Analytics into the app and how we can use that data to help improve our app.
Want to read more stories like this? Or catch up with the latest trends in the technology world? Be sure to check out our website for more at www.kbtg.tech
