This course is your gateway to mastering Flutter and Dart, empowering you to create high-performance, cross-platform apps for iOS and Android. You’ll begin with environment setup for macOS and Windows, an introduction to Flutter and Dart, and a deep dive into widgets, from built-in to custom ones. The course covers key fundamentals such as analyzing Flutter projects, using packages, passing values to functions, and working with constructor functions. As you progress, you’ll explore debugging techniques, navigation patterns, state management, form validation, and backend integration with HTTP requests and authentication. Advanced topics include Google Maps, device features like the camera, push notifications, animations, and image uploads.
By building multiple demo apps, you’ll gain the hands-on skills needed to confidently develop and publish your own mobile applications with Flutter.
Who should take this Course?
The Flutter & Dart Development Online Course is ideal for mobile app developers, software engineers, and programmers who want to build cross-platform applications with a single codebase. It is also suitable for beginners in app development, students, and tech enthusiasts seeking hands-on experience in creating high-performance, visually appealing mobile applications using Flutter and Dart.
What you will learn
Understand Flutter, Dart, and the concept behind widgets
Connect your Flutter app to backend servers by sending HTTP requests
Learn to use native device features like the camera
Learn to add beautiful animations and page transitions
Learn to upload images and send manual/automated push notifications
Learn how to add Google Maps to the app
Course Outline
Introduction
Introduction
Welcome to This Course!
What Is Flutter?
Flutter Uses Dart!
One Codebase, Multiple Platforms
Flutter Setup - Overview
Windows Setup
macOS Setup
Project Creation and Setting Up a Code Editor for Flutter Development
Running a First Flutter App
Understanding Material Design
About This Course
Flutter and Dart Basics I - Getting a Solid Foundation (Roll Dice App)
Module Introduction
Analyzing a New Flutter Project
Form Dart to Machine Code
How Programming Languages Work
Starting from Scratch: Understanding Functions
Importing Features from Packages
How Flutter Apps Start
Understanding Widgets
Using a First Widget and Passing Values to Functions
Positional and Named Arguments
Combining Multiple Widgets
Understanding "const" Values
Building More Complex Widget Trees
Understanding Value Types
Configuring Widgets and Understanding Objects
Working with "Configuration Objects" (Non-Widget Objects)
Generics, Lists, and Adding Gradient Colors
How to Configure Widgets and Objects
Practice: Styling Text
Onward 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 and Types - Combining Two Key Concepts
"final" and "const" - Special Kinds of "Variables"
Instance Variables (Properties) and Configurable Widgets
Practice: Reusable Widgets and Constructor Functions
Displaying Images and Using Multiple Constructor Functions
Adding Buttons and Using Functions As Values
Styling Buttons and Working with Padding
How NOT to Build Interactive Widgets
Introducing Stateful Widgets
Generating Random Numbers
Module Summary
Flutter and Dart Basics II - Fundamentals Deep Dive (Quiz App)
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 and Exercise: Adding a Stateful Widget
Rendering Content Conditionally
Accepting and Passing Functions as Values
The "initState" Method
Using Ternary Expressions and Comparison Operators
if Statements and Comparison Operators
Adding a Data Model and Dummy Data
Configuring a Column
Creating a Reusable, Custom Styled Button
Accessing List Elements and Object Properties
Mapping Lists and Using the Spread Operator
Alignment, Margin, and Padding
Mutating Values in Memory
Managing the Questions Index as State
More on Button Styling
Using Third-Party Packages and Adding Google Fonts
Passing Data Through Functions Across Widgets
More Conditions
Getting Started with the Results Screen
Passing Data to the Results Screen
Introducing Maps and "for" Loops
Accessing Map Values and Using "Type Casting"
Combining Columns and Rows
Expanded to the Rescue!
Filtering and Analyzing Lists
Making Content Scrollable with SingleChildScrollView
Flutter and Dart Basics - Coding Challenge
Flutter and Dart Basics - Solution
Beyond the Basics: Optional, Important Dart Features
Module Summary
Debugging Flutter Apps
Module Introduction
The Starting Project and a Problem
Understanding Error Messages
Debugging Apps and Using "Debug Mode"
Working with the Flutter DevTools
Adding Interactivity, More Widgets, and Theming (Expense Tracker App)
Module Introduction
Starting Setup and Repetition Time!
Adding an Expense Data Model with a Unique ID and 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 and Spacer Widgets
Using Icons and Formatting Dates
Setting an AppBar with a Title and Actions
Adding a Modal Sheet and 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 and Showing an Error Dialog
Saving New Expenses
Creating a Fullscreen Modal
Using the Dismissible Widget for Dismissing List Items
Showing and Managing "Snackbars"
Getting Started with Theming
Setting and Using a Color Scheme
Setting Text Themes
Using Theme Data in Widgets
Adding Dark Mode
Using Another Kind of Loop (for-in)
Adding Alternative Constructor Functions and Filtering Lists
Adding Chart Widgets
Module Summary
Building Responsive and Adaptive User Interfaces (Expense Tracker App)
Module Introduction
What Is "Responsiveness"?
Locking the Device Orientation
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
Flutter and Dart Internals (Todo App)
Module Introduction
Three Trees: Widget Tree, Element Tree, and Render Tree
How the UI Is Updated
Refactor and Extract Widgets to Avoid Unnecessary Builds
Understanding Keys - Setup
Which Problem Do Keys Solve?
Understanding and Using Keys
Mutating Values in Memory and Making Sense of var, final, and const
Module Summary
Building Multi-Screen Apps and Navigating Between Screens (Meals App)
Module Introduction
Project Setup
Using a GridView
Widgets Versus 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 and Data
Adding a Side Drawer
Closing the Drawer Manually
Adding a Filter Item
Replacing Screens (Instead of Pushing)
Adding More Filter Options
Returning Data When Leaving a Screen
Reading and Using Returned Data
Applying Filters
Module Summary
Managing App-Wide State (Meals App)
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 and 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
Adding Animations (Meals App)
Module Introduction
Setup and Understanding Explicit Versus 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
Handling User Input and Working with Forms (Shopping List App)
Module Introduction
Setup and a Challenge for You
Challenge Solution 1 - Building and Using Models
Challenge Solution 2 - Building the List UI
Adding a "New Item" Screen
The Form and TextFormField Widgets
A Form-Aware Dropdown Button
Adding Buttons to a Form
Adding Validation Logic
Getting Form Access Through a Global Key
Extracting Entered Values
Passing Data Between Screens
Final Challenge Solution
Module Summary
Connecting a Backend and Sending HTTP Requests (Shopping List App)
Module Introduction
What's a Backend? And Why Would You Want One?
What Is HTTP and 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 and Waiting for the Response
Fetching and Transforming Data
Avoiding Unnecessary Requests
Managing the Loading State
Error Response Handling
Sending DELETE Requests
Handling the "No Data" Case
Better Error Handling
Module Summary
Using the FutureBuilder Widget
Using Native Device Features (For Example, Camera) (Favorite Places App)
Module Introduction
Setup and 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" and a Provider (Challenge Solution 4/6)
Adding Places with Provider and 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 and "Add Place" Form
Previewing the Picked Image
Adding the "location" Package and 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 Through Google
Using the Picked Location in the Form
Outputting the Location Data
Installing and 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
Push Notifications and More: Building a Chat App with Flutter and Firebase
Module Introduction
App and Firebase Setup
Adding an Authentication Screen
Adding Buttons and Modes to the Authentication Screen
Validating User Input
Firebase CLI and SDK Setup 1/2
Firebase CLI and 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
Image Upload: Setup and 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 and Input Widgets
Sending and Reading Data to and from Firestore
Loading and Displaying Chat Messages as a Stream
Styling Chat Message Bubbles
Push Notifications - Setup and First Steps
Requesting Permissions and Getting an Address Token
Testing Push Notifications
Working with Notification Topics
Sending Push Notifications Automatically Through Cloud Functions
