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