Fluttergram
一个使用 Firebase / Firestore 在 Flutter 中编写的可用 Instagram 克隆。
演示
功能
- 基于你关注的人的自定义照片流(使用 Firebase 云函数)
- 通过相机或图库发布照片帖
- 点赞帖子
- 评论帖子
- 查看帖子的所有评论
- 搜索用户
- 个人资料页面
- 关注/取消关注用户
- 将图片视图从网格布局更改为流式布局
- 添加你自己的个人简介
- 显示最近点赞/评论的帖子以及新关注者的活动流
屏幕截图
入门
1. 设置Flutter
2. 克隆仓库
$ git clone https://github.com/mdanics/fluttergram.git
$ cd fluttergram/
3. 设置 Firebase 应用
- 您需要创建一个 Firebase 实例。请按照 https://console.firebase.google.com 上的说明操作。
- 创建Firebase实例后,您需要启用匿名身份验证。
- 转到新实例的 Firebase 控制台。
- 在左侧菜单中点击“身份验证”。
- 点击“登录方法”选项卡。
- 点击“Google”并启用它。
- 创建云函数(用于实现 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。
- 启用 Firebase 数据库。
- 转到 Firebase 控制台。
- 在左侧菜单中点击“数据库”。
- 点击Cloudstore的“创建数据库”按钮
- 选择“以测试模式开始”并“启用”。
- (如果不在 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/。
- (如果不在 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 插件
- Firestore 插件
下一步?
- [ ] 改进配置文件、图片等的缓存
- [ ] 更好的帖子创建,为您的图片添加滤镜
- [ ] 自定义相机实现
- [ ] 动画(点赞图片时的爱心动画)
- [ ] Firebase安全规则
- [ ] 删除帖子
- [ ] 无需Google登录即可注册
- [ ] 私信
- [ ] 动态
- [ ] 清理代码