Instagram 克隆

使用 Flutter 3 和 Firebase 实现的 Instagram 克隆。本项目侧重于 Flutter 的跨平台功能和响应式 UI。

  • Android, iOS & Web(稳定)
  • Macos (问题：image_picker 不可用)
  • Windows 和 Linux？(进行中：使用 Firedart 不支持 Firebase)

功能

  • 动态屏
    • 查看帖子，通过 stream builder 实现实时 UI 更新
    • 帖子的实时评论
    • 删除帖子
    • 点赞时的爱心动画
  • 搜索屏
    • 搜索屏显示除您自己的所有图片
    • 按用户名搜索
  • 图片上传屏
    • 上传带描述的图片
  • 个人资料屏
    • 关注/取消关注功能
    • 图片网格视图

待办事项

  • 一对一聊天屏
  • 编辑用户详情
  • Google 登录
  • 视频分享和标签支持
  • 单元测试
  • 为响应式视图添加功能
  • 通知屏
  • Windows 和 Linux 支持
  • Github Action 流水线

video.mp4

入门

1. 设置 Flutter

2. 克隆仓库

$ git clone https://github.com/debanshu777/Instagram-Clone
$ cd Instagram-Clone/

3. 设置 Firebase 应用

1. 您需要创建一个 Firebase 实例。请遵循 https://console.firebase.google.com 上的说明。

2. 创建 Firebase 实例后，您需要启用电子邮件和密码身份验证。

3. 启用 Firebase 数据库

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

4. 启用 Firebase Storage：执行与上述相同的操作

5. (未在 Android 上运行时跳过)

  • 在您的 Firebase 实例中为 Android 创建一个应用程序，包名称为 com.example.instagram_clone
  • 运行以下命令获取您的 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 文件夹，选择“Add Files to ‘Runner’”菜单，然后在 XCode 中选择 GoogleService-Info.plist 文件添加到 /ios/Runner（*请使用 XCode 进行此操作，否则无法确保配置*）
  • 确保在您的 /ios/Runner/Info.plist 中的 <dict> 块内添加这些以访问相机和图库

    <key>NSPhotoLibraryUsageDescription</key>
	<string>Photo Library Usage</string>
	<key>NSCameraUsageDescription</key>
	<string>Camara Usage</string>
	<key>NSMicrophoneUsageDescription</key>
	<string>Microphone Usage</string>

7. (未在 macOS 上运行时跳过)

  • 按照说明下载 GoogleService-Info.plist
  • 将其放入 /macos/ 目录中

仔细检查两者的安装说明

Firebase Firestore & Firebase Storage 结构

Firebase Storage Schema is simple, 
- posts---Folder(User ID as name)---images inside
- profileIamge---Images(User ID as name)

想贡献吗？

太棒了！如果您想为该项目做出贡献，随时欢迎！有任何问题、疑问或想表达您的意见、观点？随时欢迎。您可以发送电子邮件至 [email protected] 或创建一个 issue。正在寻找贡献者！不要害羞。？随时可以提交 issues/pull requests 来帮助我改进此项目。

  • 报告新 issue 时，请务必附上您报告问题的屏幕截图、视频或 GIF。
  • 提交新的 PR 时，请确保所有测试都通过。必要时编写新测试。

贡献者

许可证

Instagram 名称、艺术作品、商标均为 Meta Inc. 的财产。本项目仅用于教育目的。它不隶属于 Meta Inc.，也未获得其批准。

GitHub

查看 Github