一个Flutter / Firebase登录屏幕

一个简单的 Flutter/Dart 登录屏幕,连接 Firebase Auth,允许用户通过电子邮件或 Facebook 登录/注册。

它被创建为一个模板,我和你都可以在即将进行的项目中使用,而无需一遍又一遍地重复发明轮子。

Flutter login screen

使用此模板入门

由于它基于Firebase并使用Facebook登录,因此您需要执行以下操作才能使其正常工作

1)在Firebase上注册您的应用

https://firebase.google.com/ 注册并创建您的应用。

请确保将其注册为 Android 和 iOS 应用。

转到“身份验证” -> “登录方法”,然后启用“电子邮件/密码”和“Facebook”。遵循Firebase的说明正确设置。

完成后,转到您应用的设置页面并填写以下信息:

Android

  • 您的 Flutter 项目的包名称
  • 所有开发环境的 SHA 指纹。

完成后,下载 google-services.json 文件并将其放在您的 android/app/ 文件夹中。

iOS

  • AppNickname
  • 您 Flutter 项目的 BundleID。

完成后,下载 GoogleService-Info.plist 文件并将其放在 ios/runner/ 文件夹中。

重要提示:此文件也应通过 Xcode 添加到您的 Runner.xcodeproj。

在 Xcode 中打开文件时,在左侧菜单中找到 Runner 项目,然后右键单击它。

选择“将文件添加到Runner”,导航到您刚刚添加到 `ios/runner/` 文件夹的文件,然后选择它。

现在关闭 Xcode。

附加资源

2)在Facebook上注册您的应用

遵循此快速设置指南: https://medium.com/flutterpub/firebase-fb-sign-in-and-flutter-7ab4bdc7172e

您可以轻松进行的更改

由于我决定遵循MVC模式,因此您可以通过导航到主文件中的Model类来更改文本。此外,所有颜色和文本样式都应通过导航到主文件底部的Theme来轻松更改。

更新说明

2019年9月9日:提交了登录屏幕的v1.00版本。它已在iOS和Android上进行了测试,并且在大于iPhone SE的设备上应正常运行。

路线图

  • 通过在其他手机上进行测试来改善用户体验。确保没有溢出错误。
  • 为登录表单添加错误消息

GitHub

查看 Github