Flutter Whatsapp Web App Clone - Full Stack Web Development

Flutter Whatsapp Web App Clone | Full Stack Web Development, available at $54.99, has an average rating of 4.13, with 71 lectures, based on 8 reviews, and has 83 subscribers.

You will learn about Flutter Website Development Flutter Full Stack Web Development How to Host Flutter WEB App Online Real Time Push Notifications System for WEB Private One to One Chat System Fully Functional WhatsApp Web Clone App and much more This course is ideal for individuals who are anyone who wants to learn website development using flutter or anyone who wants to become full stack flutter web app developer It is particularly useful for anyone who wants to learn website development using flutter or anyone who wants to become full stack flutter web app developer.

Enroll now: Flutter Whatsapp Web App Clone | Full Stack Web Development

Summary

Title: Flutter Whatsapp Web App Clone | Full Stack Web Development

Price: $54.99

Average Rating: 4.13

Number of Lectures: 71

Number of Published Lectures: 71

Number of Curriculum Items: 71

Number of Published Curriculum Objects: 71

Original Price: $22.99

Quality Status: approved

Status: Live

What You Will Learn

Flutter Website Development

Flutter Full Stack Web Development

How to Host Flutter WEB App Online

Real Time Push Notifications System for WEB

Private One to One Chat System

Fully Functional WhatsApp Web Clone App

and much more

Who Should Attend

anyone who wants to learn website development using flutter

anyone who wants to become full stack flutter web app developer

Target Audiences

anyone who wants to learn website development using flutter

anyone who wants to become full stack flutter web app developer

In this course you will learn how to create full stack web applications with real time push notifications for webusing firebase ac backend with flutter.

The web itself is a flexible platform, but Flutter is ideal for building web applications like PWAs or SPAs and bringing your existing mobile app to the web. Reach more users. Acquire users beyond app stores without limitations from just a click of a URL in a web browser.

The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API. This includes the browser versions listed in this support matrix and Chrome extensions via the Push API.

Firebase Cloud Messaging, formerly known as Google Cloud Messaging, is a cross-platform cloud service for messages and notifications for web applications.

Firebase is a set of backend cloud computing services and application development platforms provided by Google. It hosts databases, services, authentication, and integration for a variety of applications.

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud. Cloud Firestore is a NoSQL document database that lets you easily store, sync, and query data for your mobile and web apps – at global scale.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Chapter 2: Create and Setup a new Flutter Project | Define Theme & Colors for our Web App

Lecture 1: Download

Lecture 2: Create and Setup a new Flutter Project

Lecture 3: define default theme and colors for our web app

Chapter 3: Create Web Pages and Defining Routes

Lecture 1: create web pages

Lecture 2: defining routes for web pages and setting up initial route for first web page

Lecture 3: Source Code of this Section

Chapter 4: Login Web Form and Signup Web Form UI UX

Lecture 1: setting up login signup page background colors

Lecture 2: show circle avatar for profile with outlined button

Lecture 3: text fields implementation

Lecture 4: login and signup button with progress bar if loading

Lecture 5: toggle between signup and login form

Lecture 6: Source Code of this Section

Chapter 5: Flutter Web – How to choose / pick image on Web

Lecture 1: flutter web pick image from computer

Lecture 2: Source Code of this Section

Chapter 6: How to connect Firebase with Flutter Web App

Lecture 1: connect firebase with flutter web app

Chapter 7: Login & Signup New Users | Authentication, Upload Image & Save Data to Firestore

Lecture 1: flutter login and signup web form validation

Lecture 2: create and authenticate user with email and password

Lecture 3: upload image to storage

Lecture 4: save user data to firestore database

Lecture 5: signin user with email and password

Lecture 6: Source Code of this Section

Chapter 8: Implement Chats Header | Tab View for Recent Chats and Contacts List

Lecture 1: home web page ui ux

Lecture 2: retrieve current user data and pass it to chat area

Lecture 3: display current user info on chat area header

Lecture 4: implement tabs for recent chats and contacts list

Lecture 5: Source Code of this Section

Chapter 9: Implement Messages Area

Lecture 1: implement messages area

Lecture 2: Source Code of this Section

Chapter 10: Read and Display user Contacts List from Firestore Database

Lecture 1: create contacts list and recent chats

Lecture 2: retrieve user contacts list

Lecture 3: display user contacts

Lecture 4: Source Code of this Section

Chapter 11: Messages Area || Chat Box

Lecture 1: messages area header

Lecture 2: messages widget

Lecture 3: open messages web page for chatting

Lecture 4: Source Code of this Section

Chapter 12: Send Message | Save Message Data & Recent Chat Data to Firestore

Lecture 1: save message to database for sender and receiver

Lecture 2: save last message to user recent chat for sender and receiver

Lecture 3: Source Code of this Section

Chapter 13: Handle Messages | Scrolling Retrieve Messages | Display Messages

Lecture 1: get user message and handle the messages scrolling

Lecture 2: display text messages

Lecture 3: Source Code of this Section

Chapter 14: Send any File and any Image in a Message

Lecture 1: dialog box for choosing any file type

Lecture 2: send file in a message

Lecture 3: send image in a message

Lecture 4: Source Code of this Section

Chapter 15: Display Files and Images -> Messages

Lecture 1: display files and images in messages

Lecture 2: Source Code of this Section

Chapter 16: Get & Display Recent Chats || Last Message from different Receivers

Lecture 1: get receivers last messages from database

Lecture 2: display receivers recent chats

Lecture 3: Source Code of this Section

Chapter 17: Delete message for me and Delete Message for Everyone

Lecture 1: display alert dialog for deleting any message

Lecture 2: delete message for me and delete message for everyone

Lecture 3: Source Code of this Section

Chapter 18: Push Notifications for WEB – Get Notification Permission & FCM Token for WEB

Lecture 1: download firebase-messaging-sw.js

Lecture 2: get permission for notifications on WEB Browser

Lecture 3: push notification remote message listener

Lecture 4: display notification alert dialog when receives new notification

Lecture 5: get token for web using FCM

Lecture 6: save FCM Token to user Data in database

Lecture 7: Source Code of this Section

Chapter 19: Send Push Notifications to WEB

Lecture 1: check if FCM Token exists for receiver user

Lecture 2: send push notifications for web

Lecture 3: Source Code of this Section

Chapter 20: Make your Website Live || FREE WEB Hosting

Lecture 1: Make your Website Live || FREE WEB Hosting

Lecture 2: Thank you guys for Watching This Course

Lecture 3: Source Code of this Section

Chapter 21: Congratulations – Course Finished

Lecture 1: Where to go from Here

Chapter 22: Complete Project Source Code

Lecture 1: Complete Project Source Code

Lecture 2: Thank you

Instructors

Muhammad Ali
WEB & Mobile Apps Development, Game Development, AI, AR & ML

Rating Distribution

1 stars: 2 votes

2 stars: 0 votes

3 stars: 1 votes

4 stars: 1 votes

5 stars: 5 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!