Three Trees: Widget Tree, Element Tree & Render Tree

Flutter & Dart - The Complete Guide

Introduction

What Is Flutter? (2:49)
Welcome To This Course! (1:16)
Flutter uses Dart! (1:51)
One Codebase, Multiple Platforms (2:56)
Flutter Setup - Overview (3:58)
Windows Setup (13:26)
macOS Setup (17:53)
Project Creation & Setting Up a Code Editor for Flutter Development (5:10)
Running a First Flutter App (9:06)
Understanding Material Design (2:35)
About This Course (4:43)
Course Resources (Code Snapshots, Community & Slides)

Flutter & Dart Basics I - Getting a Solid Foundation [ROLL DICE APP]

Module Introduction (1:21)
Analyzing A New Flutter Project (8:50)
From Dart To Machine Code (3:05)
How Programming Languages Work (5:51)
Starting From Scratch: Understanding Functions (6:05)
Importing Features From Packages (5:02)
How Flutter Apps Start (2:26)
Understanding Widgets (2:52)
Using a First Widget & Passing Values to Functions (4:37)
Positional & Named Arguments (3:58)
Deep Dive: Position & Named Arguments
Combining Multiple Widgets (2:50)
Understanding "const" Values (3:58)
Building More Complex Widget Trees (7:25)
Understanding Value Types (6:54)
Configuring Widgets & Understanding Objects (7:24)
Working with "Configuration Objects" (Non-Widget Objects) (5:14)
Generics, Lists & Adding Gradient Colors (4:13)
How To Configure Widgets & Objects (3:03)
Practice: Styling Text (3:27)
Onwards to Custom Widgets: Why Do You Need Them? (2:37)
Understanding Classes (5:01)
Building Custom Widgets (9:27)
Working with Constructor Functions (5:56)
Splitting Code Across Files (3:18)
Practice: Create a Custom Widget (3:49)
Introducing Variables (5:22)
Variables & Types - Combining Two Key Concepts (2:23)
"final" & "const" - Special Kinds Of "Variables" (4:53)
Instance Variables (Properties) & Configurable Widgets (10:03)
Practice: Reusable Widgets & Constructor Functions (6:40)
Displaying Images & Using Multiple Constructor Functions (6:35)
Adding Buttons & Using Functions As Values (6:09)
Styling Buttons & Working with Padding (6:17)
How NOT To Build Interactive Widgets (3:48)
Introducing Stateful Widgets (15:06)
Generating Random Numbers (7:54)
Module Summary (10:21)
Knowledge Check: Flutter & Dart Basics

Flutter & Dart Basics II - Fundamentals Deep Dive [QUIZ APP]

Module Introduction (2:01)
A Challenge For You! (2:21)
Challenge Solution 1/2 - Creating a Widget (11:46)
Challenge Solution 2/2 - Working with More Widgets (17:05)
Adding Icons to Buttons (3:43)
Adding Transparency to Widgets (4:22)
Repetition & Exercise: Adding a Stateful Widget (10:50)
Rendering Content Conditionally (7:02)
Accepting & Passing Functions as Values (9:16)
The "initState" Method (4:28)
Deep Dive: Flutter's (Stateful) Widget Lifecyle
Using Ternary Expressions & Comparison Operators (7:05)
Understanding "if" Statements (4:52)
Using "if" Statements In Lists
if Statements & Comparison Operators
Adding a Data Model & Dummy Data (8:48)
Configuring a Column (5:35)
Creating a Reusable, Custom Styled Button (12:05)
Accessing List Elements & Object Properties (5:53)
Mapping Lists & Using the Spread Operator (7:45)
Alignment, Margin & Padding (3:57)
Mutating Values in Memory (5:46)
Managing The Questions Index As State (5:49)
More on Button Styling (1:20)
Using Third-Party Packages & Adding Google Fonts (7:26)
Passing Data via Functions Across Widgets (13:18)
More Conditions (4:27)
Getting Started with the Results Screen (8:02)
Passing Data to the Results Screen (2:40)
Introducing Maps & "for" Loops (12:00)
Using "for" Loops In Lists
Accessing Map Values & Using "Type Casting" (10:53)
Combining Columns & Rows (6:07)
Expanded To The Rescue! (3:07)
Filtering & Analyzing Lists (7:43)
Making Content Scrollable with SingleChildScrollView (4:07)
Time to Practice: Flutter Basics - Problem (1:54)
Time to Practice: Flutter Basics - Solution (9:36)
Beyond the Basics: Optional, Important Dart Features (8:53)
Module Summary (7:32)

Debugging Flutter Apps

Module Introduction (0:56)
The Starting Project & A Problem (1:08)
Understanding Error Messages (7:36)
Debugging Apps & Using "Debug Mode" (14:59)
Working with the Flutter DevTools (7:41)
Running the App on Real iOS or Android Devices

Adding Interactivity, More Widgets & Theming [EXPENSE TRACKER APP]

