Fluttergram

一个使用 Firebase / Firestore 在 Flutter 中编写的可用 Instagram 克隆。

演示

下载发布版APK来体验Fluttergram

功能

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

屏幕截图

feed example upload photo example go to a profile from feed edit profile example comment and activity feed example

入门

1. 设置Flutter

2. 克隆仓库

$ git clone https://github.com/mdanics/fluttergram.git
$ cd fluttergram/

3. 设置 Firebase 应用

  1. 您需要创建一个 Firebase 实例。请按照 https://console.firebase.google.com 上的说明操作。
  2. 创建Firebase实例后,您需要启用匿名身份验证。
  • 转到新实例的 Firebase 控制台。
  • 在左侧菜单中点击“身份验证”。
  • 点击“登录方法”选项卡。
  • 点击“Google”并启用它。
  1. 创建云函数(用于实现 Feed 功能)
  • 使用 firebase init 创建一个新的 Firebase 项目
  • 将此项目的functions/lib/index.js文件复制到您的Firebase项目的functions/index.js文件中
  • 使用firebase deploy --only functions推送getFeed函数。在输出中,您会看到getFeed的URL,请复制它。
  • upload_page.dart_getFeed函数中,将URL替换为您上一步获取的云函数URL。
  1. 启用 Firebase 数据库。
  • 转到 Firebase 控制台。
  • 在左侧菜单中点击“数据库”。
  • 点击Cloudstore的“创建数据库”按钮
  • 选择“以测试模式开始”并“启用”。
  1. (如果不在 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/
  1. (如果不在 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 的值。

仔细检查两者的安装说明

下一步?

  • [ ] 改进配置文件、图片等的缓存
  • [ ] 更好的帖子创建,为您的图片添加滤镜
  • [ ] 自定义相机实现
  • [ ] 动画(点赞图片时的爱心动画)
  • [ ] Firebase安全规则
  • [ ] 删除帖子
  • [ ] 无需Google登录即可注册
  • [ ] 私信
  • [ ] 动态
  • [ ] 清理代码

GitHub

https://github.com/mdanics/fluttergram