Firebase for iOS

Configure the iOS project to use Firebase and meet the new FutureBuilder widget

In this section, we'll continue to add Firebase to our Flutter application by configuring the iOS application. We'll add the iOS app to our Firebase Console, refresh our iOS pods to use the Firebase SDKs, and see how Flutter's FutureBuilder widget can be used to create a seamless loading experience.

Getting Started

To get started, first we'll visit head over to the Firebase Console for our project. What we need to do first before installing any packages is to make sure that Firebase is aware of the iOS version of our application. So in order to do that, first I will make sure to add iOS as one of the apps for my project.

  • First, I will select the Add App button and be sure to select the iOS button as shown below.

Screen_Shot_2021-03-10_at_10.31.31_AM

  • Next, I'll be taken to a page where we can register our iOS application. This is very similar to the page where we registered our Android application. The first piece of information they require is the iOS Bundle ID which is the iOS version of an Android app's Application ID. To find this, I'll go back over to my Android Studio project and navigate over to the ios folder. If you right click on the folder and select Reveal in Finder, you'll be able to open up the respective Runner.xcworkspace file in Xcode.

Screen_Shot_2021-03-10_at_10.35.49_AM

  • Here, you'll need to select the Xcode project to the left and under the General tab, you'll find the Bundle Identifier. Most of the time, this will be the same as your Android app's Application ID. However, it's always good to double check. For me, my Bundle ID is io.designcode.designcode.

Screen_Shot_2021-03-10_at_10.37.38_AM

  • Copy this back into the Firebase Console and give your app a nickname. I simply chose iOS App as its nickname. Click on Register app afterwards and Firebase will register this iOS application into your project.

Screen_Shot_2021-03-10_at_10.38.53_AM

  • Lastly, you'll be asked to download the configuration file. Unlike the configuration file for Android which was a .json file, iOS applications use a .plist file. Download the file without renaming it and then click Next. You can skip the remaining steps as we'll follow our own instructions to add the Firebase SDK to our Flutter application.

Screen_Shot_2021-03-10_at_10.39.27_AM

Adding the GoogleService-Info.plist file

As you can expect, we'll need to add the GoogleService-Info.plist file before we install any additional packages. Drag the downloaded file into the Runner folder inside of the ios folder as shown in the file hierarchy.

Screen_Shot_2021-03-10_at_10.43.19_AM

To make sure that Xcode has properly added the file, switch back over to the Runner.xcworkspace file in Xcode. Inside of the Runner folder, you should see the GoogleService-Info.plist file. If now, simply drag the file and add it right below the standard Info.plist file.

It's also important that you make sure this file has selected the Runner app as it's Target Membership. You can enable this when dragging the file into Xcode by enabling the Target Membership and checking Copy items if needed.

Screen_Shot_2021-03-10_at_10.46.58_AM

Updating our Podfile

The last change we need to make in order to make sure Firebase works with our iOS application is to open the Podfile file inside of the ios folder. Here, we need to define a global version which our project can run on. Change the second line of your Podfile to use a global platform of 10.0.

platform :ios, '10.0'

Screen_Shot_2021-03-10_at_10.49.18_AM


Introduction to the FutureBuilder widget

Unlike the Android application, when our iOS application loads, it offers no indication in the console as to whether our iOS app is communicating with Firebase. In order to see if this is working, we'll need to change the way we call on Firebase to initialize our application.

Switch over to the main.dart file. Right now, we call the Firebase.initializeApp() function inside of the main method. This won't always work because it's possible that Flutter will build our app even before Firebase has fully initialized. In order to avoid this, we'll rely on a widget called FutureBuilder. This widget is only built if a Future class has completed successfully. What is a Future class? This special type of class represents a delayed computation. The Firebase initialization function is an example of this as it takes some time for the function to execute. So once this function has executed properly, we'll build the main widget and in doing so, we'll know that the initialization has completed.

  • First, change your main method to remove the Firebase initialization line of code.
void main() {
  runApp(MyApp());
}
  • Next, change the build method inside of your MyApp class to return the FutureBuilder widget. This widget takes a parameter of future which represents the function of type Future. Here, we'll paste the Firebase initialization code.
class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Firebase.initializeApp(),
    );
  }
}
  • Lastly, we need to add a builder parameter. This parameter accepts the building of the widget we are looking for. There are two input variables, context and snapshot. Snapshot refers to the current execution of the Future class. When the snapshot is completed, we'll return the MaterialApp widget with a home of LoginScreen. Otherwise, we'll show the Container widget, or an empty screen.
return FutureBuilder(
  future: Firebase.initializeApp(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: LoginScreen(),
      );
    } else {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: Container(),
        ),
      );
    }
  },
);

Go ahead and build and run your code now. On an iOS Simulator or Android Emulator, you should see the Login Screen show up after a little while. This indicates that Firebase has successfully initialized your app.

Screen_Shot_2021-03-10_at_11.35.42_AM