DEV Community

loading...

Fwitter - Flutter Based Twitter Clone

thealphamerc profile image Sonu Sharma 💙 ・3 min read

Hello guys, I have been working on a project for a long time now It is completed so I thought to share with you.
I have developed a working Twitter clone.

Fwitter is a open sourceTwitter clone built in flutter.

App link:- https://play.google.com/store/apps/details?id=com.thealphamerc.flutter_twitter_clone

Project source code link :- https://github.com/TheAlphamerc/flutter_twitter_clone

If you found a bug or want to suggest a feature report it here:- https://github.com/TheAlphamerc/flutter_twitter_clone/issues

App features:-

Login-Signup

  • User can create an account using email and password.
  • User can log in using email, password or simply do login using google authentication.
  • User can send reset password link to his email from forgot password page.
  • Firebase auth implementation.

Tweet

  • User can view Tweets on his home timeline.
  • Only Tweets from the following user can be shown on home page timeline.
  • Blue tick shows after verified user's name.
  • User is displayed username, profile pic, and timestamp on Tweet.
  • User can tap Tweet to view Tweet detail and comments Tweet..
  • On user profile click from tweet user is redirected to user's profile page.
  • User can like or unlike by clicking on the heart icon.
  • On comment icon tapped user is redirected to reply Tweet page.
  • On Tweet image clicked user is redirected to image view page.
  • On long press Tweet description is copied to clipboard.
  • User can comment on any Tweet. Commented Tweet is itself a tweet.
  • User can comment on the comment itself. This makes nested Tweet thread.
  • User can retweet any Tweet with comment.
  • Tweet is updated in realtime if someone likes or comment on the Tweet.
  • User can click a link within tweet body. It will launch the browser with relative link.
  • User can "reply" to tweet by tapping on comment Icon.
  • User that wrote the original tweet is automatically "@" replied in compose.
  • User can share Tweet on other social apps by tapping on the share icon.
  • Increase retweet count of the original tweet when someone retweet the user's Tweet.
  • Decrease retweet count of the original tweet when retweet is deleted.

Compose a Tweet

  • User can compose and post a Tweet.
  • On compose Tweet icon clicked user is redirected to compose Tweet page.
  • Users can add an image to Tweet from the camera or phone gallery.
  • User can see a counter with total number of characters left for tweet while composing Tweet.
  • User can add Hash Tags and URLs which will highlighted in Tweet once Tweet is posted.
  • User can be redirected back to home timeline page after posting Tweet.
  • Newly created Tweet will be inserted on the timeline Tweets list. No need to pull refresh.

Profile view

  • Profile view indicates the user's timeline.
  • User can click on any user's profile image to navigate his profile timeline.
  • User can view his profile by clicking on the profile button from the sidebar or by clicking on his profile image from his Tweets.
  • User can see picture, tagline, date of joining Twitter, follower, following count and his tweets.
  • User can edit his profile by clicking on Edit Profile button.
  • User can send messages to others by clicking on message icon on another's user profile.
  • User can compose tweets by tapping the compose icon on his profile page. Newly added tweets from his profile are automatically added to home timeline.
  • User can follow another user by tapping on Follow button on user's profile.
  • If the user tap on the Follow or Following button other user's follower count is updated in realtime.
  • Display only Tweets whose profile is opened.

Notifications

  • Add notification if someone likes your Tweet.
  • Remove notification on unlike Tweet.
  • Update user count in the notification on like unlike.

Chat screen

  • User can send text message.
  • Show previous chat with time.
  • Update chat in realtime.
  • Show user's list on New Message page
  • Add search field to search user by username
  • View chat users list
  • FAB button to select a user to send message
  • Add user to chat list page immediately if a user send message to logged in message
  • On tap user from list redirect user to chat screen

Apk link:- https://lnkd.in/fffp2zk

source code: https://lnkd.in/faTnVfn

I have decided to make this project open source so that other people can learn from it.
You can see app features here :- https://lnkd.in/fJ9D25y

I would love to hear from you . Please share your valuable feedback in comments.
In last if you like the project then show love by giving star the repo.

Discussion (14)

pic
Editor guide
Collapse
gurulndgit profile image
gurulnd-git

Fantastic work brother, i am working with your application ..... i need to change the database from firebase realtime to firestore db....

github.com/gurulnd-git/

If you can help me , that will be very great....

Collapse
thealphamerc profile image
Sonu Sharma 💙 Author

Hey, it's nice to hear from you. I have migrated Fwitter from realtime to firestore database.
You can find migrated code in firestore branch.

Collapse
gurulndgit profile image
gurulnd-git

Can I know why you have migrated from firestore to realtime.... is realtime any better than firestore?

Thread Thread
thealphamerc profile image
Sonu Sharma 💙 Author

No I didn't migrate firestore to realtime. In the beginning, I hadn't thought much about the database so I choose realtime db. Now I realize there are some limitations in realtime db so I decide to migrate it to firestore.

Thread Thread
gurulndgit profile image
gurulnd-git

Great! I too thought the same so... I went with firestore

Collapse
gurulndgit profile image
gurulnd-git

Sonu Sharma,
I am working on a small project as showcase, if I can complete this faster. I will be able to get a freelance project. If I get the project, I am happy to include you in my team. The showcase project is 30% completed.
I have worked in multiple technologies ( web, mobile and cloud ), would you be interested in working with me as partime-freelance job? Further we can communicate privately.

reach out to me : rockerguru92@gmail.com

Collapse
mahak20 profile image
Mahak20

I loved the app and wanted to modify it for my liking. But I can't seem to work on Icons. I wanted to ask about the AppIcon class in constant.dart, how do I assign those values if I want more icons to be used? (Like If I wanted to add mic icon)

Collapse
thealphamerc profile image
Sonu Sharma 💙 Author

AppIcon class consist integer values of icons. These values are taken from icons.ttf font file available in assets/fonts folder. If you want to add new icon first of all you have to check if this icon is available in icon.ttf file or not.
Now the question is that how to check icon in icon.ttf file. There are so many website available which can show you all icons inside icon font file. For example open fontdrop.info/ website and drag and drop icon file into this and it will show you all available icons and their integer values. Use these integer values to add new icon in AppIcon class.

Collapse
mahak20 profile image
Mahak20

Thanks a lot! Appreciate it..

Collapse
gurulndgit profile image
gurulnd-git

Hi Sonu,

can you explain this method? i'm quite not understanding how it works? especially how it takes inputs, i saw user of curly braces as parameters, that was new to me... 

//_icon(null,3,icon:3 == state.pageIndex ? AppIcon.messageFill :AppIcon.messageEmpty,isCustomIcon:true),

_icon(IconData iconData,int index,{bool isCustomIcon = false,int icon}){ }

Collapse
thealphamerc profile image
Sonu Sharma 💙 Author

This method is a custom widget that is used in app to display icon in bottom navigation bar.
You can pass any icon from Icons class or from AppIcon class but one icon at a time.
When user click on any icon from bottom navigation bar then onPressed method will invoke and it set page index value.

Collapse
thealphamerc profile image
Sonu Sharma 💙 Author

It has been two days of Fwitter launch and now project repository is trending on GitHub. It really gives me motivation to contribute to open source projects.

Thanks fluttercommunity to your love and support ❤.

Trending list:- github.com/trending/dart

Source code:- bit.ly/3dELbhn

App link:- lnkd.in/fffp2zk

Collapse
abdulkarimalbaik profile image
ABDULKARIMALBAIK

Amazing bro ✌✌✌

Collapse
thealphamerc profile image