Skip to content

Latest commit

 

History

History
303 lines (233 loc) · 12.1 KB

overview.mdx

File metadata and controls

303 lines (233 loc) · 12.1 KB
id title sidebar_label hide_title
overview
FlutterFire Overview
Overview
true

<img data-asset="false" src="/img/flutterfire.svg" alt="FlutterFire Logo" style={{ height: 100, display: "block", margin: "0 auto", }} />

FlutterFire Overview

Welcome to FlutterFire! 🔥

FlutterFire is a set of Flutter plugins which connect your Flutter application to Firebase.

Get to know Firebase for Flutter

If you're new to using Firebase in Flutter we recommend starting with the Get to know Firebase for Flutter codelab and video:

Prerequisites

Before getting started, the documentation assumes you are able to create (or have an existing) Flutter project and also have an active Firebase project. If you do not meet these prerequisites, follow the links below:

Installation

:::caution Are you migrating your existing project to these new plugins? Please start with the migration guide. :::

Before any Firebase services can be used, you must first install the firebase_core plugin, which is responsible for connecting your application to Firebase. Add the plugin to your pubspec.yaml file:

<Tabs groupId="legacy-or-nullsafe" defaultValue="legacy" values={[ { label: "Legacy", value: "legacy" }, { label: "Null safety", value: "null-safe" }, ]}

dependencies:
  flutter:
    sdk: flutter
  firebase_core: "{{ plugins.firebase_core }}"
dependencies:
  flutter:
    sdk: flutter
  firebase_core: "^{{ plugins.firebase_core_ns }}"

Install the plugin by running the following command from the project root:

$ flutter pub get

Platform Setup

Once installed, Firebase needs to be configured to work with the various platforms you're working with:

  1. Android Installation.
  2. iOS Installation.
  3. MacOS Installation.
  4. Web Installation.

Initializing FlutterFire

Before any of the Firebase services can be used, FlutterFire needs to be initialized (you can think of this process as FlutterFire "bootstrapping" itself). The initialization step is asynchronous, meaning you'll need to prevent any FlutterFire related usage until the initialization is completed.

To initialize FlutterFire, call the initializeApp method on the Firebase class:

await Firebase.initializeApp();

The method is asynchronous and returns a Future, so you need to ensure it has completed before displaying your main application. The examples below show how this can be achieved with a FutureBuilder or a StatefulWidget:

<Tabs defaultValue="future" values={[ { label: 'FutureBuilder', value: 'future', }, { label: 'StatefulWidget', value: 'state', }, ] }> 

import 'package:flutter/material.dart';

// Import the firebase_core plugin
import 'package:firebase_core/firebase_core.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(App());
}

/// We are using a StatefulWidget such that we only create the [Future] once,
/// no matter how many times our widget rebuild.
/// If we used a [StatelessWidget], in the event where [App] is rebuilt, that
/// would re-initialize FlutterFire and make our application re-enter loading state,
/// which is undesired.
class App extends StatefulWidget {
  // Create the initialization Future outside of `build`:
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  /// The future is part of the state of our widget. We should not call `initializeApp`
  /// directly inside [build].
  final Future<FirebaseApp> _initialization = Firebase.initializeApp();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // Initialize FlutterFire:
      future: _initialization,
      builder: (context, snapshot) {
        // Check for errors
        if (snapshot.hasError) {
          return SomethingWentWrong();
        }

        // Once complete, show your application
        if (snapshot.connectionState == ConnectionState.done) {
          return MyAwesomeApp();
        }

        // Otherwise, show something whilst waiting for initialization to complete
        return Loading();
      },
    );
  }
}
import 'package:flutter/material.dart';

// Import the firebase_core plugin
import 'package:firebase_core/firebase_core.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(App());
}

class App extends StatefulWidget {
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  // Set default `_initialized` and `_error` state to false
  bool _initialized = false;
  bool _error = false;

  // Define an async function to initialize FlutterFire
  void initializeFlutterFire() async {
    try {
      // Wait for Firebase to initialize and set `_initialized` state to true
      await Firebase.initializeApp();
      setState(() {
        _initialized = true;
      });
    } catch(e) {
      // Set `_error` state to true if Firebase initialization fails
      setState(() {
        _error = true;
      });
    }
  }

  @override
  void initState() {
    initializeFlutterFire();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // Show error message if initialization failed
    if(_error) {
      return SomethingWentWrong();
    }

    // Show a loader until FlutterFire is initialized
    if (!_initialized) {
      return Loading();
    }

    return MyAwesomeApp();
  }
}

Once initialized, you're ready to get started using FlutterFire!

Improve iOS Build Times

Currently the Firestore iOS SDK depends on some 500k lines of mostly C++ code which can take upwards of 5 minutes to build in XCode. To reduce build times significantly, you can use a pre-compiled version by adding 1 line to your ios/Podfile inside your Flutter project;

pod 'FirebaseFirestore', :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git', :tag => '8.0.0'

Add this line inside your target 'Runner' do block in your Podfile, e.g.:

# ...
target 'Runner' do
  pod 'FirebaseFirestore', :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git', :tag => '8.0.0'
# ...
end

Additionally, ensure that you have upgraded your cocoapods to 1.9.1 or higher: gem install cocoapods

For more information see this issue: #2751

Overriding Native SDK Versions

FlutterFire internally sets the versions of the native SDKs that each module uses. Each release is tested against a fixed set of SDK version to ensure everything works as expected.

If you wish to change these versions, you can manually override the native SDK versions

Android

In the /android/app/build.gradle file, you can provide your own versions using the options shown below:

rootProject.ext {
  set('FlutterFire', [
    FirebaseSDKVersion: '25.12.0'
  ])
}

iOS/MacOS

Open your /ios/Podfile or /macos/Podfile file and add any of the globals below to the top of the file:

# Override Firebase SDK Version
$FirebaseSDKVersion = '8.0.0'

Next Steps

On its own the firebase_core plugin provides basic functionality for usage with Firebase. FlutterFire is broken down into several individual installable plugins that allow you to integrate with a specific Firebase service.

The table below lists all of the currently supported plugins. You can follow the documentation for each plugin to get started:

Firebase Description FlutterFire Plugin
Authentication Using Firebase Authentication you can authenticate users to your app using several methods such as passwords, phone numbers, and popular federated providers like Google, Facebook, and more.

View documentation »		 firebase_auth
Cloud Firestore Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.

View documentation »		 cloud_firestore
Core The firebase_core plugin is used to initialize FlutterFire and connect your application with multiple Firebase projects.

View documentation »		 firebase_core
Cloud Storage Cloud Storage is designed to help you quickly and easily store and serve user-generated content, such as photos and videos.

View documentation »		 firebase_storage
Crashlytics Crashlytics helps you to collect analytics and details about crashes and errors that occur in your app.

View documentation »		 firebase_crashlytics
Cloud Messaging Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost.

View documentation »		 firebase_messaging
Cloud Functions Cloud Functions for Firebase let you automatically run backend code in response to events triggered by Firebase features and HTTPS requests.

View documentation »		 cloud_functions