Learn Flutter and Dart to Build iOS and Android Apps [2021 Updated]

Table of Contents

Chapter 1 : Introduction

Introduction

What is Flutter?

Understanding the Flutter Architecture

How Flutter and Dart Codes Get Compiled to Native Apps

Understanding Flutter Versions

Flutter macOS Setup

macOS Development Environment

Flutter Windows Setup

Windows Development Environment

Flutter and Material Design

Flutter Alternatives

Course Outline

How to Get the Most Out of the Course?

Chapter 2 : Flutter Basics

Module Introduction

Creating a New Project

Important - Adjusting the Starting Project

An Overview of the Generated Files and Folders

Analyzing the Default App

Dart Basics

More Dart Basics

Building an App from Scratch

Running the App on an Emulator

Class Constructors and Named Arguments

First Summary and Additional Syntax

Building a Widget Tree

Visible (Input/Output) and Invisible (Layout/Control) Widgets

Adding Layout Widgets

Connecting Functions and Buttons

Anonymous Functions

Updating Widget Data (Or Using StatelessWidget Incorrectly)

Updating Correctly with StatefulWidget

A Brief Look at What Flutter Actually Does

Using Private Properties

Creating a New Custom Widget

First Styling and Layout Steps

Enums and Multiple Constructors

Official Docs and the Widget Catalogue

Passing the Callback Functions Around

Introducing Maps

Mapping Lists to Widgets

Final Versus Const

Introducing “if” Statements

[DART DEEP DIVE] More on “if” Statements

[DART DEEP DIVE] The “null” Value and Null Safety

Outputting Widgets Conditionally

Splitting the App into Widgets

Calculating the Total Score

Getters and “else-if”

Resetting the Quiz

“New” Flutter Buttons Versus “Old” Buttons

Assignment - Basics (Problem)

Assignment - Basics (Solution)

Wrap Up

Chapter 3 : Running Apps on Different Devices and Debugging Apps

Module Introduction

Running the App on an Android Device

Running the App on an iOS Emulator

Running the App on an iOS Device

Working with Emulators

Understanding Error Messages and Fixing Errors

Using the Debugger

Getting Started with the Dart DevTools

Understanding the Repaint Rainbow

Wrapping Up the Dart DevTools

Chapter 4 : Widgets, Styling, and Adding Logic - Building a Real App [Personal Expenses App]

Module Introduction

An Overview of the Core Flutter Widgets

Planning the App

Combining Widgets

Important - Adjusting the Starting Project

Understanding Column Alignment

Not a Widget: Adding a Transaction Model and Transaction Data

Mapping Data into Widgets

Building a Custom List Item

Styling a Container

Styling Text

More Styling!

Containers Versus Columns Versus Rows

Using String Interpolation

Installing External Packages and Formatting Dates

Adding Text Input Widgets (TextField)

Fetching User Input

Splitting the App into Widgets

Connecting Widgets and Managing Data/State

Adding User Transactions to the List

Making the List Scrollable!

Working with ListViews

Further Input and Output Styling and Configuration

Adding AppBar Buttons and Floating Action Buttons

Showing a Modal Bottom Sheet

Improving and Styling the Modal Bottom Sheet

Configuring and Using Themes

Custom Fonts and Working with Text Themes

Adding Images to the App

Planning the Chart Widget

Looping Through Lists

Deriving Recent Transactions

Creating Bars for a Chart

Populating a Chart with Values

Finishing the Chart Bars

Flexible and Expanded: Deep Dive

Adding a ListTile Widget

Improving the Overall Chart

Widgets and Configuring Widgets - Summary/Overview

Getting Started with Date Selection

Showing a DatePicker

Adding Transactions with a Date

Deleting Transactions and Using IconButtons

Final Polishing!

Wrap Up

Chapter 5 : Responsive and Adaptive User Interfaces and Apps

Module Introduction

What does “Responsive” and “Adaptive” Mean?

Examples: Where We Could Improve the App!

Calculating Sizes Dynamically

Using the LayoutBuilder Widget

Controlling Device Orientation

Rendering Alternative Landscape Content – 1

Finishing Landscape Mode

