flutterfire_ui 0.4.3+12 icon indicating copy to clipboard operation
flutterfire_ui: ^0.4.3+12 copied to clipboard

UI library built on top of firebase services

FlutterFire UI #

pub package

FlutterFire UI is a set of Flutter widgets and utilities designed to help you build and integrate your user interface with Firebase.

FlutterFire UI is still in beta and is subject to change. Please contribute to the discussion with feedback.

Installation #

flutter pub add flutterfire_ui

Getting Started #

Here's a quick example that shows how to build a SignInScreen and ProfileScreen in your app

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutterfire_ui/auth.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const providerConfigs = [EmailProviderConfiguration()];

    return MaterialApp(
      initialRoute: FirebaseAuth.instance.currentUser == null ? '/sign-in' : '/profile',
      routes: {
        '/sign-in': (context) {
          return SignInScreen(
            providerConfigs: providerConfigs,
            actions: [
              AuthStateChangeAction<SignedIn>((context, state) {
                Navigator.pushReplacementNamed(context, '/profile');
              }),
            ],
          );
        },
        '/profile': (context) {
          return ProfileScreen(
            providerConfigs: providerConfigs,
            actions: [
              SignedOutAction((context) {
                Navigator.pushReplacementNamed(context, '/sign-in');
              }),
            ],
          );
        },
      },
    );
  }
}

Learn more in the Integrating your first screen section of the documentation

Roadmap / Features #

FlutterFire UI is still in active development.

Please contribute to the discussion with feedback.

Next Steps #

Once installed, you can read the following documentation to learn more about the FlutterFire UI widgets and utilities: