Flutter & Dart - The Complete Guide

Welcome To This Course!

What Is Flutter?

Flutter uses Dart!

One Codebase, Multiple Platforms

Flutter Setup - Overview

Windows Setup

MacOS Setup

Project Creation & Setting Up a Code Editor for Flutter Development

Course Setup

Running a First Flutter App

Understanding Material Design

About This Course

Course Resources (Code Snapshots, Community & Slides)

Module Introduction

Setup & Understanding Explicit vs Implicit Animations

Explicit Animations: Adding an Animation Controller

Explicit Animations: Playing the Animation with AnimatedBuilder

Finetuning Explicit Animations

Getting Started with Implicit Animations

Configuring Implicit Animations

Adding Multi-Screen Transitions

Module Summary

Module Introduction

Analyzing A New Flutter Project

From Dart To Machine Code

How Programming Languages Work

Starting From Scratch: Understanding Functions

Importing Features From Packages

How Flutter Apps Start

Knowledge Check: Flutter & Dart Basics

Understanding Widgets

Using a First Widget & Passing Values to Functions

Positional & Named Arguments

Deep Dive: Position & Named Arguments

Combining Multiple Widgets

Understanding "const" Values

Flutter & Code Formatting

Building More Complex Widget Trees

Understanding Value Types

Configuring Widgets & Understanding Objects

Working with "Configuration Objects" (Non-Widget Objects)

Generics, Lists & Adding Gradient Colors

How To Configure Widgets & Objects

Practice: Styling Text

Onwards to Custom Widgets: Why Do You Need Them?

Understanding Classes

Building Custom Widgets

Working with Constructor Functions

Splitting Code Across Files

Practice: Create a Custom Widget

Introducing Variables

Variables & Types - Combining Two Key Concepts

"final" & "const" - Special Kinds Of "Variables"

Instance Variables (Properties) & Configurable Widgets

Practice: Reusable Widgets & Constructor Functions

Displaying Images & Using Multiple Constructor Functions

Adding Buttons & Using Functions As Values

Styling Buttons & Working with Padding

How NOT To Build Interactive Widgets

Introducing Stateful Widgets

Generating Random Numbers

Module Summary

Module Introduction

Setup & A Challenge For You

Challenge Solution 1 - Building & Using Models

Challenge Solution 2 - Building the List UI

Adding a "New Item" Screen

The Form & TextFormField Widgets

A Form-aware Dropdown Button

Adding Buttons to a Form

Adding Validation Logic

Getting Form Access via a Global Key

Extracting Entered Values

Passing Data Between Screens

Final Challenge Solution

Module Summary

Module Introduction

A Challenge For You!

Challenge Solution 1/2 - Creating a Widget

Challenge Solution 2/2 - Working with More Widgets

Adding Icons to Buttons

Adding Transparency to Widgets

Repetition & Exercise: Adding a Stateful Widget

Rendering Content Conditionally

Accepting & Passing Functions as Values

The "initState" Method

Deep Dive: Flutter's (Stateful) Widget Lifecycle

Using Ternary Expressions & Comparison Operators

Understanding "if" Statements

Using "if" Statements In Lists

If Statements & Comparison Operators

Adding a Data Model & Dummy Data

Configuring a Column

Creating a Reusable, Custom Styled Button

Accessing List Elements & Object Properties

Mapping Lists & Using the Spread Operator

Alignment, Margin & Padding

Mutating Values in Memory

Managing The Questions Index As State

More on Button Styling

Using Third-Party Packages & Adding Google Fonts

Passing Data via Functions Across Widgets

More Conditions

Getting Started with the Results Screen

Passing Data to the Results Screen

Introducing Maps & "for" Loops

Using "for" Loops In Lists

Note: A Typo In The Next Lecture

Accessing Map Values & Using "Type Casting"

Combining Columns & Rows

Expanded To The Rescue!

Filtering & Analyzing Lists

Making Content Scrollable with SingleChildScrollView

Time to Practice: Flutter Basics

Beyond the Basics: Optional, Important Dart Features

Module Summary

Module Introduction

What's a Backend? And Why Would You Want One?

What Is HTTP & How Does It Work?

Setting Up a Dummy Backend (Firebase)

Adding the http Package

Sending a POST Request to the Backend

Working with the Request & Waiting for the Response

Fetching & Transforming Data

Avoiding Unnecessary Requests

Managing the Loading State

Error Response Handling

Sending DELETE Requests

Handling the "No Data" Case

Better Error Handling

Using the FutureBuilder Widget

Module Summary

Module Introduction

The Starting Project & A Problem

Understanding Error Messages

Debugging Apps & Using "Debug Mode"

Working with the Flutter DevTools

Running the App on Real iOS or Android Devices

Module Introduction

Setup & A Challenge For You!

Adding a Place Model (Challenge Solution 1/6)

Adding a "Places" Screen (Challenge Solution 2/6)

Adding an "Add Place" Screen (Challenge Solution 3/6)

Adding "riverpod" & A Provider (Challenge Solution 4/6)

Adding Places with Provider & Displaying Places (Challenge Solution 5/6)

Adding a "Place Details" Screen (Challenge Solution 6/6)

Adding a "Pick an Image" Input

Installing the "Image Picker" Package

Using the Device Camera For Taking Pictures

Adding the Picked Image to the Model & "Add Place" Form

Previewing the Picked Image

Important: "location" Package & Android

Adding the "location" Package & Starting with the "Get Location" Input Widget

