Firebase for Flutter: A Beginner’s Guide

A simple guide on how to integrate Firebase to a Flutter app.

Building mobile apps especially cross-platform application nowadays has different approach but in Flutter it makes all steps in the development more simpler.

If you want to build apps with Authentication, Database and Storage, you can use Firebase.

Now, let’s begin.

Power of Firebase

Firebase offers a wide range of services like Authentication, NoSql Database — Firestore, Realtime Database, Cloud Functions, Storage and more.

Integrating Firebase to your apps make everything at ease from API costs to integration process.

I use Firebase for most of my apps and it helps us to fasten the development process in a way that we can focus in the features that we want to build for a certain app.

Video Source: Firebase official Youtube channel

The following information will help you on how to connect your Flutter app to Firebase. So let’s begin!

Requirements:
Android Studio Flamingo
Flutter SDK
Dart SDK
Flutter & Dart Plugin for Android Studio

Create a Flutter app

Open Android Studio (Flamingo) and create a new Flutter Project.

Let’s name our app as “flutterfire”.

Now that we already done setting up our Flutter app, we can now proceed by adding and configuring our Firebase Project.

Head to https://console.firebase.google.com/ and let’s create a project.

Click “Add Project”.

Use “Flutter Fire App” as the Project name.

Just click “Continue” to proceed to next step.

Use “Default Account for Firebase” and click “Create project” to finish the setup.

Finally, click “Continue”.

Next, install the Firebase CLI.

From any directory, run this command in Command Prompt or in a Terminal.

dart pub global activate flutterfire_cli

In your project directory, run this command.

flutterfire configure --project=APP_ID

You can opt-out each platform.

After pressing “Enter” this will be shown.

Congrats! We’re already done setting up our project.

Next, add this to your pubspec.yaml

  #Firebase Dependencies

  firebase_core_platform_interface: 4.6.0
  firebase_core: ^2.9.0
  firebase_analytics: ^10.2.0
  firebase_auth: ^4.4.0
  firebase_storage: ^11.1.0
  cloud_firestore: ^4.5.0

You can check the updated version of each package in pub.dev

Then proceed by executing Flutter Pub Get.

dart pub get

Modify the main method in main.dart and add this few lines.

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

// ...

await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
);

This will look like as follows:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

Add this to build.gradle (app).

apply plugin: 'com.google.gms.google-services'

implementation platform('com.google.firebase:firebase-bom:32.1.1')
implementation 'com.google.firebase:firebase-analytics-ktx'

Add this to the build.gradle root.

classpath 'com.google.gms:google-services:4.3.12'

Congrats! We’re done setting up our Flutter Fire project.

For the next steps, heads up to the next chapter which is adding Firebase Auth to our Flutter app.

Thank you for reading.

Up next, add the Firebase Auth to our app.