Instagram Flutter Docs PDF

Preview

Summary

Flutter and Firebase is used. It will work on android, iOS and web....

Description

Title: Build A Full Stack Instagram Clone Created By: freeCodeCamp.org

SECTIONS  Intro  Demo  Prerequisites  Setup & Theming the App  Building Responsive Layout Widget  Setting Up Firebase  Login Screen UI (Mobile)  Signup Screen UI (Mobile)  Firebase Signup Auth  Firebase Login Auth  Persisting Auth State  Modelling User Data  User Data State Management  Mobile Bottom App Bar  Add Post Screen UI  Selecting Image  Storing Post Data in Firebase  Feed Posts UI  Displaying Post Data from Firebase  Like Animation  Updating Likes

 Comments Screen UI  Storing Comments in Firebase  Displaying Comments  Deleting Post  Searching Users  Showing Posts on Search Screen  Creating Reusable Profile Screen UI  Displaying Profile Data  Following Users  Signing Out  Creating Responsive UI  Conclusion Intro We are going to build completely responsive UI for web and mobile. We will be able to upload posts, like the posts, comment on the posts all in real time. We will also be able to see other people profiles, follow them and can see their followers and following.

Demo

Prerequisites We should have basic knowledge of Dart and Flutter. Knowledge about firebase is not required. If you have an idea about Provider its good but if not that’s fine we will learn about that later on.

Setup and Theming the App

Go to command prompt: cd desktop flutter create Instagram_flutter cd Instagram_flutter code .

made changes to main.dart

Create folder name that utils, then create colors.dart file in it.

Changes made in main.dart file.

Building Responsive Layout Widget

Create dimensions.dart file in utils folder.

Create folder name that responsive, then create responsive_layout_screen.dart file in it.

Create mobile_screen_layout.dart file in responsive folder.

Create web_screen_layout.dart file in responsive folder.

Changes made in main.dart file.

Setting Up Firebase Before we do anything, we have to download some packages.    

Firebase_core Cloud_firestore Firebase_auth Firebase_storage

To automatically put packages in pubspec.yaml file. Download Pubspec Assist from Visual Studio Code extension. Now, go to firebase.google.com and create new project name it whatever you want e.g. Instagram-clone. We are going to disable the google analytics for this project. Some configuration is needed. In firebase, go to Authentication tab and click Get Started.

Click Email/Password from Native Providers. Then, enable Email/Password. After that go to Firestore Database, where we need to create Database. Choose Start in test mode. Select location near to you. Go to Rules, change it to: rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write; } } } Now, go to Project Overview, click add app. Choose iOS App. 1. Register App 

 

You need an App Bundle ID for that. So, go to your iOS folder in your project. Inside Runner.xcodeproj folder, open project.pbxproj. Then to search, press CTRL+F. Search for PRODUCT_BUNDLE_IDENTIFIER. You will get your iOS bundle id. App Nick Name: iOS App App Store ID: 123456789

2. Download Config File Download GoogleService-info.plist file. Move it to Runner folder, which is located in in iOS folder. Remaining steps are not needed, just click next to create.

Go to Podfile in iOS folder and uncomment this line. Platform :ios, ’9.0’ and change ‘9.0’ to ‘10.0’

Now go to terminal: cd ios pod install

To initialize your app, changes made into main.dart file.

For Android App go to Project Overview and choose Android App.

1. Register App  

Go to android folder, then go to app folder and click build.gradle file. In default config tag, there is application id copy it and paste it in Android Package Name. App Nickname: Android App

2. Download Config File Download google-services.json file. Move it to your app folder, which is located in android folder.

3. Add Firebase SDK Follow the instructions that are given, you just have to modify your build.gradle files in your project adding some lines. Remaining steps are not needed, just click next to create. NOTE: android > app > main > AndroidManifest.xml file. Make sure if you want to publish your app in playstore. The package should not be named

“com.example.anything” because “com.example” apps are not allowed so change example to anything.

After this, Inside project build.gradle file. In defaultConfig. minSdkVersion 19 // change it to 19 multiDexEnabled true // add this line

Now adding firebase to your web app.

1. Register App 

App Nickname: Web App

2. Add Firebase SDK We need API key, App ID, Messaging Sender ID, Project ID, Storage Bucket. Copy it in: await Firebase.initializeApp { option: FirebaseOptions{} } To initialize your app, changes made into main.dart file.

Login Screen UI (Mobile)

Create folder name it screens, then create login_screen.dart file in it.

Create folder in your project name that assets, then download the Instagram logo svg file and copy it there. To use svg image you have to download flutter_svg package. Also go to pubspec.yaml file and uncomment assets tag.

Create folder name that widgets, then create text_field_input.dart file in it.

Signup Screen UI (Mobile)

Create signup_screen.dart file in screens folder. Copy login_screen.dart file code and paste it into signup_screen.dart file. Few changes will be required.

Firebase Signup Auth

Create a folder named resources so that logic is separated from the UI. Then, create an auth_methods.dart file in resources folder.

Create a storage_methods.dart file in resources folder.

We will need a package called image_picker. Changes made in signup_screen.dart.

Create an utils.dart file in utils folder.

Add these lines in iOS > Runner > Info.plist file.

Firebase Login Auth

For firebase login authentication, we need to create a function just like we made it for sign up screen. Changes made in auth_methods.dart Changes made in login_screen.dart.

Persisting Auth State In main.dart file we are going to implement the concept of persisting authentication state. Changes has been made in main.dart.

Changes has been made in login_screen.dart.

Created a function in login_screen.dart and applying a concept of persisting auth state.

Changes has been made in signup_screen.dart.

Created a function in signup_screen.dart.

Applying concept of persisting auth state.

Modeling User Data We are going to create a model for user. For that, we need to create a folder named models and create a file user.dart in that folder.

Changes has been made in auth_methods. dart.

User Data State Management

First, convert stateless widget to stateful widget in mobile_screen_layout.dart. For a state management we are going to use a package Provider. We are going to create another folder named providers and create user_provider.dart file in that folder. Changes has been made in user.dart file. Function has been created.

Changes has been made in auth_methods.dart file.

user_provider.dart

This is the last step in this section. Changes has been made in mobile_screen_layout.dart file.

Convert stateless widget to stateful widget in responsive_layout_screen.dart. Changes has been made in responsive_layout_screen.dart.

Changes has been made in main.dart.

Mobile Bottom App bar Changes has been made in mobile_screen_layout.dart file.

Add Post UI Screen

Create a add_post_screen.dart file in screens folder. add_post_screen.dart

Change dimensions.dart file to global_variable.dart. Changes has been made in global_variable.dart.

Changes has been made in mobile_screen_layout.dart.

Selecting Image We will create a function to select a post in add_post_screen.dart file. Changes has been made in add_post_screen.dart file.

Storing Post Data in Firebase We will create a function to post an image in add_post_screen.dart file. And, we will create a Firestore_methods.dart file in resources folder. Just like we create a model class for user we will create a model class for post. So, we will create a post.dart file in models folder.

Changes will be made in storage_methods.dart file

You also need to get uuid package for Firestore_methods.dart file.

Changes has been made in add_post_screen.dart file.

Feed Post UI

For a feed screen layout, we need to create a feed_screen.dart file in screens folder.

Create a widget called

post_card.dart in widgets folder.

post_card.dart

Displaying Post Data from Firebase

To grab the date for post we need to download intl package. Changes has been made in feed_screen.dart file.

Changes has been made in post_card.dart file.

Like Animation

We will create a widget called like_animation.dart in widgets folder.

Changes has been made post_card.dart file.

Updating Likes

We will create a function called likePost in firestore_methods.dart file.

Changes has been made post_card.dart file.

Comments Screen UI

We will create a comments_screen.dart file in screens folder.

We will also build a comment card just like we did for feed_screen.dart.

Changes has been made in post_card.dart file.

Storing Comments in Firestore

We will create a function called postComment in Firestore_methods.dart file.

Changes has been made in comments_screen.dart file.

Changes has been made in post_card.dart file.

Displaying Comments

Changes has been made in comments_screen.dart file. Changes has been made in

comment_card.dart file.

Create a function called fetchCommentLen in post_card.dart file.

Deleting Post

We will create a function called deletePost in Firestore_methods.dart file.

Changes has been made in post_card.dart file.

Searching Users

We will create a search_screen.dart file in screens folder.

Showing Posts on Search Screen

To show user posts on such a layout that Instagram uses in search screen. We need to download flutter_staggered_grid_view 0.4.1 package. Changes has been made in search_screen.dart file.

Creating Reusable Profile Screen UI

We will create a profile_screen.dart file in screens folder.

For follow button we will create a widget called follow_button.dart file in widgets folder.

Displaying Profile Data

Changes has been made in profile_screen.dart file.

Changes has been made in search_screen.dart file.

Following Users

Create a function called followUser in Firestore_methods.dart file.

Changes has been made in profile_screen.dart file.

Signing Out

Create a function called signOut in auth_methods.dart file.

Changes has been made in profile_screen.dart file.

Creating Responsive UI

To create a responsive UI for web. Changes will be made in login_screen.dart file.

Changes has been made in web_screen_layout.dart file. Also convert this to stateful widget.

Changes has been made in feed_screen.dart file.

Changes has been made in search_screen.dart file....