DevStack06/Whatsapp-Clone-Flutter

技術主題

# flutter # flutter-apps # chatapp # flutter-chat-app # flutter-chat # socket-io # flutter-socketio # nodejs # whatsapp-clone # whatsapp-flutter # flutter-whatsapp # flutter-whatsapp-clone

使用的依賴

依賴清單 11 項

flutter{"sdk":"flutter"}
cupertino_icons^1.0.0
flutter_svg^0.19.3
emoji_picker^0.1.0
shared_preferences^0.5.12+4
camera^0.7.0+2
path_provider^1.6.22
path—
video_player^1.0.1
socket_io_client^0.9.12
flutter_test開發依賴{"sdk":"flutter"}

所在榜單

Production#180

原始 README

以下為英文專案原文快照，最新內容請造訪 GitHub。

展開 / 收合專案 README

Chat App Development Front-End and Back-End using Flutter, SocketIo, and NodeJS. (Limited code)

Buy Me A Coffee

( You can buy the full source code of tutorial in $30 (mail me): devstackin@gmail.com )

In this full tutrial source code you will get:

One to one chatting
One to one file sharing
All the basic UI of whatsapp
Camera and Video integration
Socket Integration

Things are not there yet:

Database integration
Group chat functionality
Calling and Voice features

Please note in $30 you will going to get the full tutorial code, which I have covered in youtube, It is just a tutorial code not real whatsapp code

https://github.com/DevStack06/images/blob/master/ChatImages/chatapp.png

Playlist for Chat App Development series -:

Playlist Name		YouTube Playlist Link
Chat App Development (Main Playlist)		Link
Chat App Development (Only Front-End using Flutter)		Link
Chat Server Development (Only Back-End using Node/SocketIo)		Link

Some Screenshots of this series

1. Landing Page

https://github.com/DevStack06/images/blob/master/ChatImages/LandingPage.png

2. Login Page

https://github.com/DevStack06/images/blob/master/ChatImages/loginpage.png

3. Login Page with Alert

https://github.com/DevStack06/images/blob/master/ChatImages/LoginWithAlert.png

4. OTP Screen

https://github.com/DevStack06/images/blob/master/ChatImages/OTPSCreen.png

5. Country Page

https://github.com/DevStack06/images/blob/master/ChatImages/ChooseACountry.png

6. Home page

https://github.com/DevStack06/images/blob/master/ChatImages/homepage.png

7. Chat page

https://github.com/DevStack06/images/blob/master/ChatImages/IndividualCHatPage.png

8. Camera Page

https://github.com/DevStack06/images/blob/master/ChatImages/Camerapage.png

9. Status Page

https://github.com/DevStack06/images/blob/master/ChatImages/StatusPage.png

10. PopUp Menu Item

https://github.com/DevStack06/images/blob/master/ChatImages/PopupMenuItem.png

11. Emoji Picker

https://github.com/DevStack06/images/blob/master/ChatImages/EmojiPicker.png

12. Create Group Page

https://github.com/DevStack06/images/blob/master/ChatImages/SelectCOntactPage.png

13. Select Contact Page

https://github.com/DevStack06/images/blob/master/ChatImages/newgroup.png

14.View Image/Video Page

https://github.com/DevStack06/images/blob/master/ChatImages/Viewphoto.png

Some Other playlist

Playlist Name		YouTube Playlist Link
Flutter model class series, for Rest API connection and JSON parsing		Link
Flutter Basic series		link
Blog App Development (Main Playlist)		Link
Blog App Development (Only Front-End using Flutter)		Link
Blog App Development (Only Back-End using Node/ExpressJs)		Link

If this tutorial helped you please give a star and also fork the repo, Thank you happy coding :)

To use this app follow below instructions-:

Clone this app using below syntax -:

git clone https://github.com/DevStack06/Whatsapp-Clone-Flutter.git
After cloning install packages using below syntax -:

flutter pub get

Above command will install all the neccery packges.

Run the app on your mobile using below command -:

flutter run

Balram Rathore ↗