Description

In this course, build a full-fledged Flutter web app called DiaryBook with Flutter 2.0 and Dart. Also, learn to use Cloud Firebase Firestore to deploy our web app.

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! All the code files and resources for this course are available at https://github.com/PacktPublishing/Flutter-Web---Build-a-Diary-Web-App-with-Flutter-and-Cloud-Firestore

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.

Approach

This is a complete practical course where you will be building an adaptive Flutter 2.0 web app called DiaryBook using Google Cloud Firebase Firestore - a real-time database and storage from scratch.

Key Features

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 * Learn how to implement basic and advanced routing in Flutter 2.0 web

Github Repo

https://github.com/PacktPublishing/Flutter-Web---Build-a-Diary-Web-App-with-Flutter-and-Cloud-Firestore

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.

Course Outline

1. Introduction

Welcome to the Introductory section of the course where we will get a glimpse of the course.

1. Introduction and Course Prerequisites

In the video, we will take a quick look to the course introduction and understand the course prerequisites.

2. What You will be Building in this Course

In the video, we will understand what you will be building in this course.

2. Machine Setup - Windows Users Only

In this section, we will get our machines set up for Windows system.

1. Set Up Your Windows Machine for Flutter Web Development

In this video, we will set up your Windows machine for Flutter web development.

3. Machine Setup - Mac Users Only

In this section, we will get our machine set up for the Mac system.

1. Set Up Your Mac Machine for Flutter Web Development

In this video, we will set up your Mac machine for Flutter web development.

4. Build a DiaryBook Flutter Web App

In this section, we will build a DiaryBook Flutter web app as a project.

1. Set Up DiaryBook Project

In this video, we will set up DiaryBook project.

2. Adding AppBar and DiaryBook Logo

In this video, we will be adding AppBar and DiaryBook logo.

3. Refactoring the MainPage Code

In this video, we will be refactoring the MainPage code.

4. Adding a DropDown Menu

In this video, we will be adding a DropDown menu.

5. Changing the State of the DropDown Button

In this video, we will be changing the state of the DropDown button.

6. Setting Up AppBar's Circular Avatar and Signout

In this video, we will be setting up AppBar's circular avatar and signout.

5. DiaryBook Web App - The Main Body

In this section, we will work on the main body of DiaryBook web app.

1. Setting Up the Main Page Body - The Left Side

In this video, we will be setting up the main page body - the left side.

2. Adding a DatePicker Package

In this video, we will be adding a DatePicker package.

3. Adding a Card Button and a Floating Action Button

In this video, we will be adding a card button and a floating action button.

4. Setting Up a Placeholder Listview - Right Side

In this video, we will be setting up a placeholder Listview - right side.

6. DiaryBook Web App - FirebaseAuth and Cloud Firebase Firestore

In this section, we will work on FirebaseAuth and Cloud Firebase Firestore of DiaryBook web app.

1. Setting Up Firebase and Firestore Project

In this video, we will be setting up Firebase and Firestore project.

2. Reading Items from Firestore

In this video, we will be reading items from Firestore.

3. Setting Up the Getting Started Page

In this video, we will be setting up the getting started page.

4. Navigating to Login Page

In this video, we will be navigating to login page.

5. Setting Up the Login Form

In this video, we will be setting up the login form.

6. Login Form - Creating the BuildInput Decoration

In this video, we will be creating the BuildInput decoration for our login form.

7. Adding the Password Field and Refactoring the Form

In this video, we will be adding the password field and refactoring the form.

8. Login Form - Adding Validation

In this video, we will be adding validation to the login form.

9. Login a User - FirebaseAuth

In this video, we will work on logging in a user with FirebaseAuth.

10. Toggling Create Account Form and Login Form

In this video, we will be toggling create account form and login form.

11. Login User and Taking them to the Main Page

In this video, we will explain login user and taking them to the main page.

7. DiaryBook Web App - The User Profile

In this section, we will work on the user profile of DiaryBook web app.

1. User Creation Structure

In this video, we will work on user creation structure.

2. Crating a User and Adding to Firestore Users Collection

In this video, we will be creating a user and adding to Firestore users collection.

3. Creating a User Data Class

In this video, we will be creating a user data class.

4. Creating a Service Class and Code Refactoring - Login Created for Users and Showing Them

In this video, we will be creating a service class and code refactoring - login created users and will show them.

5. Filtering Users and Showing Names on AppBar

In this video, we will be filtering users and showing names on AppBar.

6. Showing User Avatar and Changing the Flutter Web Renderer

In this video, we will be showing user avatar and changing the flutter web renderer.

7. Creating the CreateUserProfile Class

In this video, we will be creating the CreateUserProfile class.

8. Constructing the CreateUserProfile Class - Dialogs and Fields

In this video, we will be constructing the CreateUserProfile class - dialogs and fields.

9. Updating a User Profile

In this video, we will be updating a user profile.

10. Code Refactor - Update User Profile Dialog Class

In this video, we will be refactoring the code to update user profile dialog class.

11. Signing User Out

In this video, we will be signing user out.

8. DiaryBook Web App - Creating, Updating, Deleting, and Showing Diary Entries

In this section, we will work on creating, updating, deleting, and showing diary entries of DiaryBook web app.

1. Introduction - Creating Diary Entries

In this video, we will be creating diary entries.

2. Diary Entry Alert Dialog - Adding Two Buttons

In this video, we will be adding two buttons to the diary entry alert dialog.

3. Diary Entry Alert Dialog - Adding the Image Container

In this video, we will be adding the image container to the diary entry alert dialog.

4. Diary Entry Alert Dialog - Adding TextFields

In this video, we will be adding TextFields to the diary entry alert dialog.

