Web Development


Create a Simple Landing Page with Flutter Web and Firebase

Learn Flutter Web with Firebase such as Firestore, Firebase Auth, Firebase Hosting

4.65 (107 reviews)


6 hours


Mar 2021

Last Update
Regular Price

Entire course library + Leaning Path
10-day free trial

What you will learn

Build a Complete, Real World Website with Flutter Web and Firebase

Learn Firebase Services such as Firebase Firestore, Firebase Authentication and Firebase Hosting

Build a Landing Page to show off your other Social Media Links

Become proficient in one of the fastest growing technologies

Build a website without learning HTML, CSS and Javascript

Learn State Management with Providers, Proxy Providers and Stream Providers

Learn Advance State Management with Change Notfier and Change Notifier Proxy Provider

Learn Firebase Emulator Services such as Firestore Emulator


Have you discovered Flutter and enjoyed the experience creating fast and beautiful apps? However, you want to create a website but do not want to learn another web framework or language? Well, this course is for you, Flutter Web with Firebase.

Flutter is not only great at creating fast and beautiful apps, it is now venturing into websites and desktops. Therefore, Flutter would be an excellent framework where you code once and build anywhere.

In this course, you will learn how to (in no order):

  1. Build a website from scratch using Flutter framework

  2. Implement routing according to users input URLs

  3. Use Firebase hosting to launch your website live in the internet

  4. Implement Firebase authentication and enable routings for different users

  5. Use Firestore in the Flutter Web app to do CRUD (create, read, update and delete) functions

  6. Implement the provider package to expose data from the Firestore

  7. Use advanced provider classes such as proxy provider and change notifier proxy provider, to interact with the Firestore

At the end of the course, you will have a full understanding of the basics implementation of web development in Flutter Web.

Don't just take my word for it, see what my past students had to say about my courses:

"First of all, hands off to the Instructor for making the course so lively and understandable. As a beginner, I didn't expect to understand the concept so well. Also, the assignments given have helped a lot to self-evaluate myself. Overall...a great experience!" - Ash

"Haris is covering stuff that you won't find in other Flutter courses. He does so in a funny, engaging way. Pretty advanced stuff but easy to understand. Amazing how much he knows about Flutter and how well he delivers it." - Willard Jansen

"I thought the course was great." - JW Truver

"Yes, the way you present the class is great. The examples that you use to compare real life situations with programming is the one which I found the most engaging. As a beginner, I was able to understand about programming concepts better than I imagined. Thank you for that!" - Aiswarya Deepak

"He's fast, funny, and straight to the point." - Jeffrey Heisler


Create a Simple Landing Page with Flutter Web and Firebase
Create a Simple Landing Page with Flutter Web and Firebase
Create a Simple Landing Page with Flutter Web and Firebase
Create a Simple Landing Page with Flutter Web and Firebase


Intro to Flutter Web with Firebase Course

Introduction to the Course

Download the Course Syllabus

What is Flutter Web?

Why Flutter Web?

How to Fully Make Use of the Course

Join the Learner's Community

Setup and Installation

Prerequisites for Flutter Web Development

Overview of the Process

[Windows Setup] Installing Flutter SDK, Visual Studio Code and Chrome

[Mac Setup] Step 1: Install Visual Studio Code

[Mac Setup] Step 2: Install Flutter SDK

[Mac Setup] Step 3: Install Chrome

Setup Web Support for Flutter

Visual Studio Configurations and Extensions

1-Simple Links Landing Page - How to Create Flutter Web app from Scratch

Understanding the UI Layout

Creating Simple Links Landing Page

Responsive Design with Media Query

Challenge: Create More Buttons!

Add URL and Refactor Links Landing Page

Test Yourself!

Summary: Media Query, URL and Refactoring

Source Code - Simple Links Landing Page

Publish to the Web using Firebase Hosting

Introduction to Firebase

Create Firebase project and Publish Live

2 - Settings Page - How to create UI

Overview and Routing

Phone Preview UI

Button Settings UI with Provider

Test Yourself!

Summary: Provider, ReordableListView and Keys

Source Code - Settings Page

3 - Firebase Firestore CRUD (Create, Read, Update, Delete)

Install Firestore with Stream Provider

Cloud Firestore - Create

Cloud Firestore - Update