Module Introduction (1:38)
Starting Setup & Repetition Time! (7:07)
Adding an Expense Data Model with a Unique ID & Exploring Initializer Lists (6:59)
Introducing Enums (4:10)
Creating Dummy Data (4:02)
Efficiently Rendering Long Lists with ListView (10:21)
Using Lists Inside Of Lists (2:27)
Creating a Custom List Item with the Card & Spacer Widgets (16:47)
Using Icons & Formatting Dates (7:25)
Setting an AppBar with a Title & Actions (6:46)
Adding a Modal Sheet & Understanding Context (7:24)
Handling User (Text) Input with the TextField Widget (8:14)
Getting User Input on Every Keystroke (4:53)
Letting Flutter do the Work with TextEditingController (4:10)
Time to Practice: Adding a New Input - Problem (1:11)
Time to Practice: Adding a New Input - Solution (3:50)
Closing The Modal Manually (1:47)
Showing a Date Picker (8:33)
Working with "Futures" for Handling Data from the Future (7:41)
Adding a Dropdown Button (10:57)
Combining Conditions with AND and OR Operators (7:48)
Validating User Input & Showing an Error Dialog (5:11)
Saving New Expenses (5:59)
Creating a Fullscreen Modal (2:02)
Using the Dismissible Widget for Dismissing List Items (7:46)
Showing & Managing "Snackbars" (9:13)
Getting Started with Theming (7:43)
Setting & Using a Color Scheme (6:39)
Setting Text Themes (9:00)
Using Theme Data in Widgets (9:02)
Adding Dark Mode (7:13)
Using Another Kind of Loop (for-in) (5:03)
Adding Alternative Constructor Functions & Filtering Lists (4:39)
Adding Chart Widgets (10:27)
Module Summary (2:45)

Building Responsive & Adaptive User Interfaces [EXPENSE TRACKER APP]

Module Introduction (0:57)
What is "Responsiveness"? (2:06)
Locking the Device Orientiation (4:53)
Updating the UI based on the Available Space (7:55)
Understanding Size Constraints (7:09)
Handling to Screen Overlays like the Soft Keyboard (5:12)
Understanding "Safe Areas" (2:53)
Using the LayoutBuilder Widget (12:04)
Building Adaptive Widgets (7:14)
Module Summary (1:26)

Flutter & Dart Internals [TODO APP]

Module Introduction (1:09)
Three Trees: Widget Tree, Element Tree & Render Tree (4:46)
How The UI Is Updated (6:51)
Refactor & Extract Widgets To Avoid Unnecessary Builds (6:34)
Understanding Keys - Setup (4:34)
Which Problem Do Keys Solve? (5:33)
Understanding & Using Keys (4:12)
Mutating Values in Memory & Making Sense of var, final & const (6:56)
Module Summary (0:55)

Building Multi-Screen Apps & Navigating Between Screens [MEALS APP]

Module Introduction (2:05)
Project Setup (1:35)
Using a GridView (7:58)
Widgets vs Screens (6:13)
Displaying Category Items on a Screen (8:02)
Making any Widget Tappable with InkWell (3:34)
Adding Meals Data (5:20)
Loading Meals Data Into a Screen (6:37)
Adding Cross-Screen Navigation (8:41)
Passing Data to the Target Screen (4:53)
Introducing the Stack Widget (17:01)
Improving the MealItem Widget (11:53)
Adding Navigation to the MealDetails Screen (9:58)
Improving the MealDetails Screen (8:15)
Adding Tab-based Navigation (16:34)
Passing Functions Through Multiple Layers of Widgets (for State Management) (11:55)
Managing App-wide State & Data (5:28)
Adding a Side Drawer (14:08)
Closing the Drawer Manually (5:35)
Adding a Filter Item (7:33)
Replacing Screens (Instead of Pushing) (7:58)
Adding More Filter Options (2:44)
Returning Data When Leaving a Screen (6:18)
Reading & Using Returned Data (4:31)
Applying Filters (15:50)
An Alternative Navigation Pattern: Using Named Routes
Module Summary (3:04)

Managing App-wide State [MEALS APP]

Module Introduction (1:29)
What's The Problem? (2:08)
Installing the Solution: Riverpod (1:20)
How State Management with Riverpod Works (1:21)
Creating a Provider (3:55)
Using a Provider (7:17)
Creating a More Complex Provider with StateNotifier (12:18)
Using the FavoritesProvider (4:49)
Triggering a Notifier Method (5:31)
Getting Started with Another Provider (8:24)
Combining Local & Provider-managed State (6:33)
Outsourcing State Into The Provider (5:36)
Connecting Multiple Providers With Each Other (Dependent Providers) (5:19)
Swapping The "Favorite Button" Based On Provider State (2:41)
Module Summary (3:11)
"riverpod" vs "provider" - There are many Alternatives!

Adding Animations [MEALS APP]

Module Introduction (0:44)
Setup & Understanding Explicit vs Implicit Animations (1:52)
Explicit Animations: Adding an Animation Controller (9:35)
Explicit Animations: Playing the Animation with AnimatedBuilder (8:39)
Finetuning Explicit Animations (8:36)
Getting Started with Implicit Animations (7:23)
Configuring Implicit Animations (5:49)
Adding Multi-Screen Transitions (3:54)
Module Summary (2:28)