5. Diary Entry Alert Dialog - Refactor Code

In this video, we will be refactoring the code for the diary entry alert dialog.

6. Diary Entry Alert Dialog - Saving a Dummy Entry and Adding Saving Animation

In this video, we will be saving a dummy entry and adding saving animation to the diary entry alert dialog.

7. Creating the Diary Model Class and Saving the Diaries with All Fields

In this video, we will be creating the diary model class and saving the diaries with all fields.

8. Adding and Showing Filtered Diaries by UserId

In this video, we will be adding and showing filtered diaries by UserId.

9. Passing the Date to the Dialog

In this video, we will be passing the date to the dialog.

10. Showing and Saving the Date along with the Diary Entry

In this video, we will be showing and saving the date along with the diary entry.

11. Refactoring our DiaryListView Code

In this video, we will be refactoring our DiaryListView code.

9. DiaryBook Web App - Diary Listview and Saving Images to Firebase Storage

In this section, we will work on Diary Listview and saving images to Firebase storage of DiaryBook web app.

1. Refactoring and Setting Up the Diary Listview Card

In this video, we will be refactoring and setting up the diary Listview card.

2. Fixing the Expanding Issues and Adding Description and Dummy Image to Listview Card

In this video, we will be fixing the expanding issues and adding description and dummy image to Listview card.

3. Date Format - Show Full Date and Time

In this video, we will be working with date format to show full date and time.

4. Adding an ImagePicker and Showing the Picked Image

In this video, we will be adding an ImagePicker and showing the picked image.

5. Setting Up Firebase Storage and the Infrastructure to Save Images to Storage

In this video, we will be setting up firebase storage and the infrastructure to save images to storage.

6. Saving and Showing Images from Cloud Storage

In this video, we will be saving and showing images from cloud storage.

7. Deleting an Entry

In this video, we will be deleting an entry.

8. Refactor Our Delete Entry Dialog

In this video, we will learn how to refactor our delete entry dialog.

9. Creating the Edit-Update Dialog: Delete Functionality Setup

In this video, we will be creating the edit-update dialog: delete functionality setup.

10. Setting Up the Update-Details Dialog

In this video, we will be setting up the update-details dialog.

11. FIX: Overflow Issues and Adding FutureDelay when Saving Images - Potential Bug Fix

In this video, we will be fixing the overflow issues and adding FutureDelay when saving images as a potential bug fix.

12. Refactoring the List Card

In this video, we will be refactoring the List card.

10. DiaryBook Web App - Set Up the Update Dialog

In this section, we will work on setting up the update dialog of DiaryBook web app.

1. Setting Up the Update Entry Dialog

In this video, we will be setting up the update entry dialog.

2. Update Dialog - Adding Icons and Image

In this video, we will be updating dialog, and adding icons and image.

3. Update Dialog - Creating Fields and Pulling in the Diary Data

In this video, we will be creating fields and pulling in the diary data for update dialog.

4. Update Dialog - Refactoring Code

In this video, we will be refactoring code for update dialog.

5. Update Dialog - Setting Up the Image Picker and Delete Buttons

In this video, we will be setting up the image picker and delete buttons.

6. Update Dialog - Setting Up the Update Code

In this video, we will be setting up the update code.

7. Fixing Some Null Issues

In this video, we will be fixing some null issues.

8. Passing a Widget as Parameter

In this video, we will be passing a widget as parameter.

11. DiaryBook Web App - Filtering Entries by Date and Updating the ListView

In this section, we will work on filtering entries by date and updating the ListView of DiaryBook web app.

1. Filtering Entries by Date

In this video, we will be filtering entries by date.

2. Setting Up the GetSameDayDiaries Method

In this video, we will be setting up the GetSameDayDiaries method.

3. Indexing Firestore Database and Checking that We are Filtering Entries

In this video, we will be indexing Firestore database and checking that we are filtering entries.

4. Setting Up a List of Diaries

In this video, we will be setting up a list of diaries.

5. Showing Filtered Diaries by Date Picked

In this video, we will be showing filtered diaries by date picked.

6. Restructuring the Filtered Diaries to be Shown and Showing the Empty Diary Card

In this video, we will be restructuring the filtered diaries to be shown and showing the empty diary card.

7. Adding All Entries to a Provider Object

In this video, we will be adding all entries to a provider object.

8. Filtering DiaryList by Current User and Adding a User Provider

In this video, we will be filtering DiaryList by current user and adding a user provider.

12. DiaryBook Web App - Filtering Diary Entries Further - Earliest and Latest

In this section, we will work on filtering diary entries further - earliest and latest of DiaryBook web app.

1. Filtering Diary Entries Further - Earliest and Latest

In this video, we will be filtering diary entries further - earliest and latest.

2. Filtering by Latest and Earliest Added Diaries

In this video, we will be filtering by latest and earliest added diaries.

3. Adding onPress to FAB

In this video, we will be adding onPress to FAB.

4. Adding a Delayed Animation to the Listview

In this video, we will be adding a delayed animation to the Listview.

13. DiaryBook Web App - Advanced Routing

In this section, we will work on advanced routing of DiaryBook web app.

1. Advanced Routing

In this video, we will work on advanced routing.

2. Page Not Found and Restructuring Routing

In this video, we will work on page not found and restructuring routing.

3. Final Remarks

In this video, we will understand what is to be done next with our app.

14. Deploying the Web App to Firebase Hosting

In this section, we will be deploying the web app to Firebase hosting.

1. CLI Setup - Instructions

In this video, we will be covering the instructions for CLI setup.

2. Deploying the Web App to Firebase Hosting

In this video, we will be deploying the web app to Firebase hosting.

Course Images

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

By Packt

Booking options

Highlights