Whatsapp Clone Flutter

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

<a href="https://www.buymeacoffee.com/DevStack06" target="_blank" align="center"> <p align="center"> <img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"> </p> </a> <p align="center"> ( You can buy the full source code of tutorial in $30 (mail me): <a href="mailto:devstackin@gmail.com"> devstackin@gmail.com</a> ) </p>

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

<img src= "https://github.com/DevStack06/images/blob/master/ChatImages/chatapp.png"></img>

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

<br>

Some Screenshots of this series

<h3 align="center" style="color:green" >1. Landing Page</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/LandingPage.png" width="500"></img> </p> <br> <h3 align="center" style="color:green" >2. Login Page</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/loginpage.png" width="500"></img> </p> <br> <h3 align="center" style="color:green" >3. Login Page with Alert</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/LoginWithAlert.png" width="500"></img> </p> <br> <h3 align="center" style="color:green" >4. OTP Screen</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/OTPSCreen.png" width="500"></img> </p> <br> <h3 align="center" style="color:green" >5. Country Page</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/ChooseACountry.png" width="500"></img> </p> <br> <h3 align="center" style="color:green" >6. Home page</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/homepage.png" width="500"></img> </p> <br> <h3 align="center" style="color:green" >7. Chat page</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/IndividualCHatPage.png" width="500"></img> </p> <br> <h3 align="center" style="color:green" >8. Camera Page</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/Camerapage.png" width="450"></img> </p> <br> <h3 align="center" style="color:green" >9. Status Page</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/StatusPage.png" width="450" ></img> </p> <br> <h3 align="center" style="color:green" >10. PopUp Menu Item</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/PopupMenuItem.png" width="500"></img> </p> <br> <h3 align="center" style="color:green" >11. Emoji Picker</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/EmojiPicker.png" width="500"></img> </p> <br> <h3 align="center" style="color:green" >12. Create Group Page</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/SelectCOntactPage.png" width="450"></img> </p> <br> <h3 align="center" style="color:green" >13. Select Contact Page</h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/newgroup.png" width="500"></img> </p> <br> <h3 align="center" style="color:green" >14.View Image/Video Page </h3> <p align="center"> <img src="https://github.com/DevStack06/images/blob/master/ChatImages/Viewphoto.png" width="450"></img> </p> <br>

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-:

1. Clone this app using below syntax -:

   git clone https://github.com/DevStack06/Whatsapp-Clone-Flutter.git

2. After cloning install packages using below syntax -:

   flutter pub get

Above command will install all the neccery packges.

3. Run the app on your mobile using below command -:

   flutter run