Giter Club home page Giter Club logo

ahmedabdoelhawary / flutter-clean-architecture-instagram Goto Github PK

View Code? Open in Web Editor NEW
231.0 10.0 69.0 310.99 MB

Instagram with clean architecture using flutter and firebase. almost include all functions on Instagram

License: Creative Commons Attribution Share Alike 4.0 International

Swift 0.26% Objective-C 0.01% Dart 95.79% HTML 0.21% CMake 1.63% C++ 1.97% C 0.12% Kotlin 0.01%
bloc clean-architecture flutter instagram instagram-clone clean-code cubit dart social-media state-management

flutter-clean-architecture-instagram's Introduction

flutter-clean-architecture-instagram

Instagram clean architecture using Flutter and Firebase ( frontend & backend ) with almost all functionalities

If you want to work with me, you can find me here:

Notes

  • I didn't publish the keys such as messaging, agora, firebase web, or even google-services.json. So follow the steps (3. Setup the app) to add them.
  • Right now, I am working on cleaning up the code and web version

Features

  • Support

    • Arabic & English language
    • Dark & Light theme
  • Custom gallery & camera & video display like Instagram "my package" image picker plus

  • Post features

    • Support images & videos
    • Support multi images in one post or mixin with them
    • Like on a post and view all like with their profiles
    • Comment on a post and replay on a (comment & replay)
      • Like on a comment & replay and view all like with their profiles
    • Edit post
    • Delete post
    • Unfollow the user of the post
  • My Timelines Screen

    • Custom posts & stories feed based on followers & followings
    • Refresh the posts info
    • Loading more posts (it displays five-by-five posts)
  • All Timelines Screen

    • View all user's posts (images & videos)
    • Change the screen from a grid layout to a timeline layout
  • Search for a user based on username

  • Video Screen

    • It displays all user's videos with almost post features
    • Control of sound & play
  • Profile Screen

    • Follow / Unfollow Users
    • Display images & videos in a separate view
    • Change the screen from a grid layout to a timeline layout
    • Edit profile info
  • Chat Screen

    • Chat with any user
    • Group chat
    • Support
      • Text
      • Image (gallery & camera)
      • Voice
      • One-to-one video call
      • Group video call
  • Push Notifications

  • Send posts to chats

SnapShots for web

You can see the screen record from here google drive

SnapShots

|--------- Sign page ----------|------- Welcome page --------|-------------- Stories ----------|

|-------- Home screen --------|------ Comment screen ------|-------- Create story ----------|

|--------- Share post --------- |--------- Videos page ---------|---- personal profile page ---|

|---- Change app theme -----|------- Logout & Login --------|-- Change app language -- |

|------ Following users -------|----- Unfollow all users ------|---- Change profile image ----|

|----- All users time line ------|----- Search about user ------|---------- Create post ------- |

|-------- Create video ---------|---- Show created video -----|---- share created video -----|

|----------- Edit post ----------|-------- Notifications ---------|-------- Activity page --------|

|--------------------------- Chatting ----------------------------|

|-------------------------- Video call ---------------------------|

Getting started

2. Clone the repo

$ git clone https://github.com/AhmedAbdoElhawary/flutter-clean-architecture-instagram
$ cd flutter-clean-architecture-instagram/

3. Setup the app

I made the setup with more details and visuals to make it easy for any level to set up the app.

Click to expand

.Connection with Firebase

  1. Run this line in your PowerShell as administrator:
Set-ExecutionPolicy RemoteSigned 
  • Then, press y to comfirm
  1. We need to log in with Firebase. Run this line:
firebase login
  • Then, press y to comfirm
  • Then, choose the account that you want to create Firebase services with it.
  • Then, press Allow
  1. In PowerShell, write the disk that the project is exciting. For example, I have InstaAwesome in D. So, I will write it Like this:
d:
  1. Add the following line, replacing <path-to-project-root> with the path to the project root:
cd <path-to-project-root>
  1. Then, run this line:
dart pub global activate flutterfire_cli
  1. Then, run this line:
flutterfire configure
  • Select Create a new project and press enter
    Screenshot-91

  • Write project name with this format my-cool-project
    Screenshot-92

  • Select android, ios, and web. dis select macos right now, And press Enter
    Screenshot-93

Enable Firebase services

Enable those services: Authentication, Firestor Database, Storage, and Messaging. And take the ‘Cloud Messaging server key’ copy from ‘Cloud Messaging’ in ‘Project settings’.

  1. Enable Email/Password in Authentication:
    Screenshot-94
    Screenshot-95
    Screenshot-98

  2. Enable Firestor Database:
    Screenshot-99
    Screenshot-100
    Screenshot-101

  • Change allow read, write: if false; to allow read, write: if true;
    Screenshot-102
    Screenshot-103
  1. Enable Storage the same as Firebase Database:
    Screenshot-104
    Screenshot-105
    Screenshot-106

  2. Enable Messaging
    Screenshot-107
    Screenshot-108
    Screenshot-110
    Screenshot-111
    Screenshot-112

  3. Enable Messaging Server key
    Screenshot-109
    Screenshot-114
    Screenshot-115

  • Take the server key copy:
    Screenshot-118

  • Then, past the key in the project lib\core\utility\private_keys.dart in notificationKey after = like this:
    Screenshot-123

.Connection with Agora

Agora is a real-time communication platform that provides a set of APIs and SDKs for adding voice↳

Step 1: Create an Agora Account and Get a Test Key

