US $19.97

Build a Diary Web App with Flutter - Master Cloud Firebase & Firestore

——   Created by Paulo Dichone

Share this course:

9h 28m
Lesson time
Skill levels

More about this course

Let's build a complete Diary web app with Flutter and Dart!

You'll learn how to leverage Flutter 2.0 and Dart and build a full-fledged Diary Web App from scratch in this course!

By the end of the course you'll be able to:

  • Understand Flutter Widgets 
  • How to construct a web page using Flutter Web and Dart
  • How to add make your Flutter Web App Responsive and fairly Adaptive
  • How to leverage pre-existing Flutter, Web, or programming skills to build a simple Portfolio Web App from scratch.
  • Use FirebaseAuth and Cloud Firestore as the backend of your web app
  • Deploy a Flutter Web app to Firebase Hosting and see your web app live!
  • and so much more

This course assumes your pre-existing Flutter or any prior Programming experience; however, if you've done a little programming before or have some basics programming skills down, you should be fine.

If any of these sound exciting to you, then get started on the course right away!

See you soon!

Paulo Dichone

The course project

**Source code: Flutter Web Diary App Source Code**

Capstone Project - Flutter Web Diary App with Cloud Firestore Backend

For your project, you will create a Diary Web App. 

You'll be able to add a few widgets and layouts to the web app and make it your own! 

This is a moderately complex and involved application, so take your time to follow along and complete each part of the project.

 Your challenge is to add different colors, images... labels, button colors, button icons, etc.! Then, make this web app your own!

The Main Goal

The project will be divided into a few stages:

 Build the AppBar  

Follow the class and build the app's AppBar, but you need to add your own colors and images - make it your own :) Also, you'll notice that the AppBar has a few sub-categories you'll need to complete, such as the dropdown button, the logout button, the app logo, and the user profile. 

   Build the Main Page/Body

 There are a few other parts you'll need to do to finish building the page. You'll need to add a calendar widget; a 'write new' button and a floating Action button. You'll also need to add a right listview which will hold all of the entries. A few sub-steps need to be done to have a full main page/body finished and functioning.

Add an Entry

When the 'add' button is clicked, users will see a pop-up where they'll be able to enter information to be added to the database as an entry. There are also a few other User Interface components that will need to be added to make this pop-up amazing!

User Login

Users will need to log in, but before they can log in, they'll need to...

Create an Account

Only once they've created an account will they be able to log in and use the app.  

Edit a Diary Entry

Each entry can also be edited through a popup.

Delete an Entry

Each entry can also be deleted.

There's a lot of work ahead of us! So, let's get started.

Please share your progress with all of us in this class by posting screenshots of your project at each stage of the process!


**Source code: Flutter Web Diary App Source Code**

Let me know if you have any questions!

Happy Coding!


84 Lessons

5 mins
Introduction and Prerequisites
5 mins
What You'll be Building
Machine Setup Windows
2 mins
Windows Flutter VSCode Setup SS
Machine Setup Mac
2 mins
Mac Machine Setup SS
Building the Diary Book Web App - Setup
5 mins
Set up Diary Project
6 mins
Adding AppBar and DiaryBook Logo
5 mins
Refactoring MainPage
7 mins
Adding a DropDownMenu
6 mins
Changing the State of the DropDownButton
6 mins
Setup AppBar Circular Avatar and Signout
4.1 - Setup The Main Body - Skeleton
View more lessons +

About the instructor

Paulo Dichone
Paulo Dichone
  • 1 courses

Hi! I'm Paulo. I have a degree in Computer Science from Whitworth University, and I am a programming geek and very proud of it!

I …

Read more
This course is included in Arbington Premium
$15/month gets you access to every course. Start your 14 day trial today. ☝️

Class benefits

  • Certificate of Completion
  • 30 day satisfaction guarantee
  • 24/7 streaming access
  • Project included
  • Direct teacher access
  • 9h 28m of on-demand video
  • 4 downloadable files
  • Have a coupon?
  • Checkout