Getting the User's Current Location

Using the Google Maps API - Setup

Using Google's Geocoding API

Storing the Location Data in the Model

Displaying a Location Preview Map Snapshot via Google

Using the Picked Location in the Form

Outputting the Location Data

Installing & Configuring the Google Maps Package

Adding a "Map" Screen

Displaying the Picked Place on a Dynamic Map

Handling Map Taps for Selecting a Location Manually

Using the Map Screen in the "Add Place" Form

Installing Packages for Local (On-Device) Data Storage

Storing the Picked Image Locally

Storing Place Data in a (On-Device) SQL Database

Loading Data from the SQL Database

Using a FutureBuilder for Loading Data

Module Summary

Adding Your Own Native Code

Module Introduction

Starting Setup & Repetition Time!

Adding an Expense Data Model with a Unique ID & Exploring Initializer Lists

Introducing Enums

Creating Dummy Data

Efficiently Rendering Long Lists with ListView

Using Lists Inside Of Lists

Creating a Custom List Item with the Card & Spacer Widgets

Using Icons & Formatting Dates

Setting an AppBar with a Title & Actions

Adding a Modal Sheet & Understanding Context

Handling User (Text) Input with the TextField Widget

Getting User Input on Every Keystroke

Letting Flutter do the Work with TextEditingController

Time to Practice: Adding a New Input

Exercise Solution

Closing The Modal Manually

Showing a Date Picker

Working with "Futures" for Handling Data from the Future

Adding a Dropdown Button

Combining Conditions with AND and OR Operators

Validating User Input & Showing an Error Dialog

Saving New Expenses

Creating a Fullscreen Modal

Using the Dismissible Widget for Dismissing List Items

SnackBar Durations

Showing & Managing "Snackbars"

Flutter & Material 3

Getting Started with Theming

Setting & Using a Color Scheme

Setting Text Themes

Using Theme Data in Widgets

Important: Adding Dark Mode

Adding Dark Mode

Using Another Kind of Loop (for-in)

Adding Alternative Constructor Functions & Filtering Lists

Adding Chart Widgets

Module Summary

Module Introduction

App & Firebase Setup

Adding an Authentication Screen

Adding Buttons & Modes to the Authentication Screen

Validating User Input

Firebase CLI & SDK Setup 1/2

FlutterFire Configuration

Firebase CLI & SDK Setup 2/2

Signing Users Up

Logging Users In

Showing Different Screens Based On The Authentication State

Adding a Splash Screen (Loading Screen)

Adding User Logout

Firebase & Image Storage

Image Upload: Setup & First Steps

Adding a User Image Picker Widget

Using the ImagePicker Package

Managing The Selected Image In The Authentication Form

Uploading Images To Firebase

Showing a Loading Spinner Whilst Uploading

Adding a Remote Database: Firestore Setup

Sending Data to Firestore

Storing a Username

Adding ChatMessages & Input Widgets

A Note About Reading Data From Firestore

Sending & Reading Data To & From Firestore

Loading & Displaying Chat Messages as a Stream

Styling Chat Message Bubbles

Push Notifications - Setup & First Steps

Requesting Permissions & Getting an Address Token

Testing Push Notifications

Working with Notification Topics

Sending Push Notifications Automatically via Cloud Functions

Module Summary

Module Introduction

What is "Responsiveness"?

Locking the Device Orientiation

Updating the UI based on the Available Space

Understanding Size Constraints

Handling to Screen Overlays like the Soft Keyboard

Understanding "Safe Areas"

Using the LayoutBuilder Widget

Building Adaptive Widgets

Module Summary

About the Course Update & How To Proceed

Old Course Content

Module Introduction

Three Trees: Widget Tree, Element Tree & Render Tree

How The UI Is Updated

Refactor & Extract Widgets To Avoid Unnecessary Builds

Understanding Keys - Setup

Which Problem Do Keys Solve?

Understanding & Using Keys

Mutating Values in Memory & Making Sense of var, final & const

Module Summary

Publishing iOS & Android Apps

Course Roundup

Bonus Lecture

Module Introduction

Project Setup

Using a GridView

Widgets vs Screens

Displaying Category Items on a Screen

Making any Widget Tappable with InkWell

Adding Meals Data

Loading Meals Data Into a Screen

Adding Cross-Screen Navigation

Passing Data to the Target Screen

Introducing the Stack Widget

Improving the MealItem Widget

Adding Navigation to the MealDetails Screen

Improving the MealDetails Screen

Adding Tab-based Navigation

Passing Functions Through Multiple Layers of Widgets (for State Management)

Managing App-wide State & Data

Adding a Side Drawer

Closing the Drawer Manually

Adding a Filter Item

Replacing Screens (Instead of Pushing)

Adding More Filter Options

Replacing WillPopScope with PopScope

Returning Data When Leaving a Screen

Reading & Using Returned Data

Applying Filters

An Alternative Navigation Pattern: Using Named Routes

Module Summary

Module Introduction

What's The Problem?

Installing the Solution: Riverpod

How State Management with Riverpod Works

Creating a Provider

Using a Provider

Creating a More Complex Provider with StateNotifier

Using the FavoritesProvider

Triggering a Notifier Method

Getting Started with Another Provider

Combining Local & Provider-managed State

Outsourcing State Into The Provider

Connecting Multiple Providers With Each Other (Dependent Providers)

Swapping The "Favorite Button" Based On Provider State

Module Summary

"riverpod" vs "provider" - There are many Alternatives!