Creating Instagram in Flutter - Top Open Source Projects

| Page Views: 556

Top Flutter Instagram App Clone Projects In GitHub

How to create your own Instagram in Flutter.

What is Flutter?

Flutter is an mobile app framework created by the good folks at Google that allow us create android and iOS apps using Dart programming language. Dart is an object oriented programming language that borrows the C or Java style syntax. This has made it a hit with many programmers as Java is the most popular programming language currently. Moving from Java to Dart is quite easy. And many languages like C# and Kotlin do use the java style of programming.

Dart has especially experienced rapid growth from around 2017 onwards due to Flutter. With Flutter you can create an app in minutes. There is no XML or many configuration files. You code both the UI and logic using Dart. This makes it very suitable for many programmers as you don't have to switch and reference many files from your main code. You can still decouple logic and UI through various architectures like the MVP and MVVM.

What is Instagram?

Believe it or not there are still some of us, including programmers who no nothing about Instagram. Some people just don't have that much time anymore to be signing up to the different social platforms. Maybe decades ago you just prefer one or two and there is no problem with that. Instagram is a photo and video-sharing social networking service owned by Facebook, Inc. However Facebook didn't create it. Instead they bought it from Kevin Systrom and Mike Krieger who had created and launched it in October 2010 exclusively on iOS.

Instagram is quite popular and there are several projects that have been written by various developers that we can re-use. Am creating a gallery or collection of these projects so that it can help us developers learn faster. Am not ranking these projects in any particular order. Instead am adding them as i discover them. You can add us more links or suggest us the best in the comments section.

Let's start.

(a). Fluttergram

A working Instagram clone written in Flutter. This app uses Firebase/Firestore to store data. This project has been written by Matthew Danics.

Flutter Instagram

This app allows you to:

  1. Create an account. Almost all social media apps require users to create accounts and so does this.So we have a create_account.dart file that abstracts this process for us. Here we have a stateful widget class and it's corresponding state. In that state, we are having a TextEditingController that will hold us the name of the user registering.
  2. Then we have the profile page in a file called profile_page.dart. This file comprises a class called ProfilePage, which is a stateful widget. It also has it's corresponding state to host its data. Those data comprise:
    final String profileId;
    String currentUserId = googleSignIn.currentUser.id;
    String view = "grid"; // default view
    bool isFollowing = false;
    bool followButtonClicked = false;
    int postCount = 0;
    int followerCount = 0;
    int followingCount = 0;

    This class includes code that allows us to:

  3. Edit Profile.
  4. Follow and Unfollow user.
  5. We also have code that builds for us the various UI widgets for the page.

  6. Post Image. So we have a file called image_post.dart to help in that. This file comprises a class called ImagePost, again a stateful widget. The image and all the other data will be store in Firestore. Of course it's not just the image. We also have other fields:
  final String mediaUrl;
  final String username;
  final String location;
  final String description;
  Map likes;
  int likeCount;
  final String postId;
  bool liked;
  final String ownerId;

There are also functions to construct various UI widgets for posting image and other data.

  1. Comment. So a comment screen has to be constructed. It's done as a stateful widget. The state will comprise the following fields:
    final String postId;
    final String postOwner;
    final String postMediaUrl;
    final TextEditingController _commentController = new TextEditingController();

    That TextEditingController will allow us to type comment and listen to text editing callbacks.

We will also have code to asynchronously fetch us comment list from firestore:

Future<List<Comment>> getComments() async {
    List<Comment> comments = [];

    QuerySnapshot data = await Firestore.instance
        .collection("insta_comments")
        .document(postId)
        .collection("comments")
        .getDocuments();
    data.documents.forEach((DocumentSnapshot doc) {
      comments.add(new Comment.fromDocument(doc));
    });

    return comments;
  }

And more and more. Here are the files we have in this project:

  1. activity_feed.dart
  2. comment_screen.dart
  3. create_account.dart
  4. edit_profile_page.dart
  5. feed.dart
  6. image_post.dart
  7. location.dart
  8. main.dart
  9. profile_page.dart
  10. search_page.dart
  11. upload_page.dart
What are the Dependencies Used in this Project

Well here's a table of them:

No. Dependency Description
1. Firestore Cloud Firestore Plugin for Flutter.
2. Image Picker A Flutter plugin for iOS and Android for picking images from the image library, and taking new pictures with the camera.
3. Google Sign In A Flutter plugin for Google Sign In.
4. Firebase Auth A Flutter plugin to use the Firebase Authentication API.
5. UUID A library that allows you to Generate RFC4122(v1,v4,v5) UUIDs
6. Dart Image Dart library for decoding/encoding image formats, and image processing.
7. Path Provider A Flutter plugin for finding commonly used locations on the filesystem. Supports iOS and Android.
8. Font Awesome The Font Awesome Icon pack available as Flutter Icons
9. Dart HTTP A composable API for making HTTP requests in Dart.
10. Dart Async A Dart package that contains tools to work with asynchronous computations.
11. Flutter Shared Preferences Shared Preferences for flutter plugin.
12. Cached Network Image Flutter library that allows you to Download, cache and show images.
Project Links
No. Location Action
1. Github Download Project
2. Github Browse
3. Github Download APK
4. Github View Gif Image Demo
4. Github Visit Author Site

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.




Recommendations


What do You Think


Previous Post Next Post