Flutter with Firebase

Recently I spoke at multiple DevFests and one of my most favourite topic was “Flutter with Firebase”. No matter what both the technologies have made lives of developer easy. The scope of these products is huge as they cover multiple platforms like Android, iOS and Web. Another common purpose to use Flutter and Firebase is both of these products help in improving the performance of your application and best thing — they’re easy to use. While both of them have made their debut recently, they have gained popularity in no time and are trusted by the largest apps.

What is Flutter?

My response to you in two lines —

1. Flutter is Google’s UI toolkit that helps you that helps you build beautiful and natively combined applications for mobile, web and desktop in a single codebase in a record time.
2. Flutter is all about widgets! Everything that you see on your screen is a widget — button, text, list etc.
   Widgets are compiled to native ARM code using Dart’s compilers and are customisable.

3 Fundamentals of Flutter —

1. Widgets : In Flutter, everything is a widget. Widgets are building blocks of UI that you can combine to make a complete app. Building an app Flutter is like joining a puzzle— block by block. Widgets are nested inside of each other to build your app.

a. Child vs Children — When a parent nests single widget inside itself, the widget is a child widget. Example — child: Text('foo')
When a parent nests multiple widget inside itself, it’s example of children widget. Example : children: <Widget>[Text('foo'), Text('bar')]

b. State vs Stateless Widgets — A widget is either stateful or stateless. If a widget can change — when a user interacts with it, for example — it’s stateful. A stateless widget never changes. A widget’s state is stored in a State object, separating the widget’s state from its appearance.

If you want to explore more about Flutter, please visit Flutter’s official website to get more information.

Who uses Flutter?

Find more about Flutter Clients here.

What is Firebase?

1. Firebase helps build faster apps, without managing the infrastructure.
   With Firebase functionality like analytics, databases, messaging and crash reporting you can enhance the app quality and monitor performance.
2. It helps to build, improve and grow applications for multiple platforms.
   Just like Flutter can be used to develop applications for multiple platforms, Firebase products work great individually but share data and insights, so they work even better together.

For more information about Firebase, please visit the official Firebase website.

Who uses Firebase?

Find more about Firebase use cases here.

Multi use features of Firebase

Weaving Firebase with your Flutter application -

This will be a good read if you have some background about Flutter or have made your hands dirty with Flutter before. I’m going to speak about three primary features of Firebase : Authentication, Database and Storage. If you get a hold of these three features, you may be able to build a complete dynamic application with user authentication and managing user transactions.

Firstly, let’s add Firebase to your Flutter Application —

1. Create a Firebase Project :
   I assume you have already created your account for Firebase and are logged. Now, click on get started icon -> Add Firebase to your project. Go with the flow and provide the necessary information to create your first project with Firebase.

Tip : You may also add projects from GCP to Firebase.

1. Register your app with Firebase :
   In the project overview page, select the iOS icon to launch the set up flow. If you have already added the app to your project provide click on add app to provide details of your application.
   a. Provide with your app’s bundle ID.
   Find this bundle ID from your open project in XCode. Select the top-level app in the project navigator, then access the General tab. The Bundle Identifier value is the iOS bundle ID (for example, com.yourcompany.ios-app-name).
   b. You may also provide optional details like App Nick Name and App Store ID.
   c. Register your app.

1. Add Firebase configuration file :
   a. Click Download GoogleService-Info.plist to obtain your Firebase iOS config file (GoogleService-Info.plist).

• You can download your Firebase iOS config file again at any time.
• Make sure the config file is not appended with additional characters, like (2).
b. Using XCode, move the file into the Runner/Runner directory of your Flutter app.
  c. Back in the Firebase console setup workflow, click Next to skip the remaining steps.

4. Add Firebase plugins :

Flutter uses plugins to provide access to a wide range of platform-specific services, such as Firebase APIs. Plugins include platform-specific code to access services and APIs on each platform.

Firebase is accessed through a number of different libraries, one for each Firebase product (for example: Realtime Database, Authentication, Analytics, or Storage). Flutter provides a set of Firebase plugins, which are collectively called FlutterFire.

Since Flutter is a multi-platform SDK, each FlutterFire plugin is applicable for both iOS and Android. So, if you add any FlutterFire plugin to your Flutter app, it will be used by both the iOS and Android versions of your Firebase app.

Adding the FlutterFire plugin, step by step :

1. From the root directory of your project, open the pubspec.yaml file and add the following code :

dependencies:
  flutter:
    sdk: flutter
  # Add the dependency for the Firebase Core Flutter SDK
  firebase_core: ^0.4.0+9

2. Add the plugin for the Firebase feature you want to use in your app :

dependencies:
  flutter:
    sdk: flutter
  # Check that you have this dependency (added in the previous step)
  firebase_core: ^0.4.0+9

  # Add the dependencies for the Firebase products you want to use in your app
  # For example, to use Firebase Authentication and Cloud Firestore
  firebase_auth: ^0.14.0+5
  cloud_firestore: ^0.12.9+5

3. Run flutter packages get.
Yay, take a bow! You have successfully introduced Firebase to your Flutter app.

Next Steps :

I hope reading this article will help you building better applications. However the purpose of this article is to not promote any particular technology since each application has it’s own unique need articles like these may help you find the best suitable technology.
If you have already launched your application and want to make your product popular, you may find another article of mine helpful.
Like this article, don’t forget to clap and make this article popular in your network and beyond.