Flutter / Firebase 登录屏幕

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

它被创建为一个模板,我或您可以在未来的项目中重复使用,而无需一遍又一遍地重新发明轮子。

开始使用此模板

由于它基于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-09-09:提交了 login_screen 的 1.00 版本。它已在 iOS 和 Android 上进行了测试,并且在大于 iPhone SE 的设备上运行良好。

路线图

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

GitHub

https://github.com/KimLangholz/flutter_login_screen