Writing an Instagram Clone on Flutter

In this article, we will show you how easy it is to create an Instagram clone using Stream Feeds and Flutter. You will also learn the many features of Flutter to improve animations, gestures, transitions, and state management.

The video linked below will walk you through the entire article step by step, additionally providing code instructions. If you are stuck or prefer to learn through video, then video will help you (in English)!

This clone will allow you to:

• log in under different user accounts;

• add and change profile photos;

• add photo posts to your user feed (activity);

• subscribe/unsubscribe from the feeds of other users;

• add comments And likes (reactions).

Instagram is a complex app, and we won’t recreate it completely, of course. But we will do our best and, in the process, create an amazing application in Flutter – with state management, gestures, animations and transitions.

Whether you are a beginner or an experienced Flutter developer, this article will be helpful for you. You will also learn the following Flutter concepts:

• how to neatly structure and organize your code;

• how to use Provider and basic Flutter components to easily manage application state;

• creating an application theme to support light and dark modes;

• transitions between pages;

• animations and how to customize them;

• when to use implicit animations and when to use explicit animations;

• how to create your own animations;

• performance features;

• lots of tips on layout and other features of Flutter;

• extension methods;

• usage TextEditingController, PageController And focusnode;

• usage AutomaticKeepAliveClientMixin for page caching.

What is Activity Feed?

To understand what Stream offers us Flutter Feed SDKfirst you need to understand what is activity feed.

Sometimes referred to as a news feed or activity stream, an activity stream is a list of activities performed by users in an application or website in real time. Stream feeds display information from the user’s online community, such as likes, subscriptions, comments, posts, and content sharing.

A stream takes the complexity of managing activity streaming feeds and makes it easy, and the Stream Feed Flutter SDK makes it simple in terms of user interface.

Creating an Instagram App Clone Using Feeds

Let’s discuss how the activity streaming feed will work in the context of building our clone of the Instagram app. We create a feed of custom posts with images (activities). These posts should also show user interaction and reactions in the form of likes and comments. Users should be able to follow specific users they are interested in and see a feed of posts from everyone they follow. They should also be able to view all of their own posts.

With some of the higher-level concepts we’ve dealt with, we can finally get started.

Building a Flutter App

The first step on this journey… creating a new Flutter app 🚀.

Run the following command in our terminal in the directory of our choice:

$ flutter create stream_agram

You can change the name of the application to whatever you like.

Package dependencies

Opening the file pubspec.yaml and add the following dependencies:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  stream_feed_flutter_core: ^0.7.0+1
  provider: ^6.0.2
  google_fonts: ^2.3.1
  image_picker: ^0.8.4+9
  cached_network_image: ^3.2.0
  transparent_image: ^2.0.0
  jiffy: ^5.0.0

⚠️ WARNING: As you read this article, the versions of these packages may be updated. If you want to follow the instructions exactly, it will be better to use the versions mentioned above. Once you are familiar with the code, you can run the command flutter pub publishedto see which packages need to be updated.

Stream setup