Flutter Whatsapp Web App Clone | Full Stack Web Development

Learn Website Development with Flutter & Firebase as Backend with Real Time Push Notification for Web using FCM

What you'll learn

Flutter Website Development

Flutter Full Stack Web Development

Real Time Push Notifications System for WEB

Private One to One Chat System

Fully Functional WhatsApp Web Clone App

and much more

Requirements

you must have some basic programming knowledge

you must have some basic flutter knowledge

Description

In this course you will learn how to create full stack web applications with real time push notifications for web using 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.

Overview

Section 1: Introduction

Lecture 1 Introduction

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

Lecture 2 Create and Setup a new Flutter Project

Lecture 3 define default theme and colors for our web app

Section 3: Create Web Pages and Defining Routes

Lecture 4 create web pages

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

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

Lecture 6 setting up login signup page background colors

Lecture 7 show circle avatar for profile with outlined button

Lecture 8 text fields implementation

Lecture 9 login and signup button with progress bar if loading

Lecture 10 toggle between signup and login form

Section 5: Flutter Web - How to choose / pick image on Web

Lecture 11 flutter web pick image from computer

Section 6: How to connect Firebase with Flutter Web App

Lecture 12 connect firebase with flutter web app

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

Lecture 13 flutter login and signup web form validation

Lecture 14 create and authenticate user with email and password

Lecture 15 upload image to storage

Lecture 16 save user data to firestore database

Lecture 17 signin user with email and password

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

Lecture 18 home web page ui ux

Lecture 19 retrieve current user data and pass it to chat area

Lecture 20 display current user info on chat area header

Lecture 21 implement tabs for recent chats and contacts list

Section 9: Implement Messages Area

Lecture 22 implement messages area

anyone who wants to learn website development using flutter,anyone who wants to become full stack flutter web app developer