FLUTTER ECOSYSTEM

AhmedAbdoElhawary/flutter-clean-architecture-instagram

A full-featured Instagram clone built with Flutter, powered by Firebase for backend services and Agora for real-time video calls, offering posts, stories, chat, likes, comments, and more.

View on GitHub ↗

flutter-clean-architecture-instagram project cover

Stars: 334
Forks: 97
Last push (UTC): Aug 25, 2026
Project status: Active

GITHUB User

Ahmed Elhawary ↗

Mobile developer

Alexandria, Egypt

LanguagesDartHTMLC++CMakeSwiftRubyCKotlinObjective-C

Dependencies used

Dependency list 47 items

flutter{"sdk":"flutter"}
bloc^9.2.0
flutter_bloc^9.1.1
cloud_firestore^6.1.2
firebase_auth^6.1.4
firebase_core^4.4.0
firebase_storage^13.0.6
firebase_crashlytics^5.0.7
flutter_svg^2.2.3
readmore^3.0.0
equatable^2.0.8
fluttertoast^9.0.0
get_it^9.2.1
shared_preferences^2.5.4
pull_to_refresh{"git":{"url":"https://github.com/peng8350/flutter_pulltorefresh"}}
carousel_slider^5.1.2
inview_notifier_list^3.0.0
audioplayers^6.5.1
audio_video_progress_bar^2.0.3
flutter_phoenix^1.1.1
easy_localization^3.0.8
animated_text_kit^4.3.0
record^6.2.0
flutter_image_compress^2.4.0
image_picker^1.2.1
flutter_staggered_grid_view^0.7.0
cached_network_image^3.4.1
video_player^2.11.0
shimmer^3.0.0
get_storage^2.1.1
blurhash^1.2.0
get^4.7.3
video_thumbnail^0.5.6
permission_handler^12.0.1
overlay_support^2.1.0
flutter_blurhash^0.9.1
path_provider^2.1.5
animated_splash_screen^1.3.0
firebase_messaging^16.1.1
agora_rtc_engine^6.5.3
flutter_local_notifications^20.1.0
scrollable_positioned_list^0.3.8
flutter_launcher_icons^0.14.4
image_picker_plus^0.5.10+1
cupertino_icons^1.0.8
flutter_testDevelopment{"sdk":"flutter"}
flutter_lintsDevelopment^6.0.0

Rankings

Architecture#47

Original README

English project snapshot. Visit GitHub for the latest content.

Expand / collapse project README

flutter-clean-architecture-instagram

Instagram clean architecture using Flutter and Firebase ( frontend & backend ) with almost all functionalities

🚀 My Next Big Project

Algorithm Visualizer

If you want to work with me, you can find me here:

https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg

Notes

I didn't publish the keys such as messaging, agora, firebase web, or even google-services.json. So follow the steps (3. Setup the app) to add them.

Features

Support
- Arabic & English language
- Dark & Light theme
Custom gallery & camera & video display like Instagram "my package" image picker plus https://img.shields.io/pub/v/image_picker_plus.svg
Post features
- Support images & videos
- Support multi images in one post or mixin with them
- Like on a post and view all like with their profiles
- Comment on a post and replay on a (comment & replay)
  - Like on a comment & replay and view all like with their profiles
- Edit post
- Delete post
- Unfollow the user of the post
My Timelines Screen
- Custom posts & stories feed based on followers & followings
- Refresh the posts info
- Loading more posts (it displays five-by-five posts)
All Timelines Screen
- View all user's posts (images & videos)
- Change the screen from a grid layout to a timeline layout
Search for a user based on username
Video Screen
- It displays all user's videos with almost post features
- Control of sound & play
Profile Screen
- Follow / Unfollow Users
- Display images & videos in a separate view
- Change the screen from a grid layout to a timeline layout
- Edit profile info
Chat Screen
- Chat with any user
- Group chat
- Support
  - Text
  - Image (gallery & camera)
  - Voice
  - One-to-one video call
  - Group video call
Push Notifications
Send posts to chats

SnapShots for web

You can see the screen record from here google drive

https://user-images.githubusercontent.com/88978546/221562376-b44f5012-fa11-4bbf-9060-09cf8bb6397c.png https://user-images.githubusercontent.com/88978546/221562397-9998296f-2819-4b76-858e-0dcc18aed4d2.png https://user-images.githubusercontent.com/88978546/221562415-7d2e150a-833e-4020-9af4-b82864522d59.png https://user-images.githubusercontent.com/88978546/221562430-d4d250a0-e3c5-4b29-8376-08e92ea2b095.png https://user-images.githubusercontent.com/88978546/221563596-6b1ba30d-aecb-409e-a5a5-7fbf7f979a0a.png https://user-images.githubusercontent.com/88978546/221564852-459da62f-99b7-4104-98dc-67cb18a4cf4e.png

SnapShots

|--------- Sign page ----------|------- Welcome page --------|-------------- Stories ----------|

https://user-images.githubusercontent.com/88978546/193092118-a6e5ecfb-6ee0-42d2-9a40-b9616bee692d.gif https://user-images.githubusercontent.com/88978546/193092126-9c23eb3b-b6e7-4789-ab1b-a0e9cb6ab5b4.gif https://user-images.githubusercontent.com/88978546/193092135-05d3f4d5-9246-40a2-98e4-0432a54be598.gif

|-------- Home screen --------|------ Comment screen ------|-------- Create story ----------|

https://user-images.githubusercontent.com/88978546/193121221-4b31e55d-0add-4aef-9c3a-5f6b716674aa.gif https://user-images.githubusercontent.com/88978546/193093024-2db7c6cc-f633-4c87-9597-f4ff6ea8ef3f.gif https://user-images.githubusercontent.com/88978546/193093346-1128eff3-bff8-4674-985c-bd3b4c37890d.gif

|--------- Share post --------- |--------- Videos page ---------|---- personal profile page ---|

https://user-images.githubusercontent.com/88978546/193093277-b499a2ea-9834-4a0d-9558-1f6a8566c424.gif https://github.com/user-attachments/assets/44f259f9-bc8f-4e18-a9c6-4740793b283e https://user-images.githubusercontent.com/88978546/173257186-613a59c8-d5cc-40a1-b3aa-82c4545eb3a9.gif

|---- Change app theme -----|------- Logout & Login --------|-- Change app language -- |

https://user-images.githubusercontent.com/88978546/193093794-ff844bb8-c71e-42a0-b946-90e9187a833f.gif https://user-images.githubusercontent.com/88978546/193093811-1c150b97-627b-4680-aded-6e35793c3ccb.gif https://user-images.githubusercontent.com/88978546/193093824-229f21e9-e7d0-4498-b430-39441c9007d2.gif

|------ Following users -------|----- Unfollow all users ------|---- Change profile image ----|

https://user-images.githubusercontent.com/88978546/193093834-d8d7ed49-d703-4a2e-8f40-7404b3b57e27.gif https://user-images.githubusercontent.com/88978546/193093845-90ef0e55-1f62-4696-831a-e021e780004d.gif https://user-images.githubusercontent.com/88978546/193093861-babf4599-fc5e-46fa-87ad-7958a9c34a67.gif

|----- All users time line ------|----- Search about user ------|---------- Create post ------- |

https://user-images.githubusercontent.com/88978546/193094015-3f8f2186-48b8-49cd-ad16-0efb65223f3c.gif https://user-images.githubusercontent.com/88978546/193094159-1cb6a582-7b70-464e-9c4e-41c6c03eabaf.gif https://user-images.githubusercontent.com/88978546/193127197-cd45b689-68f3-48b3-9279-04ad996e10ca.gif

|-------- Create video ---------|---- Show created video -----|---- share created video -----|

https://user-images.githubusercontent.com/88978546/193094411-2ea2f0a8-131e-41d7-96eb-9b2fe348e6a5.gif https://user-images.githubusercontent.com/88978546/193094453-79d480b3-1774-41c7-853c-eb537748b74d.gif https://user-images.githubusercontent.com/88978546/193094469-21358a55-443c-4d48-8ecd-95d0095d2b25.gif

|----------- Edit post ----------|-------- Notifications ---------|-------- Activity page --------|

https://user-images.githubusercontent.com/88978546/193094494-8cc71b18-4f08-4535-be25-6d5e2624c5ab.gif https://user-images.githubusercontent.com/88978546/193094512-a09a0b7a-aeff-45bc-b3e6-d93b271c94ef.gif https://user-images.githubusercontent.com/88978546/193094534-d66b3819-b726-47c5-897c-476a27a84a96.gif

|--------------------------- Chatting ----------------------------|

https://user-images.githubusercontent.com/88978546/173257255-4fdd1318-3e21-47e4-bc4b-3f3809dc5b9c.gif https://user-images.githubusercontent.com/88978546/173257249-3aef7bd3-8174-45ce-9af9-73696ff20c8d.gif

|-------------------------- Video call ---------------------------|

https://user-images.githubusercontent.com/88978546/193158603-31563c80-91c5-4044-a984-f4067436bb41.gif https://user-images.githubusercontent.com/88978546/193158607-e559285c-3fa3-461a-b0ab-a0d4737189a7.gif

Getting started

1. Setup Flutter

2. Clone the repo

$ git clone https://github.com/AhmedAbdoElhawary/flutter-clean-architecture-instagram
$ cd flutter-clean-architecture-instagram/

3. Setup the app

I made the setup with more details and visuals to make it easy for any level to set up the app.

Click to expand

.Connection with Firebase

Run this line in your PowerShell as administrator:

Set-ExecutionPolicy RemoteSigned

Then, press y to comfirm

We need to log in with Firebase. Run this line:

firebase login

Then, press y to comfirm
Then, choose the account that you want to create Firebase services with it.
Then, press Allow

In PowerShell, write the disk that the project is exciting. For example, I have InstaAwesome in D. So, I will write it Like this:

d:

Add the following line, replacing <path-to-project-root> with the path to the project root:

cd <path-to-project-root>

Then, run this line:

dart pub global activate flutterfire_cli

Then, run this line:

flutterfire configure

Select Create a new project and press enter
Screenshot-91
Write project name with this format my-cool-project
Screenshot-92
Select android, ios, and web. dis select macos right now, And press Enter
Screenshot-93

Enable Firebase services

Enable those services: Authentication, Firestor Database, Storage, and Messaging. And take the ‘Cloud Messaging server key’ copy from ‘Cloud Messaging’ in ‘Project settings’.

Enable Email/Password in Authentication:
Screenshot-94
Screenshot-95
Screenshot-98
Enable Firestor Database:
Screenshot-99
Screenshot-100
Screenshot-101

Change allow read, write: if false; to allow read, write: if true;
Screenshot-102
Screenshot-103

Enable Storage the same as Firebase Database:
Screenshot-104
Screenshot-105
Screenshot-106
Enable Messaging
Screenshot-107
Screenshot-108
Screenshot-110
Screenshot-111
Screenshot-112
Enable Messaging Server key
Screenshot-109
Screenshot-114
Screenshot-115

Take the server key copy:
Screenshot-118
Then, past the key in the project lib\core\utility\private_keys.dart in notificationKey after = like this:
Screenshot-123

.Connection with Agora

Agora is a real-time communication platform that provides a set of APIs and SDKs for adding voice↳

Step 1: Create an Agora Account and Get a Test Key

Before we can connect our Flutter app with Agora, we need to create an Agora account and get a test key. Here are the steps to get an Agora test key:

Go to the Agora website and sign up for an account.
After you have signed up, log in to the Agora Project Management with your account credentials.
Screenshot-124
Click on the “Create a Project”
Screenshot-125
Enter a name for your project and select any Use Case.
Select Testing mode: APP ID
Press Sumbit
Screenshot-126
Take App ID copy
Screenshot-127
Past it in agoraAppId variable.
Screenshot-128

Congratulations! The project is ready.

What's Next?

[x] Notifications for likes, comments, follows, etc
[x] Caching of Profiles, Images, Etc.
[x] Calling video and voice in chat
[x] Create a group chat
[x] Calling video and voice in group chat
[x] Send posts to chats
[x] control in the dimension of selected images & video from the gallery
[x] Custom gallery display
[x] Improve display loading of posts when opening the app
[x] share post
[x] Make like, comment, and share of animation container post touchy when long pressed on post
[x] Make it stable for the web
[ ] Clean up more code

How to Contribute

Fork the project
Create your feature branch (git checkout -b my-new-feature)
Make required changes and commit (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create a new Pull Request