Before we can connect our Flutter app with Agora, we need to create an Agora account and get a test key. Here are the steps to get an Agora test key:

  1. Go to the Agora website and sign up for an account.

  2. After you have signed up, log in to the Agora Project Management with your account credentials.
    Screenshot-124

  3. Click on the “Create a Project”
    Screenshot-125

  4. Enter a name for your project and select any Use Case.

  5. Select Testing mode: APP ID

  6. Press Sumbit
    Screenshot-126

  7. Take App ID copy
    Screenshot-127

  8. Past it in agoraAppId variable.
    Screenshot-128

Congratulations! The project is ready.

What's Next?

  • Notifications for likes, comments, follows, etc
  • Caching of Profiles, Images, Etc.
  • Calling video and voice in chat
  • Create a group chat
  • Calling video and voice in group chat
  • Send posts to chats
  • control in the dimension of selected images & video from the gallery
  • Custom gallery display
  • Improve display loading of posts when opening the app
  • share post
  • Make like, comment, and share of animation container post touchy when long pressed on post
  • Make it stable for the web
  • Clean up more code

How to Contribute

  1. Fork the project
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Make required changes and commit (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request

flutter-clean-architecture-instagram's People

Contributors

ahmedabdoelhawary avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flutter-clean-architecture-instagram's Issues

init method

If you run the init method on the splash screen, the application will not open slowly when opening.

Missing file

I am having the following error
flutter run

Launching lib/main.dart on iPhone 14 Pro Max in debug mode...
Running pod install...                                             34.7s
Running Xcode build...                                                  
Xcode build done.                                           1077.0s

_Failed to build iOS app
Error (Xcode):
lib/data/data_sources/remote/notification/device_notification.dart:9:8: Error:
Error when reading 'lib/core/utility/private_keys.dart': No such file or
directory

Could not build the application for the simulator.
Error launching application on iPhone 14 Pro Max._

Some files are missing.

Hello, thank you so much for sharing such a complete project with clean architecture. I have cloned this project but seems some files are missing here. Please check the attached image for more details.
image

story

story is not working, when user update story app uploads posts

build a Web project

hi.
Thank you for solving the problem instantly, your solution to the problem fixed the error. As a result, I can only build a Web project but not an android, why?
image

model folders

JsonSerializable or Freezed libraries should definitely be used for toJson fromJson operations.

message

chat message page is not working

home videos

is it just me who cant play the the home videos

problem in this line ? OctoPlaceholder.blurHash(widget.blurHash, fit: BoxFit.cover)

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:instagram/presentation/widgets/global/others/play_this_video.dart';
// ignore: depend_on_referenced_packages
import 'package:octo_image/octo_image.dart';

class NetworkDisplay extends StatefulWidget {
final int cachingHeight, cachingWidth;
final String url, blurHash;
final double aspectRatio;
final bool isThatImage;
final double? height;
final double? width;

const NetworkDisplay({
Key? key,
required this.url,
this.isThatImage = true,
this.cachingHeight = 720,
this.cachingWidth = 720,
this.height,
this.width,
this.blurHash = "",
this.aspectRatio = 0.0,
}) : super(key: key);

@OverRide
State createState() => _NetworkDisplayState();
}

class _NetworkDisplayState extends State {
@OverRide
void initState() {
super.initState();
}

@OverRide
void didChangeDependencies() {
if (widget.isThatImage && widget.url.isNotEmpty) {
precacheImage(NetworkImage(widget.url), context);
}
super.didChangeDependencies();
}

@OverRide
Widget build(BuildContext context) {
return widget.aspectRatio == 0 ? whichBuild(height: null) : aspectRatio();
}

Widget aspectRatio() {
return AspectRatio(
aspectRatio: widget.aspectRatio,
child: whichBuild(),
);
}

Widget whichBuild({double? height = double.infinity}) {
return !widget.isThatImage
? PlayThisVideo(
play: true,
videoUrl: widget.url,
blurHash: widget.blurHash,
)
: buildOcto(height);
}

Widget buildOcto(height) {
int cachingHeight = widget.cachingHeight;
int cachingWidth = widget.cachingWidth;
if (widget.aspectRatio != 1 && cachingHeight == 720) cachingHeight = 960;
return OctoImage(
image: CachedNetworkImageProvider(widget.url,
maxWidth: cachingWidth, maxHeight: cachingHeight),
errorBuilder: (context, url, error) => buildError(),
fit: BoxFit.cover,
width: widget.width ?? double.infinity,
height: widget.height ?? height,
placeholderBuilder: widget.blurHash.isNotEmpty
? OctoPlaceholder.blurHash(widget.blurHash, fit: BoxFit.cover)
: (context) => Center(child: loadingWidget()),
);
}

SizedBox buildError() {
return SizedBox(
width: double.infinity,
height: widget.aspectRatio,
child: Icon(Icons.warning_amber_rounded,
size: 30, color: Theme.of(context).focusColor),
);
}

Widget loadingWidget() {
double aspectRatio = widget.aspectRatio;
return aspectRatio == 0
? buildSizedBox()
: AspectRatio(
aspectRatio: aspectRatio,
child: buildSizedBox(),
);
}

Widget buildSizedBox() {
return Container(
width: double.infinity,
color: Theme.of(context).textTheme.bodyMedium!.color,
child: Center(
child: CircleAvatar(
radius: 57,
backgroundColor: Theme.of(context).textTheme.bodySmall!.color,
child: Center(
child: CircleAvatar(
radius: 56,
backgroundColor: Theme.of(context).textTheme.bodyMedium!.color,
)),
)),
);
}
}

How i can Solve this problem please

post

post is not updating in firestorage

folder and file names

The folder and file names do not match. For example, under the customRoutes folder, there is the hero_dialog_route file. This makes it difficult to read.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.