Flutter Web - Build a Diary Web App with Flutter and Cloud Firestore

Video description

If you have wondered how to leverage your pre-existing Flutter/Dart development skills, then you will be happy to know you can now build dynamic, scalable, and adaptive web apps with Flutter!

Flutter 2.0 is a big release - you can use Flutter and Dart to build adaptive web and desktop apps - all with a single codebase.

In this course, you will learn how to leverage Flutter (Web) 2.0 and Dart and build a capstone app called DiaryBook.

In this course, you will build a full-fledged, more complex, Flutter web app with Firestore; FirebaseAuth as the backend; create, authenticate, and log in users using Google Cloud FirebaseAuth; create, edit, delete, update diary entries with Cloud Firestore backend; use providers, StreamBuilders in Flutter web; learn how to implement basic and advanced routing in Flutter 2.0 web; finally, deploy Flutter web app to firebase hosting.

By the end of this course, you will have all the tools and knowledge you will need to build adaptive Flutter web apps competently and easily port the same app into desktop apps on your own!

What You Will Learn

  • Build a complete web app with Flutter web and Cloud Firebase Firestore
  • Master advanced Flutter APIs such as providers and routing
  • Learn how to use FirebaseAuth to authenticate web app users
  • Build adaptive, dynamic web apps with Flutter 2.0
  • Create, edit, delete, update diary entries with Cloud Firestore backend
  • Deploy Flutter web apps to Firebase hosting

Audience

This course is designed for beginner to intermediate Flutter developers. Web developers who want to learn to build Flutter web apps and curious students who want to build their own Flutter web apps, iOS, Android, and desktop apps with Flutter 2.0 can also benefit from this course.

Having some basic programming experience, in general, is helpful. If you have basic OOP (Object-Oriented Programming) concepts, you should be fine. Also, pre-existing Flutter and Dart programming experience or web development basics are helpful.

About The Author

Paulo Dichone: Paulo Dichone is a highly skilled developer and teacher with a strong background in Computer Science. With his expertise in Android App Development for mobile and web platforms, Paulo founded Magadistudio, a successful mobile app development company.

Passionate about teaching, Paulo is dedicated to helping learners master Android app development. His goal is to empower students with the knowledge and skills needed to create impressive Android applications and experience the freedom of being an Android developer.

With his deep understanding of the subject matter and a commitment to student success, Paulo Dichone is a trusted instructor who can guide learners on their journey to becoming proficient Android developers.

Table of contents

  1. Chapter 1 : Introduction
    1. Introduction and Course Prerequisites
    2. What You will be Building in this Course
  2. Chapter 2 : Machine Setup - Windows Users Only
    1. Set Up Your Windows Machine for Flutter Web Development
  3. Chapter 3 : Machine Setup - Mac Users Only
    1. Set Up Your Mac Machine for Flutter Web Development
  4. Chapter 4 : Build a DiaryBook Flutter Web App
    1. Set Up DiaryBook Project
    2. Adding AppBar and DiaryBook Logo
    3. Refactoring the MainPage Code
    4. Adding a DropDown Menu
    5. Changing the State of the DropDown Button
    6. Setting Up AppBar's Circular Avatar and Signout
  5. Chapter 5 : DiaryBook Web App - The Main Body
    1. Setting Up the Main Page Body - The Left Side
    2. Adding a DatePicker Package
    3. Adding a Card Button and a Floating Action Button
    4. Setting Up a Placeholder Listview - Right Side
  6. Chapter 6 : DiaryBook Web App - FirebaseAuth and Cloud Firebase Firestore
    1. Setting Up Firebase and Firestore Project
    2. Reading Items from Firestore
    3. Setting Up the Getting Started Page
    4. Navigating to Login Page
    5. Setting Up the Login Form
    6. Login Form - Creating the BuildInput Decoration
    7. Adding the Password Field and Refactoring the Form
    8. Login Form - Adding Validation
    9. Login a User - FirebaseAuth
    10. Toggling Create Account Form and Login Form
    11. Login User and Taking them to the Main Page
  7. Chapter 7 : DiaryBook Web App - The User Profile
    1. User Creation Structure
    2. Crating a User and Adding to Firestore Users Collection
    3. Creating a User Data Class
    4. Creating a Service Class and Code Refactoring - Login Created for Users and Showing Them
    5. Filtering Users and Showing Names on AppBar
    6. Showing User Avatar and Changing the Flutter Web Renderer
    7. Creating the CreateUserProfile Class
    8. Constructing the CreateUserProfile Class - Dialogs and Fields
    9. Updating a User Profile
    10. Code Refactor - Update User Profile Dialog Class
    11. Signing User Out
  8. Chapter 8 : DiaryBook Web App - Creating, Updating, Deleting, and Showing Diary Entries
    1. Introduction - Creating Diary Entries
    2. Diary Entry Alert Dialog - Adding Two Buttons
    3. Diary Entry Alert Dialog - Adding the Image Container
    4. Diary Entry Alert Dialog - Adding TextFields
    5. Diary Entry Alert Dialog - Refactor Code
    6. Diary Entry Alert Dialog - Saving a Dummy Entry and Adding Saving Animation
    7. Creating the Diary Model Class and Saving the Diaries with All Fields
    8. Adding and Showing Filtered Diaries by UserId
    9. Passing the Date to the Dialog
    10. Showing and Saving the Date along with the Diary Entry
    11. Refactoring our DiaryListView Code
  9. Chapter 9 : DiaryBook Web App - Diary Listview and Saving Images to Firebase Storage
    1. Refactoring and Setting Up the Diary Listview Card
    2. Fixing the Expanding Issues and Adding Description and Dummy Image to Listview Card
    3. Date Format - Show Full Date and Time
    4. Adding an ImagePicker and Showing the Picked Image
    5. Setting Up Firebase Storage and the Infrastructure to Save Images to Storage
    6. Saving and Showing Images from Cloud Storage
    7. Deleting an Entry
    8. Refactor Our Delete Entry Dialog
    9. Creating the Edit-Update Dialog: Delete Functionality Setup
    10. Setting Up the Update-Details Dialog
    11. FIX: Overflow Issues and Adding FutureDelay when Saving Images - Potential Bug Fix
    12. Refactoring the List Card
  10. Chapter 10 : DiaryBook Web App - Set Up the Update Dialog
    1. Setting Up the Update Entry Dialog
    2. Update Dialog - Adding Icons and Image
    3. Update Dialog - Creating Fields and Pulling in the Diary Data
    4. Update Dialog - Refactoring Code
    5. Update Dialog - Setting Up the Image Picker and Delete Buttons
    6. Update Dialog - Setting Up the Update Code
    7. Fixing Some Null Issues
    8. Passing a Widget as Parameter
  11. Chapter 11 : DiaryBook Web App - Filtering Entries by Date and Updating the ListView
    1. Filtering Entries by Date
    2. Setting Up the GetSameDayDiaries Method
    3. Indexing Firestore Database and Checking that We are Filtering Entries
    4. Setting Up a List of Diaries
    5. Showing Filtered Diaries by Date Picked
    6. Restructuring the Filtered Diaries to be Shown and Showing the Empty Diary Card
    7. Adding All Entries to a Provider Object
    8. Filtering DiaryList by Current User and Adding a User Provider
  12. Chapter 12 : DiaryBook Web App - Filtering Diary Entries Further - Earliest and Latest
    1. Filtering Diary Entries Further - Earliest and Latest
    2. Filtering by Latest and Earliest Added Diaries
    3. Adding onPress to FAB
    4. Adding a Delayed Animation to the Listview
  13. Chapter 13 : DiaryBook Web App - Advanced Routing
    1. Advanced Routing
    2. Page Not Found and Restructuring Routing
    3. Final Remarks
  14. Chapter 14 : Deploying the Web App to Firebase Hosting
    1. CLI Setup - Instructions
    2. Deploying the Web App to Firebase Hosting

Product information

  • Title: Flutter Web - Build a Diary Web App with Flutter and Cloud Firestore
  • Author(s): Paulo Dichone
  • Release date: August 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781803232478