Handling User Input & Working with Forms [SHOPPING LIST APP]

Module Introduction (1:18)
Setup & A Challenge For You (2:59)
Challenge Solution 1 - Building & Using Models (8:06)
Challenge Solution 2 - Building the List UI (9:27)
Adding a "New Item" Screen (7:45)
The Form & TextFormField Widgets (6:23)
A Form-aware Dropdown Button (9:16)
Adding Buttons to a Form (2:22)
Adding Validation Logic (8:11)
Getting Form Access via a Global Key (7:19)
Extracting Entered Values (9:19)
Passing Data Between Screens (7:16)
Final Challenge Solution (4:18)
Module Summary (1:12)

Connecting a Backend & Sending HTTP Requests [SHOPPING LIST APP]

Module Introduction (0:38)
What's a Backend? And Why Would You Want One? (3:31)
What Is HTTP & How Does It Work? (4:10)
Setting Up a Dummy Backend (Firebase) (3:25)
Adding the http Package (3:18)
Sending a POST Request to the Backend (9:57)
Working with the Request & Waiting for the Response (8:56)
Fetching & Transforming Data (14:57)
Avoiding Unnecessary Requests (4:46)
Managing the Loading State (7:07)
Error Response Handling (5:14)
Sending DELETE Requests (6:44)
Handling the "No Data" Case (3:43)
Better Error Handling (5:52)
Module Summary (2:20)
Using the FutureBuilder Widget (18:07)

Using Native Device Features (e.g., Camera) [FAVORITE PLACES APP]

Module Introduction (1:52)
Setup & A Challenge For You! (3:44)
Adding a Place Model (Challenge Solution 1/6) (2:26)
Adding a "Places" Screen (Challenge Solution 2/6) (10:00)
Adding an "Add Place" Screen (Challenge Solution 3/6) (9:38)
Adding "riverpod" & A Provider (Challenge Solution 4/6) (6:59)
Adding Places with Provider & Displaying Places (Challenge Solution 5/6) (7:34)
Adding a "Place Details" Screen (Challenge Solution 6/6) (4:55)
Adding a "Pick an Image" Input (7:54)
Installing the "Image Picker" Package (5:05)
Using the Device Camera For Taking Pictures (10:39)
Adding the Picked Image to the Model & "Add Place" Form (6:10)
Previewing the Picked Image (4:54)
Adding the "location" Package & Starting with the "Get Location" Input Widget (8:50)
Getting the User's Current Location (6:13)
Using the Google Maps API - Setup (3:34)
Using Google's Geocoding API (6:23)
Storing the Location Data in the Model (3:35)
Displaying a Location Preview Map Snapshot via Google (7:17)
Using the Picked Location in the Form (3:21)
Outputting the Location Data (7:46)
Installing & Configuring the Google Maps Package (3:43)
Adding a "Map" Screen (9:37)
Displaying the Picked Place on a Dynamic Map (2:55)
Handling Map Taps for Selecting a Location Manually (4:37)
Using the Map Screen in the "Add Place" Form (8:24)
Installing Packages for Local (On-Device) Data Storage (4:00)
Storing the Picked Image Locally (4:59)
Storing Place Data in a (On-Device) SQL Database (8:50)
Loading Data from the SQL Database (8:09)
Using a FutureBuilder for Loading Data (6:01)
Module Summary (2:15)
Adding Your Own Native Code

Push Notifications & More: Building a Chat App with Flutter & Firebase

Module Introduction (1:37)
App & Firebase Setup (5:40)
Adding an Authentication Screen (11:55)
Adding Buttons & Modes to the Authentication Screen (6:44)
Validating User Input (8:26)
Firebase CLI & SDK Setup 1/2 (8:03)
Firebase CLI & SDK Setup 2/2 (6:14)
Signing Users Up (8:45)
Logging Users In (6:16)
Showing Different Screens Based On The Authentication State (8:51)
Adding a Splash Screen (Loading Screen) (2:42)
Adding User Logout (4:25)
Image Upload: Setup & First Steps (4:43)
Adding a User Image Picker Widget (4:04)
Using the ImagePicker Package (7:37)
Managing The Selected Image In The Authentication Form (5:06)
Uploading Images To Firebase (6:51)
Showing a Loading Spinner Whilst Uploading (3:05)
Adding a Remote Database: Firestore Setup (4:43)
Sending Data to Firestore (7:26)
Storing a Username (4:46)
Adding ChatMessages & Input Widgets (10:13)
Sending & Reading Data To & From Firestore (10:56)
Loading & Displaying Chat Messages as a Stream (8:16)
Styling Chat Message Bubbles (12:00)
Push Notifications - Setup & First Steps (9:20)
Requesting Permissions & Getting an Address Token (6:16)
Testing Push Notifications (5:26)
Working with Notification Topics (2:42)
Sending Push Notifications Automatically via Cloud Functions (11:47)
Module Summary (1:11)

Next Steps & Roundup

Publishing iOS & Android Apps
Course Roundup (0:57)

Three Trees: Widget Tree, Element Tree & Render Tree

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock