tusharkhatriofficial / instagarm-full-stack-clone-flutter

A full stack clone app of Instagram coded in Dart.

Instagram Clone

Full Stack Instagram Clone made with ❤ using Flutter & Firebase.

Click on the link below to view the Overview video by Tushar Khatri.

Overview Video

Click on the link below to download the Apk file to try it out quickly on a real device.

Download Apk file

Click on the link below to view this web app live.

https://instagram-clone-dba0c.firebaseapp.com/

Mobile

Web

Getting Started

To clone this Project into you machine follow the steps mentioned below:

This app is configured for Web, android and IOS

Mandatory

• In main.dart file fill out all the required keys left blank in FirebaseOptions(), These keys are important to run this app on web and you will get all this information by creating a Web app in your Firebase project.
• use the following command to run it on web without rendering errors:

flutter run -d chrome --web-renderer html

For Android

• Place google-services.json file in android/app/

For Ios

• Place GoogleService-Info.plist file in ios/Runner/

voilà you are ready to hit run 🎉✨

A few resources to get you started if this is your first Flutter project:

• Lab: Write your first Flutter app
• Cookbook: Useful Flutter samples

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

instagarm-full-stack-clone-flutter's Issues

When we login to the application an error shows up resulting in black screen or red screen for a short time, this is due to the profile image url which is null and is being fetched to be displayed on the bottom navigation bar.

The URL of the profile image is fetched using the state management, instead of the error try showing Circular Progress Indicator while the app fetches the profile image url.

there is a problem

Please I want a solution to this problem

Improve the UI of Signup Screen for web, try to make it exact like real instagram and also fit in the Circle Avatar somewhere

Implement Light and Dark theme.

Add a button to the bottom sheet that appears, just below the Logout button to toggle between Light and Dark theme.

Improve the UI of Login Screen for web, try to make it exact like real instagram