In the latest Stack Overflow developer survey, Firebase was among the most lovedtechnologies in the database area. In the case you are new to Firebase, it’s a cloud-based service provided by Google to enhance mobile app development. Firebase takes the load of managing the in-house mobile application infrastructure. Firebase provides many useful services that make our lives easier, the most used services are:

• Remote database
• Remote config
• Analytics
• Authentication
• Crash reporting (Crashlytics)

Most mobile app developers use Firebase services for a different purpose. Firebase also provides the test lab which offers test devices in the cloud for automated testing. Firebase supports both iOS and Android apps written using native technologies, such as Swift or Kotlin. On top of that, it also supports cross-platform mobile app development frameworks, such as Flutter. Firebase has official documentation on how to configure the Firebase SDK with Flutter apps. In this post, we will provide a step-by-step guide on how to set up the Firebase SDK for Flutter apps and publish those apps securely using the Codemagic CI/CD solution.

Prerequisites

In order to follow this guide, you need the following:

• Firebase console (usually linked with the Google account)
• A Flutter project, e.g. Codemagic-Demo
• iOS setup for the Flutter project

In this post, we will use the Codemagic-Demo app and set up Firebase plugins for the iOS version of the Flutter app. You can do a similar setup for the Android version of the Flutter app.

Firebase console: Project setup

To get started with Firebase, you need to have a Google account. Visit https://firebase.google.com/ and log in with your Google account credentials. You will be logged in to the Firebase console where you need to set up your project. Once logged in, you can create a project where you can add your iOS, Android or web apps. Detailed information about the Firebase project is available here, but we need to add the project name, project ID and accept the terms & conditions. Now, let’s create a Codemagic Demo project.

Firebase automatically assigns the project ID when the project name is entered, you can change the project ID at this stage. After this stage is complete, you cannot change the project ID anymore.

Once the project is created, you can access the dashboard of the project. Firebase has automatically provisioned all the resources required for the project.

Firebase: App setup

It’s time to add our iOS app to the Firebase project. Flutter creates both the iOS and the Android version of the app. In the Flutter app source code, you can see separate directories for the ios and android app. In order to add the app to Firebase, you have to complete the platform-specific setup. There is a separate set of instructions for Flutter projects which require fewer steps than the native apps. Let’s add the iOS version of the Flutter app to Firebase by clicking on the iOS icon in the project overview page. You will be asked to enter a few details of the iOS app, such as bundle ID, nickname and App Store ID.

Only the bundle ID is mandatory. You can get the bundle ID of the iOS app from Xcode. Open ios/Runner.xcworkspace in Xcode and click on Runner in the top left corner. You can then see the bundle identifier on the General tab of your main target.

In our case, it’s com.codemagic.demo. If you prefer the command line, you can execute the following command by passing the scheme and project workspace of your app.

$ cd ios $ xcodebuild -workspace Runner.xcworkspace/ -scheme Runner -showBuildSettings | grep PRODUCT_BUNDLE_IDENTIFIER

This will print the bundle identifier of your app. You can enter this identifier while registering the app with Firebase.

In the next step, Firebase will ask you to download the GoogleService-Info.plist file and put it in the iOS app directory. You can also download this anytime later.

In the case of iOS app setup, Firebase will guide you to create a Podfile and install pods, etc. However, you don’t have to perform these steps for the Flutter iOS app setup. Just proceed to the next steps until you see this screen.

At this stage, if you navigate the Firebase dashboard of your project, you will see that our iOS version of the Flutter app has been added to Firebase.

Similarly, you can also set up the Flutter Android app by following the instructions for Android, but we won’t go into this in this tutorial.

#ios #flutter #firebase #codemagic