Showing Different Content Based on Device Orientation

Respecting the Softkeyboard Insets

Using the Device Size in Different Conditions

Managing the MediaQuery Object

Checking the Device Platform

Using Cupertino (iOS) Widgets

Using the SafeArea Class

More Cupertino Styles

Using Cupertino Buttons

Creating Custom Adaptive Widgets

Wrap Up

Chapter 6 : Widget and Flutter Internals - Deep Dive

Module Introduction

The Problem at Hand

Widget Tree and Element Tree - What, Why, and How?

How Flutter Rebuilds and Repaints the Screen

How Flutter Executes build ()

Using “const” Widgets and Constructors

Writing a Good Code

Extracting Widgets

Using Builder Methods

Assignment - Builder Methods (Problem)

Assignment - Builder Methods (Solution)

Understanding the Widget Lifecycle

Understanding the App Lifecycle

Understanding Context

A Problem with Lists and Stateful Widgets

Understanding the Problem

Using Keys

Wrap Up

Chapter 7 : Navigation and Multiple Screens [Meals App]

Module Introduction

Planning the App

Starting with the App - Adding Base Data

Important - Adjusting the Starting Project

Creating a Grid and Working with Linear Gradients

Registering a Screen as the Main Screen

Styling and Themes

Navigating to a New Page

Passing Data Through the Constructor

Using Named Routes and Passing Data with Named Routes

Diving Deeper into Named Routes

Adding a Meal Model and Data

Selecting Meals for a Chosen Category

Displaying Recipe Items and Using Network Images

Finishing the Meal List Item

Navigating to the Meal Detail Page

onGenerateRoute and onUnknownRoute

Finishing the Meal Detail Page

Adding a TabBar to the Appbar

Adding a Bottom TabBar

Adding a Custom Drawer

Adding Links to the Drawer

Replacing Pages (Instead of Pushing)

Popping Pages and Passing Data Back

Adding Filter Switches

Adding Filtering Logic

Adding the “Mark as Favorite” Feature

A Problem!

Wrap Up

Chapter 8 : State Management [Shop App]

Module Introduction

Planning the App

Defining a Data Model

Important - Adjusting the Starting Project

Working on the “Products” Grid and Item Widgets

Styling the App and Adding a Theme to the App

Adding Navigation to the App

Why State Management? And What is “State” and “State Management”?

Understanding the “Provider” Package and Approach

Working with Providers and Listeners

[DART DEEP DIVE] Inheritance (“extends”) Versus Mixins (“with”)

Listening in Different Places and Ways

Using Nested Models and Providers

Exploring Alternative Provider Syntaxes

Using “Consumer” instead of “Provider.of”

Local State Versus App-Wide State

Adding Shopping Cart Data

Working with Multiple Providers

Connecting the Cart Provider

Working on the Shopping Cart and Displaying the total

Displaying a List of Cart Items

Making Cart Items Dismissible

Adding Product Detail Data

Providing an Orders Object

Adding Orders

Adding an Orders Screen

Using a Side Drawer

Making Orders Expandable and Stateful Widgets Versus Providers

Wrap Up

Chapter 9 : Working with User Input and Forms [Shop App]

Module Introduction

Snackbars and Undoing “Add to Cart” Actions

Showing Alert Dialogs

Adding a “Manage Products” Page

“Edit Product” Screen and a Problem

Using Forms and Working with Form Inputs

Managing Form Input Focus

Multiline Inputs and Disposing Objects

Image Input and Image Preview

Submitting Forms

Validating User Input

Adding Validation to All Inputs

Saving New Products

Time to Update Products!

Allowing Users to Delete Products

Wrap Up

Chapter 10 : Sending HTTP Requests [Shop App]

Module Introduction

On-Device Versus Web Storage

How to Connect Flutter to a Database

Preparing the Backend

How to Send HTTP Requests

Sending POST Requests

Working with Futures in Dart

[Dart Deep Dive] Futures and Async Code

Showing a Loading Indicator

Handling Errors Gracefully

Working with “async” and “await”

Fetching Data, initState and “of(context)”

How to Transform Fetched Data

Implementing Pull-to-Refresh