Cloud Firestore - Delete

Flutter Web Firestore Trouble Shooting

Test Yourself!

Summary: Firestore NOSQL Database

Source Code - Firestore CRUD

4 - Firebase Authentication

Overview, Creating Login and Register Page

Implement Firebase Auth Login

Routing with Authentication Part 1

Routing with Authentication Part 2

Proxy Provider

Register Page

Test Yourself!

Summary: Firebase Authentication and Proxy Providers

Source Code - Firebase Authentication

5 - Firebase Storage



Install Firebase Storage and Implement Profile Picture

Use Case: New User Profile Picture

Test Yourself!

Summary: Firebase Storage

Source Code - Firebase Storage

6 - Reordable List View with Firestore

Change Notifier Proxy Provider Implementation

Firestore Batch Implementation

Test Yourself!

Summary: Reordable List View, ChangeNotifierProxyProvider, Firestore Batch

Source Code - Reordable List View

Just the beginning


Your Feedback is Important!


Rahmat29 May 2021

This course is enlightening me a lot. I'm learning very much from basic to intermediate in flutter. The result is very cool also. Great job !

Sujith21 May 2021

Also good for people who start from scratch. Concepts are well explained and the course is well structured and moves in good pace

Roberto22 April 2021

The instructor teaches with infectious enthusiasm, as well as common sense and practical tips that facilitate learning

KAZUHITO22 April 2021

First of all, as a preparatory work, it will teach you in detail from creating the development environment to setting the editor. The content of the lecture is also very good for studying flutter web. Especially, there is a video that you can fix it by using 7.20.0 Firebase as a bug fix that loops in the initial processing of Firebase, which is very kind.

Liam18 April 2021

Some of the methods/attributes have been deprecated in Flutter 2.0 (e.g FlatButton) Please update the material accordingly. Spent a few hours trying the new widgets, but it's hard to follow with the training material then.

Mitchell15 December 2020

Instructor has a good working knowledge of Flutter and shares his knowledge in a fun way. You'll build a Flutter Web app which authenticates with Firebase, using both the emulator and Cloud FireStore. Plenty of tips and tricks to carry into your future projects,

مراقبة15 November 2020

UI is not very great... with different screen sizes and resolutions pops out many issues dude.. don't just say we will do this and that.... explain why!

William13 September 2020

The course is very clear, very easy to follow up and understand. Not only that, the teacher offers amazing support on his Discord Server and even though I'm aware that this level of support will be impossible as soon as his courses start to sell more and more students come asking for help, it was by far the best support I've ever got. The world of Flutter for WEB is changing rapidly so even though this course is fresh, there are already some changes to the functions and solutions presented - specially related to how Firestore should be used. Lastly - because even though it feels nice to be complimented, we only grow from constructive feedback - it would be amazing for the course's quality if the teacher took a step back into showing what he is doing 'step by step' instead of jumping to the solutions on code by saying "we can do this" or "we can write like this" -> it is important for the teacher to remember that the person watching it from this side certainly doesn't know what the word "THIS" means. I'll be happy to follow Haris's venture into Flutter's world, this course was amazing.

David12 July 2020

This is an amazing course, the lecturer is very knowledgeable and wastes no time teaching the essentials

Carson23 June 2020

The instructor needs to slow down.... a lot... He also needs to spend more time explaining the concepts. And much less copy and pasting. For me, even though I'm already a Flutter developer, it was very very difficult to follow along, and code along. It's the first time ever with a Udemy course that I've had to download his code from Github to be able to keep up or understand what he's doing. If you've never programmed with Dart or Flutter forget it! Hope he can learn from this. I've given one and half stars for content. Without the content this would be zero.

Gerson17 June 2020

First chapters are awesome i learnt a lot but final ones are very confused and fill with all kind of bugs.

Matthew6 June 2020

Excellent project concept but the the delivery (the pause, copy, paste all in 1 millsec) is a nightmare. Flutter beginners can't coup with this. Surviving with some flutter experience.

Willard23 May 2020

Haris is covering stuff that you won't find in other Flutter courses. He does so in a funny, engaging way. Pretty advanced stuff but easy to understand. Amazing how much he knows about Flutter and how well he delivers it.


Udemy ID


Course created date


Course Indexed date
Course Submitted by