Instagram-clone

Snapshots of Project:

Signup Page:
● This is the signup screen of our app.
● signupUser method of auth_methods.dart file is used to
store the details of the new user in the firebase database.
Signup Page:
Login Page:
● This is the login page of our application.
● loginUser method of auth_methods.dart file is used.
● signInWithEmailAndPassword method provided by firebase
is used to login.
Login page:
Like animation:
● For like_animation like_animation.dart file is there.
● If we double click on any post, then animationController
state changes and startAnimation is called and animation
is of 200 milliseconds.
Like animation
Comment_Screen
● On comment_screen StreamBuilder is used and a new collection
named ‘comments’ in which comment is stored.
● Then every time there is an update in database, then ListView.builder
Iterate through all the comments.
● So, whenever a new comment is posted, then a circular Progress Bar
will appear and during that time a database call will be done and
updated comment screen will be visible.
Comment_screen
Search_screen(Without entering any credentials)
● Whenever a user clicks on the search button, MasonryGridView is
used to display the posts which will be displayed in any random order
and there will be only 3 posts in each row with variable size of each
post.
● Again for this, ListViewBuilder is used.
Search_screen(Without entering any credentials)
Search_screen(with input)
● Whenever a user enters any texts in the textbox, again a circular
progress bar is used during the database call.
● Search of the user is made from the collection named ‘users’ in which
there is a field of ‘username’. In database query, where clause
isLessThanOrEqualTo method is used for searching, so that even if we
don’t write the whole username correctly, then related names will be
displayed.
Search_screen(with input)
Add_a_Post_Screen
● Whenever a user clicks on add_post button, there is a dialog displayed
About asking the user from which mode he/she wants to add the post.
Like i)Take a photo
ii)Choose from gallery
iii)Cancel

i)Take a photo
For this, Image_picker is used and ImageSource.camera is used.
ii)Choose from gallery
For this, ImageSource.gallery is used.
iii)Cancel
If the user clicks on Cancel, then dialogBox will disappear.
Add_a_Post_Screen
Post is selected and the caption written
● After selecting the post and caption written, and the user clicks on the
post button, then a vertical progress bar will appear until database
work is completed.
● For database work, the upLoadPost method of FireStoreMethods class
is called.
● Posts are stored collection named ‘posts’
Post is selected and the caption written
Dash_board Page(Post is added to the dash_board page)
● For this, a FeedScreen.dart file is used.
● This is like the home page on which users post will be displayed in any
random order.
● For displaying a post, PostCard.dart is used.
● For this, a collection named ‘posts’ is used and ListView.builder is used.
Dash_board Page(Post is added to the dash_board page)
Profile Page
● Profile_screen.dart file is used.
● For getting the instance of user, FirebaseFirestore.instance is used and
Collection named ‘users’ is used.
● This instance is used to get information about number of followers and
number of following, bio of that user.
Profile_page
Database Screenshots:(FireStoreDatabase)
‘Users’ collection

‘Posts’ Collection
‘Comments’ Collection

Profile pics Storage

Authentication Screen
Gives information about when user firstly created and last signed in