Updating Data using PATCH Requests

Utilizing Optimistic Updating

Creating Custom Exceptions and More Error Handling

A Challenge for You!

Updating the “Favorite” Status Optimistically

Storing Orders in the Web

Fetching Orders and Fixing an Issue

Using the “FutureBuilder” Widget and Improving the Code

Wrap Up

Chapter 11 : Adding User Authentication [Shop App]

Module Introduction

How Authentication Works

Preparing the Backend

Adding the Auth Screen

Adding User Signup

Allowing Users to Log In

Handling Authentication Errors

Managing the Auth Token Locally (in the App)

Using the “ProxyProvider” and Attaching the Token to Outgoing HTTP Requests

Adding Token to All Requests

Connecting the “Favorite” Status to Users

Attaching Products to Users and Filtering by Creator

Attaching Orders to Users

Adding a Logout Functionality

Automatically Logging Users Out (After Some Time)

Automatically Logging Users In

Wrap Up

Chapter 12 : Adding Animations [Shop App]

Module Introduction

Animations from Scratch (Completely Manually Controlled)

Using the “AnimatedBuilder” Widget

Working with the “AnimatedContainer”

More Built-in Animation and Transition Widgets

Fading Loaded Images In (and Showing a Placeholder)

Adding a “Hero” Transition

Working with Slivers

Practice: Animating Order Boxes

Implementing Custom Route Transitions

Wrap Up

Chapter 13 : Using Native Device Features (such as Camera, Maps, and Location) [Great Places App]

Module Introduction

Planning the App

PlaceList and Place Provider Setup

Important - Adjusting the Starting Project

Adding the “Add Place” Screen and an Image Input

Using Image Picker and the Device Camera

Storing the Image on the Filesystem (on the Device)

Managing Data and Images Through the Provider Package

Handling Errors

Testing on Real Devices

Preparing SQLite

Storing and Fetching Data with SQLite

Adding a Location Input and the “location” Package

Fetching User Coordinates

Displaying a Static Map Snapshot

Rendering a Dynamic Map (Using Google Maps)

Allowing Users to Pick a Location on the Map

Storing the Location in SQLite

Adding a “Place Detail” Screen and Opening the Map in “read only” Mode

Wrap Up

Chapter 14 : Firebase, Image Upload, Push Notification - Building a Chat App

Module Introduction

What is Firebase?

Creating a New App

Getting Started with Firebase

Getting Started with Flutter and the Firebase SDK

Rendering Stream Data with StreamBuilder

Adding Data

A Basic Authentication Screen

Adding an App Theme

Creating an Authentication Form

Connecting the Auth Form and Auth Screen

Implementing Authentication

Storing Extra User Data

Completing Authentication and Logout

Adding Firebase Security Rules

Listening to Chat Messages

Sending and Ordering Chat Messages

Creating a Basic Chat Bubble Widget

Improving the Chat Bubbles

Testing on Multiple Devices

Displaying Usernames

Adding an Image Picker

Preparing File Upload and Validating Images

Uploading Images

Improving Image Upload

Running on an iOS Device

Displaying User Images

How Push Notifications Work

An Introduction to Firebase Cloud Messaging

Android and Push Notifications

iOS and Push Notifications

Handling Push Notifications

Getting Started with Firebase Cloud Functions

Setting a Firestore Trigger

Sending Automated Push Notifications

Polishing and Wrap Up

Chapter 15 : Running Native Swift, Objective C, Java, or Kotlin Code

Module Introduction

Sending a Method Call from Flutter

Running Android Code

Running iOS Code

Wrap Up

Chapter 16 : Publishing to the App Stores

Module Introduction

Preparing the Code

Preparing the App Configuration

Preparing Third-Party Services

Adding Icons and Splash Screens

Publishing Android Apps

Publishing iOS Apps

Chapter 17 : Roundup and Next Steps

You did it!

Your Next Steps (To Become an Awesome Developer!)

How to Plan and Develop Apps Successfully

Chapter 18 : Flutter 2 Update

Flutter 2 – What’s New? What is the Impact on this Course?

“Old” Versus “New” Button Widgets