Firebase UI 在 Flutter 中的使用

Firebase UI 概述

firebase_ui 是一个帮助快速实现 Firebase 认证的库。它提供了常见的身份提供商（如 Facebook、Google、Twitter 和电子邮件）的用户界面。

注意：此插件使用 firebase_auth，您必须按照 这里 的说明进行配置。

您可以查看 firebase_ui 示例。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  firebase_auth: ^3.3.0
  firebase_ui: ^0.1.0

运行 flutter pub get 来安装依赖。

2. 配置 Firebase

确保您已经在 Firebase 控制台中正确配置了您的项目，并添加了 Android 和 iOS 平台。具体步骤可以参考官方文档 这里。

3. 创建示例应用

以下是一个完整的示例代码，展示如何使用 firebase_ui 实现登录和注销功能。

示例代码

import 'dart:async';

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:firebase_ui/flutter_firebase_ui.dart';
import 'package:firebase_ui/l10n/localization.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase UI Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        FFULocalizations.delegate, // Firebase UI 提供的本地化支持
      ],
      supportedLocales: [
        const Locale('fr', 'FR'),
        const Locale('en', 'US'),
        const Locale('de', 'DE'),
        const Locale('pt', 'BR'),
        const Locale('es', 'MX'),
      ],
      home: MyHomePage(title: 'Flutter Firebase UI Demo'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  StreamSubscription<FirebaseUser> _listener;

  FirebaseUser _currentUser;

  [@override](/user/override)
  void initState() {
    super.initState();
    _checkCurrentUser();
  }

  [@override](/user/override)
  void dispose() {
    _listener.cancel();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    if (_currentUser == null) {
      return SignInScreen(
        title: "Demo",
        header: Padding(
          padding: const EdgeInsets.symmetric(vertical: 16.0),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text("Demo"),
          ),
        ),
        showBar: true,
        horizontalPadding: 12,
        bottomPadding: 5,
        avoidBottomInset: true,
        color: Color(0xFF363636),
        providers: [
          ProvidersTypes.google,
          ProvidersTypes.facebook,
          ProvidersTypes.twitter,
          ProvidersTypes.email
        ],
        twitterConsumerKey: "",
        twitterConsumerSecret: "",
      );
    } else {
      return HomeScreen(user: _currentUser);
    }
  }

  void _checkCurrentUser() async {
    _currentUser = await _auth.currentUser();
    _currentUser?.getIdToken(refresh: true);

    _listener = _auth.onAuthStateChanged.listen((FirebaseUser user) {
      setState(() {
        _currentUser = user;
      });
    });
  }
}

class HomeScreen extends StatelessWidget {
  final FirebaseUser user;

  HomeScreen({this.user});

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text("Bienvenue"),
          elevation: 4.0,
        ),
        body: Container(
          padding: const EdgeInsets.all(16.0),
          decoration: BoxDecoration(color: Colors.amber),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text("Welcome,"),
                ],
              ),
              SizedBox(height: 8.0),
              Text(user.displayName ?? user.email),
              SizedBox(height: 32.0),
              RaisedButton(
                child: Text("Déconnexion"),
                onPressed: _logout,
              )
            ],
          ),
        ),
      );

  void _logout() {
    signOutProviders(); // 调用 Firebase UI 提供的登出方法
  }
}