Instagram Clone developed with Flutter & Firebase

Overview

Instagram Clone

A completely Responsive Instagram App- Works on Android, iOS & Web!

Features

  • Responsive Instagram UI
  • Email & Password Authentication
  • Share Posts with Caption
  • Display Posts with Caption
  • Like & Comment on Posts
  • Search Users
  • Follow Users
  • Display User Posts, Followers & Following
  • EVERYTHING REAL TIME
  • Sign Out

YouTube

I have created a tutorial based on this, do check it out on my channel Rivaan Ranawat

Youtube Tutorial Image

Installation

After cloning this repository, migrate to instagram-flutter-clone folder. Then, follow the following steps:

  • Create Firebase Project
  • Enable Authentication
  • Make Firestore Rules
  • Create Android, iOS & Web Apps
  • Take Web FirebaseOptions and put it in main function in main.dart file replacing my keys (My keys wont work as I deleted my project) Then run the following commands to run your app:
  flutter pub get
  open -a simulator (to get iOS Simulator)
  flutter run
  flutter run -d chrome --web-renderer html (to see the best output)

Tech Used

Server: Firebase Auth, Firebase Storage, Firebase Firestore

Client: Flutter, Provider

Feedback

If you have any feedback, please reach out to me at [email protected]

Comments
  • signup bio text field fix

    signup bio text field fix

    FOR ANDROID When we focus on Bio text field inside signUp page the textflied does not go up that is we can not see what we are typing if we wrap the container inside the safearea in singleChildScrollView() the issue will be fixed plus we can add physics of bouncingscrollphysics so that it looks clean

    here my is code for just UI import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:instagram/utils/color.dart'; import 'package:instagram/widgets/text_fill_input.dart';

    class SignUpScreen extends StatefulWidget { const SignUpScreen({Key? key}) : super(key: key);

    @override _SignUpScreenState createState() => _SignUpScreenState(); }

    class _SignUpScreenState extends State { final TextEditingController _emailController = TextEditingController(); final TextEditingController _passwordController = TextEditingController(); final TextEditingController _bioController = TextEditingController(); final TextEditingController _usernameController = TextEditingController(); @override void dispose() { // TODO: implement dispose super.dispose(); _emailController.dispose(); _passwordController.dispose(); _bioController.dispose(); _usernameController.dispose(); }

    @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: SingleChildScrollView( physics: const BouncingScrollPhysics(), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 32), child: Container( width: double.infinity, child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ // Flexible( // child: Container(), // flex: 2, // ), //svg image SvgPicture.asset( 'assets/ic_instagram.svg', color: primaryColor, height: 64, ), const SizedBox( height: 64, ), //circle avaatar InkWell( onTap: () {}, borderRadius: BorderRadius.circular(100), child: const Padding( padding: EdgeInsets.all(8.0), child: CircleAvatar( radius: 64, backgroundImage: NetworkImage( 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyRQMnGzDaaUvx0wbRLJnc_JzEz_VCs44CBY-UOvh0kaacPJEAgPnXWQCYf2WroEwfl7w&usqp=CAU'), ), ), ), const SizedBox( height: 24, ), //text field for username TextFieldInput( textEditingController: _usernameController, hintText: 'Enter Your Username', textInputType: TextInputType.text), const SizedBox( height: 24, ), //text field for email TextFieldInput( textEditingController: _emailController, hintText: 'Enter Your Email', textInputType: TextInputType.emailAddress), const SizedBox( height: 24, ), //text fiel for password TextFieldInput( textEditingController: _passwordController, hintText: 'Enter Your Password', textInputType: TextInputType.text, isPass: true, ), const SizedBox( height: 24, ), //text field for bio TextFieldInput( textEditingController: _bioController, hintText: 'Enter Your Bio', textInputType: TextInputType.text), const SizedBox( height: 24, ), //button login InkWell( onTap: () {}, child: Container( child: const Text("Sign up"), width: double.infinity, alignment: Alignment.center, padding: const EdgeInsets.symmetric(vertical: 12), decoration: ShapeDecoration( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(4), ), color: blueColor, ), ), ), const SizedBox( height: 12, ), // Flexible( // child: Container(), // flex: 2, // ), //transition to signing up Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.symmetric(vertical: 8.0), child: Container( child: const Text("Don't have an account?"), ), ), GestureDetector( onTap: () {}, child: Padding( padding: const EdgeInsets.symmetric(vertical: 8.0), child: Container( child: const Text( " Sign up.", style: TextStyle( fontWeight: FontWeight.bold, ), ), ), ), ) ], ) ], ), ), ), ), )); } }

    opened by smil-thakur 3
  • SignUpScreen

    SignUpScreen

    Hi everyone, the _image is null, so the signUpUser cannot be triggered if the user does not enter an image. this leads to an error by the postfix ! operator. _CastError (Null check operator used on a null value).

    String res = await AuthMetods().signUpUser( email: _emailController.text, bio: _bioController.text, password: _passwordController.text, username: _usernameController.text, file: _image!, );

    If we follow the logic of the application the user will have a default image.

    how can we manage this with Firebase ? if the user doesn't enter an image ?

    waiting 
    opened by bedfir 2
  • flutter.compileSdkVersion question

    flutter.compileSdkVersion question

    In the android/app/build.gradle you refernced flutter.compileSdkVersion (this appears to be read from somewhere else?, how/where is the compileSdkVersion set?)

    Likewise you referenced flutter.targetSdkVersion (where does this come from?)

    opened by dyardy 2
  • class AuthMetods methods conditions

    class AuthMetods methods conditions

    I think you have made a mistake on both methods loginUser and signUpUser you have used operator OR instead of AND. therefore the fields are not required.

    ` if (email.isNotEmpty || password.isNotEmpty || username.isNotEmpty || bio.isNotEmpty || file != null) {

    return "Only one fiield are required with the || operator";
    

    } `

    opened by bedfir 1
  • Search screen - Bad state: field does not exist within the DocumentSnapshotPlatform

    Search screen - Bad state: field does not exist within the DocumentSnapshotPlatform

    You might be having this error for the search_screen : Bad state: field does not exist within the DocumentSnapshotPlatform You need to had in FutureBuilder : body: isShowUsers ? FutureBuilder(

    opened by Ktharsix 1
  • Null check operator used on a null value

    Null check operator used on a null value

    I setup Firebase auth, database, storage, on android and updated goole_service..json (I am on windows pc, using android emulator)

    After clicking on create user I get

    Null check operator used on a null value See also: https://flutter.dev/docs /testing/errors

    opened by dyardy 1
  • Posts - Don't have the good lenght in SearchScreern

    Posts - Don't have the good lenght in SearchScreern

    When I go to an other profil, the number of the posts keep the value of the current user connected. And the other data like Followers and Following is working.

    ====> Resolve :

    Change your variable "postSnap" by :

    var postSnap = await FirebaseFirestore.instance
              .collection('posts')
              .where('uid', isEqualTo: widget.uid)
              .get();
    
    opened by Ktharsix 0
  • Search Screen StateError (Bad state: field does not exist within the DocumentSnapshotPlatform)

    Search Screen StateError (Bad state: field does not exist within the DocumentSnapshotPlatform)

    If you get "StateError (Bad state: field does not exist within the DocumentSnapshotPlatform)" on search screen at :

    (snapshot.data! as dynamic).docs[index] ['photoUrl'],
    

    you should use: if (snapshot.connectionState == ConnectionState.waiting)

    instead of : if (!snapshot.hasData)

    It looks like hasdata returns true for any non-null data, and [] is non-null data, hence hasdata will return true while the snapshot is still in a waiting state.

    Always use ConnectionState.waiting, never use junky hasdata which actually means "not null".

    opened by Davepn16 0
  • Added some null check operation for creating the user at signup without an profile photo

    Added some null check operation for creating the user at signup without an profile photo

    All changes:

    • update kotlin version // to run in flutter 3.3.10 version
    • added null check at a time of user creation so user can create profile without uploading the profile image
    • Replace the custom textfield with better coding style.
    opened by ArbazShaikh077 0
  • type 'Null' is not a subtype of type 'String'

    type 'Null' is not a subtype of type 'String'

    Error showing in debug console E/flutter ( 9425): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: type 'Null' is not a subtype of type 'String' E/flutter ( 9425): #0 User.fromSnap package:insta_clone/models/user.dart:26 E/flutter ( 9425): #1 AuthMethods.getUserDetails package:insta_clone/resources/auth_methods.dart:19 E/flutter ( 9425): E/flutter ( 9425): #2 UserProvider.refreshUser package:insta_clone/providers/user_provider.dart:13 E/flutter ( 9425): E/flutter ( 9425): #3 _ResponsiveLayoutState.addData package:insta_clone/responsive/responsive_layout.dart:28 E/flutter ( 9425):

    From user.dart static User fromSnap(DocumentSnapshot snap) { var snapshot = snap.data() as Map<String, dynamic>; return User( username: snapshot['username'], uid: snapshot['uid'], email: snapshot['email'], photoUrl: snapshot['photoUrl'], (error putting here on ['photoUrl') followers: snapshot['followers'], following: snapshot['following'], ); }

    From auth_methods.dart DocumentSnapshot documentSnapshot = await _firestore.collection('users').doc(currentUser.uid).get();

    return model.User.fromSnap(documentSnapshot); (error pointing here on fromSnap)
    

    } please help stuck here from last 1 week, i have tried solutions to solve that red screen problem, but after that it just showing cirular progess indicator, i have deleted users from database but after that too its showing errors.

    opened by utkarshshukla03 3
  • Fixed #10 issue.

    Fixed #10 issue.

    I have upgraded some minor packages and fixed the null check by adding an if condition and another condition to make other values not empty. Here #10 and #3 are fixed. Thank you

    opened by jinosh05 2
  • Null check operator used on a null value from userProvider

    Null check operator used on a null value from userProvider

    Hello everyone, I am encountering the issue of null check, I followed the tutorial video, around 3:17:28, when I switched the networkImage with user.photoUrl: image

    The null check error was thrown from the userProvider, error message: Exception has occurred. _CastError (Null check operator used on a null value), my code of userProvider.dart: image

    I have already tried upgrading the pub version, or using the final Userprovider userprovider instead of User, the result is either showing nothing after pressing the upload icon, or throwing the error of: Exception has occurred. _CastError (Null check operator used on a null value).

    I would like to know how to resolve it, Thanks!

    waiting 
    opened by javaskrskr 29
Owner
Rivaan Ranawat
Interested In App & Web Development.
Rivaan Ranawat
Instagram clone built using flutter and firebase

instagram_clone An instagram clone built using Flutter and Firebase. Introduction Flutter is a develpment kit created by google using which you can bu

Nadeem Choudhary 3 Jun 8, 2022
Working Instagram Clone (Frontend + Backend) created with Flutter and Firebase

Instagram_clone Instagram Clone (Both frontend and backend) created with Flutter and Firebase. Show some ❤️ and star the repo to support the project.

Mohak Gupta 684 Dec 31, 2022
Completely Responsive Instagram Clone App created using flutter and firebase

Instagram Clone Completely Responsive Instagram Clone App created using flutter and firebase - works on Android & web Features Responsive Instagram UI

GanjiPalaVenkiReddy 4 Feb 11, 2022
Instagram clone application using Flutter and Firebase.

instagram_flutter A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

Fury 3 Jul 19, 2022
Full Stack Instagram Clone With Flutter and Firebase

Instagram Full Stack Clone with Flutter,Dart and Firebase Built an responsive Instagram Clone app that Works on Android and Web! Features Responsive I

Sunil Chormare 3 Aug 14, 2022
Build Instagram Clone - with Clean Architecture Flutter (Firebase Full-Stack)

Instagram Clone - Clean Architecture Flutter Instagram Clone Flutter - with Clean Architecture Firebase as backend (Full-Stack) is Underdevelopment Ap

Adnan Khan 41 Dec 31, 2022
Instagram clone using Flutter & Firebase

instagram_clone A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Hasnain Makada 2 Aug 26, 2022
new 2021 working Instagram clone written in Flutter

instagram_ui Instagram 2021 clone made using flutter Contains reels, search grid view, Getting Started This project is a starting point for a Flutter

null 6 Nov 6, 2022
(Full-stack) Fully functional social media app (Instagram clone) written in flutter and dart with backend node.js and Postgres SQL.

Photoarc A Fully functional social media app written in flutter and dart using node.js and Postgres SQL as backend. Backend Repository Demo Download t

Ansh rathod 59 Jan 5, 2023
Instagram Ui Clone made using Flutter.

flutter_instagram_ui_clone Some Screenshots A new Flutter project. Getting Started For help getting started with Flutter, view our online documentatio

Pawan Kumar 521 Dec 31, 2022
INSTAGRAM CLONE - FRONTEND FLUTTER 2.5 + GRAPHQL + RIVERPOD

INSTAGRAM CLONE - FRONTEND FLUTTER 2.5 FLUTTER + GRAPHQL + RIVERPOD USER LOGIN SEE PROFILE EDIT PROFILE FOLLOW USER UNFOLLOW USER TOTAL FOLLOWING TOTA

Rui Paulo Calei 6 Sep 2, 2022
this is the instagram Clone

A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is your

Hoshmand Kamal 0 Nov 28, 2021
Responsive Google Docs Clone Tutorial Source Code developed using Flutter & Nodejs.

Google Docs Clone A completely Responsive Instagram App- Works on Android, iOS & Web! Features Google Authentication State Persistence Creating new Do

Rivaan Ranawat 83 Jan 2, 2023
Developed a Clone of the "Google Pay" mobile application.

Google Pay Clone ?? Description: Developed a Clone of the "Google Pay" mobile application. This is a Cross-Platform application, so it can be used for

null 0 May 5, 2022
Wordle clone flutter - Wordle clone built with flutter

Wordle Generated by the Very Good CLI ?? A Very Good Project created by Very Goo

Oscar 4 Jun 7, 2022
Netflix clone flutter - A clone of netflix UI Built with flutter

Netflix Clone Ui Projeto onde foi criado um clone da interface da Netflix para m

null 4 Aug 18, 2022
Let's setup Firebase​​ for our Flutter​​ app on Android​, iOS​ and Flutter Web. Setup Firebase to use Firebase products.

Flutter Tutorial - Firebase Setup For Flutter Web Let's setup Firebase for our Flutter app on Android, iOS and Flutter Web. Setup Firebase to use Fire

null 1 Apr 27, 2022
E-prescription app developed with Flutter and Firebase🔥.

Google Solution Challenge This project is a part of the solution for the problem statement for Google Solution Challenge 2022. The mission of the 2022

Hevesh Lakhwani 8 Dec 18, 2022
An Online Classroom App developed using Flutter and Firebase.

Online Classroom Application using Flutter An Online Classroom App developed using Flutter and Firebase that allows teachers to better communicate wit

Mario Dias 6 Dec 29, 2022