Flutter Firebase UI集成插件firebase_ui_shared的使用

Flutter Firebase UI集成插件firebase_ui_shared的使用

Firebase UI Shared

firebase_ui_shared 是一个用于在各个 Firebase UI 包之间共享组件的库。它提供了一些常用的 UI 组件和工具函数，帮助开发者更轻松地集成 Firebase 服务到 Flutter 应用中。

开始使用

要开始使用 firebase_ui_shared，首先需要将其添加为依赖项。可以通过以下命令将该插件添加到项目的 pubspec.yaml 文件中：

flutter pub add firebase_ui_shared

使用示例

下面是一个完整的示例代码，展示了如何在 Flutter 项目中使用 firebase_ui_shared 插件。这个示例包括了如何配置 Firebase、初始化应用以及使用 firebase_ui_shared 提供的组件。

完整示例代码

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_ui_shared/firebase_ui_shared.dart'; // 导入 firebase_ui_shared

void main() async {
  // 确保在 runApp 之前初始化 Firebase
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase UI Shared Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Firebase UI Shared Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Welcome to the Firebase UI Shared Demo!',
              style: Theme.of(context).textTheme.headline5,
            ),
            SizedBox(height: 20),
            // 使用 firebase_ui_shared 提供的按钮组件
            PrimaryButton(
              onPressed: () {
                // 模拟登录操作
                FirebaseAuth.instance.signInWithEmailAndPassword(
                  email: 'user@example.com',
                  password: 'password123',
                ).then((value) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Login successful!')),
                  );
                }).catchError((error) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Login failed: $error')),
                  );
                });
              },
              child: Text('Sign In'),
            ),
            SizedBox(height: 20),
            // 使用 firebase_ui_shared 提供的文本输入框组件
            EmailInputField(
              onChanged: (email) {
                print('Email changed: $email');
              },
            ),
            SizedBox(height: 20),
            // 使用 firebase_ui_shared 提供的密码输入框组件
            PasswordInputField(
              onChanged: (password) {
                print('Password changed: $password');
              },
            ),
          ],
        ),
      ),
    );
  }
}