Fluttergram

使用 Firebase / Firestore 在 Flutter 中编写的运行正常的 Instagram 克隆

特点

• 基于你关注的人的自定义照片流（使用 Firebase 云函数）
• 通过相机或图库发布照片帖
  • 点赞帖子
  • 评论帖子
    • 查看帖子的所有评论
• 搜索用户
• 个人资料页面
  • 关注/取消关注用户
  • 将图片视图从网格布局更改为流式布局
  • 添加你自己的个人简介
• 显示最近点赞/评论的帖子以及新关注者的活动流

截图

依赖项

• Flutter
• Firestore
• 图片选择器
• Google 登录
• Firebase 认证
• UUID
• Dart图片
• Path Provider
• Font Awesome
• Dart HTTP
• Dart Async
• Flutter共享偏好设置
• Cached Network Image

开发者

1. Twitter

2. 克隆仓库

$ git clone https://github.com/rwema3/Fluttergram-App
$ cd fluttergram/

3. 设置 Firebase 应用

1. 你需要创建一个 Firebase 实例。请遵循 https://console.firebase.google.com 上的说明。
2. 创建 Firebase 实例后，你需要启用 Google 身份验证。

• 转到新实例的 Firebase 控制台。
• 在左侧菜单中点击“身份验证”
• 点击“登录方法”选项卡
• 点击“Google”并启用它

3. 创建云函数（用于实现 Feed 功能）

• 使用 firebase init 创建一个新的 Firebase 项目
• 将此项目的functions/lib/index.js复制到您的Firebase项目的functions/index.js
• 使用firebase deploy --only functions推送getFeed函数。在输出中，您将看到getFeed的URL，请复制它。
• 在feed.dart的_getFeed函数中，将URL替换为您在上一步中获得的Cloud Function URL。

如果此方法无效并且您收到错误Error: Error parsing triggers: Cannot find module './notificationHandler'，请尝试遵循这些步骤。如果您仍然无法使其正常工作，请提交一个新问题。

您可能需要运行firebase functions:log来创建必要的索引，然后点击链接

如果您没有收到任何错误，但Feed为空，您必须发布照片或关注有帖子的用户，因为getFeed函数仅返回您自己的帖子和您关注的人的帖子。

4. 启用 Firebase 数据库。

• 转到 Firebase 控制台。
• 在左侧菜单中点击“数据库”
• 点击 Cloudstore 的“创建数据库”按钮
• 选择“以测试模式开始”并“启用”

5. （如果不在 Android 上运行，则跳过）

• 为 Android 创建一个 Firebase 实例应用，包名设置为 com.yourcompany.news
• 运行以下命令获取您的 SHA-1 密钥。

keytool -exportcert -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

• 在 Firebase 控制台中，在你 Android 应用的设置中，通过点击“添加指纹”来添加你的 SHA-1 密钥。
• 按照说明下载 google-services.json。
• 将 google-services.json 放入 /android/app/。

6. （如果不在 iOS 上运行，则跳过）

• 在 Firebase 实例中为 iOS 创建一个应用，使用您的应用包名。
• 按照说明下载 GoogleService-Info.plist。
• 打开 XCode，右键单击 Runner 文件夹，选择“将文件添加到‘Runner’”菜单，然后选择 GoogleService-Info.plist 文件将其添加到 XCode 中的 /ios/Runner
• 在文本编辑器中打开 /ios/Runner/Info.plist。找到 CFBundleURLSchemes 键。此键的值数组中的第二个项目特定于 Firebase 实例。将其替换为 GoogleService-Info.plist 中 REVERSED_CLIENT_ID 的值。

仔细检查两者的安装说明

• Google Auth 插件
  • https://pub.dartlang.org/packages/firebase_auth
• Firestore 插件
  • https://pub.dartlang.org/packages/cloud_firestore

下一步？

• 点赞、评论、关注等的通知
• 动画（点赞图片时的心形） (#77)
• 改进个人资料、图片等的缓存
• 更好的帖子创建，为您的图片添加滤镜
• 自定义相机实现
• Firebase安全规则
• 删除帖子
• 直接消息
• 动态
• 清理代码

GitHub

查看 Github