Integrating Firebase With Flutter (Android And iOS)

In this post I’m going to show you how to integrate Firebase with Flutter

First, create your Flutter application using Android studio. If you cannot see a menu to create a Flutter application, you first have to install Flutter and Flutter plugin in the Android Studio. To install Flutter you can download it from Flutter.io Here I’m going to use Kotlin for Android and Swift for iOS. But you can still use Java for Android and Objective C for iOS development with Flutter.

1. As the first step, you have to go to Firebase and create a Project in Firebase. In my scenario, I’m creating a new project called MyFlutterFirebaseTest

2. Go to your pubspec.yml and add following dependencies

dependencies:
flutter:
sdk: flutter
cloud_firestore: ^0.8.2

Then run Packages get to download the dependancies

Android

3. Register your Android application to firebase by entering your Android application package name and Debug SHA1 hash.

4. Download google-services.json and copy to your Android app folder

5. Add the following lines to your Android application’s Gradle files

6. Also set multiDexEnabled to true in your Android app

android {
    defaultConfig {
        ...
        multiDexEnabled true
    }
    ...
}

iOS

7. For iOS open Android Studio Terminal view, and type this command and execute

open ios/Runner.xcworkspace

This will open the iOS ‘Runner’ project in Xcode.

8. Copy the iOS bundle id from the xcode and register your iOS app with Firebase.

9. Download GoogleService-Info.plist and Skip the remaining steps in Firebae Console

10. ‘Runner project has a sub folder called ‘Runner’. Drag and drop your GoogleService-Info.plist file to your Runner subfolder and it should be visible in the subfolder. When you getting a pop in Xcode select ‘Keep Xcode Version’.

11. Go to your firebase console and create a Database in the test mode

13. Create a database as follows

13. Run your Android app and iOS app in the emulators and see if there are any errors

14. Replace your main.dart as follows

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: new StreamBuilder(
          stream: Firestore.instance.collection('students').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) return const Text('Loading...');
            return new ListView.builder(
                itemCount: snapshot.data.documents.length,
                padding: const EdgeInsets.only(top: 10.0),
                itemExtent: 25.0,
                itemBuilder: (context, index) {
                  DocumentSnapshot ds = snapshot.data.documents[index];
                  return new Text(" ${ds['name']} ${ds['class']}");
                }
            );
          }),
     
    );
  }
}

15. When you run the app you will see following output in your both Android and iOS emulators and That’s it