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 TagsandURLswhich 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 Profilebutton. - 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
Followbutton on user's profile. - If the user tap on the
FolloworFollowingbutton 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.
Top comments (14)
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....
Hey, it's nice to hear from you. I have migrated Fwitter from realtime to firestore database.
You can find migrated code in
firestorebranch.Can I know why you have migrated from firestore to realtime.... is realtime any better than firestore?
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.
Great! I too thought the same so... I went with firestore
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
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)
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.
Thanks a lot! Appreciate it..
Hi Sonu,
//_icon(null,3,icon:3 == state.pageIndex ? AppIcon.messageFill :AppIcon.messageEmpty,isCustomIcon:true),
_icon(IconData iconData,int index,{bool isCustomIcon = false,int icon}){ }
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
onPressedmethod will invoke and it set page index value.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
Amazing bro ✌✌✌
Thanks