GRECODE LABS

FLUTTER & DART: THE COMPLETE GUIDE

INSTRUCTOR: MICHAEL WANJE

MOBILE: +254 769 819 264

EMAIL: [email protected]

TIME: TBA

VENUE: ONLINE (Pre-Recorded Sessions & Live)

SECTION 1: INTRODUCTION 1. Welcome to this program!

2. What is Flutter?

3. Flutter uses Dart!

4. One Codebase, Multiple Platforms

5. Flutter Setup-Overview

6. Windows Setup

7. Project Creation & Setting up a Code

Editor for Flutter development

8. Running your First Flutter app

9. Understanding Material Design

10. About this Program

SECTION 2: Flutter & Dart Basics I- Getting a 11. Module Introduction

Solid Foundation [Roller Dice App] 12. Analyzing a New Flutter Project

13. From Dart to Machine Code

14. How programming Languages Work

15. Starting from Scratch: Understanding

Functions

16. Importing Features from Packages

17. How Flutter apps Start

18. Quiz 1: Knowledge Check: Flutter & Dart

Basics

19. Understanding Widgets

20. Using a First Widget & Passing Values to

Functions

21. Positional and Named Arguments

22. Deep Dive: Positional and Named

Arguments

23. Combining Multiple Widgets

24. Understanding ‘const’ Values

25. Building more complex Widget trees

26. Understanding Value Types

27. Configuring Widgets & Understanding

Objects

28. Working with ‘Configuration Objects’

(Non-widget Objects)

29. Generics, Lists & Adding Gradient Colors

30. How to Configure Widgets & Objects

31. Practice: Styling text

32. Onwards to Custom Widgets: Why do you

need them?

33. Understanding classes

34. Building Custom Widgets

35. Working with Constructor Functions

36. Splitting Code Across Files

37. Practice: Create a Custom Widget

38. Introducing Variables

39. Variables & Types- Combining Two Key

Concepts

40. ‘final’ & ‘const’- Special kinds of

‘Variables’
 41. Instance Variables (Properties) &

Configurable Widgets

42. Practice: Reusable Widgets & Constructor

Functions

43. Displaying Images & Using Multiple

Constructor Functions

44. Adding Buttons & Using Functions as

Values

45. Styling Buttons & Working with Padding

46. How NOT To Build Interactive Widgets

47. Introducing Stateful Widgets

48. Generating Random Numbers

49. Module Summary

SECTION 3: Flutter & Dart Basics II- 50. Module Introduction

Fundamentals Deep Dive [QUIZ APP] 51. A Challenge For You!

52. Challenge Solution 1/2 - Creating a

Widget

53. Challenge Solution 2/2 - Working with

More Widgets

54. Adding Icons to Buttons

55. Adding Transparency to Widgets

56. Repetition & Exercise: Adding a Stateful

Widget

57. Rendering Content Conditionally

58. Accepting & Passing Functions as Values

59. The "initState" Method

60. Deep Dive: Flutter's (Stateful) Widget

Lifecycle

61. Using Ternary Expressions & Comparison

Operators

62. Understanding "if" Statements

63. Using "if" Statements In Lists

64. if Statements & Comparison Operators

65. Adding a Data Model & Dummy Data

66. Configuring a Column

67. Creating a Reusable, Custom Styled

Button

68. Accessing List Elements & Object

Properties

69. Mapping Lists & Using the Spread

Operator

70. Alignment, Margin & Padding

71. Mutating Values in Memory

72. Managing The Questions Index As State

73. More on Button Styling

74. Using Third-Party Packages & Adding

Google Fonts

75. Passing Data via Functions Across

Widgets

76. More Conditions

 77. Getting Started with the Results Screen

78. Passing Data to the Results Screen

79. Introducing Maps & "for" Loops

80. Using "for" Loops In Lists

81. Note: A Typo In The Next Lecture

82. Accessing Map Values & Using "Type

Casting"

83. Combining Columns & Rows

84. Expanded To The Rescue!

85. Filtering & Analyzing Lists

86. Making Content Scrollable with

SingleChildScrollView

87. Assignment 1: Time to Practice: Flutter

Basics

88. Beyond the Basics: Optional, Important

Dart Features

89. Module Summary

Section 4: Debugging Flutter Apps 90. Module Introduction

91. The Starting Project & A Problem

92. Understanding Error Messages

93. Debugging Apps & Using "Debug Mode"

94. Working with the Flutter DevTools

Section 5: Adding Interactivity, More Widgets & 95. Module Introduction

Theming [EXPRNSE TRACKER APP] 96. Starting Setup & Repetition Time!
97. Adding an Expense Data Model with a

Unique ID & Exploring Initializer Lists

98. Introducing Enums

99. Creating Dummy Data

100. Efficiently Rendering Long Lists

with ListView

101. Using Lists Inside Of Lists

102. Creating a Custom List Item with

the Card & Spacer Widgets

103. Using Icons & Formatting Dates

104. Setting an AppBar with a Title &

Actions

105. Adding a Modal Sheet &

Understanding Context

106. Handling User (Text) Input with

the TextField Widget

107. Getting User Input on Every

Keystroke

108. Letting Flutter do the Work with

TextEditingController

109. Time to Practice: Adding a New

Input

110. Exercise Solution

111. Closing The Modal Manually

112. Showing a Date Picker

113. Working with "Futures" for

Handling Data from the Future

114. Adding a Dropdown Button

115. Combining Conditions with AND

and OR Operators

116. Validating User Input & Showing

an Error Dialog

117. Saving New Expenses

118. Creating a Fullscreen Modal

119. Using the Dismissible Widget for

Dismissing List Items

120. Showing & Managing

"Snackbars"

121. Flutter & Material 3

122. Getting Started with Theming

123. Setting & Using a Color Scheme

124. Setting Text Themes

125. Using Theme Data in Widgets

126. Important: Adding Dark Mode

127. Adding Dark Mode

128. Using Another Kind of Loop (for-

in)

129. Adding Alternative Constructor

Functions & Filtering Lists

130. Adding Chart Widgets

 131. Module Summary

SECTION 6: Building responsive & Adaptive 132. Module Introduction

User Interfaces [EXPENSE TRACKER APP] 133. What is "Responsiveness"?

134. Locking the Device Orientiation

135. Updating the UI based on the

Available Space

136. Understanding Size Constraints

137. Handling to Screen Overlays like

the Soft Keyboard

138. Understanding "Safe Areas"

139. Using the LayoutBuilder Widget

140. Building Adaptive Widgets

141. Module Summary

SECTION 7: Flutter & Dart Internals [TODO 142. Module Introduction

APP] 143. Three Trees: Widget Tree,

Element Tree & Render Tree

144. How The UI Is Updated

145. Refactor & Extract Widgets To

Avoid Unnecessary Builds

146. Understanding Keys - Setup

147. Which Problem Do Keys Solve?

148. Understanding & Using Keys

149. Mutating Values in Memory &

Making Sense of var, final & const

150. Module Summary

SECTION 8: Building Multi Screen Apps & 151. Module Introduction

Navigating Between Screens [MEALS APP] 152. Project Setup

153. Using a GridView

154. Widgets vs Screens

155. Displaying Category Items on a

Screen

156. Making any Widget Tappable

with InkWell

157. Adding Meals Data

158. Loading Meals Data Into a Screen

159. Adding Cross-Screen Navigation

160. Passing Data to the Target Screen

161. Introducing the Stack Widget

162. Improving the MealItem Widget

163. Adding Navigation to the

MealDetails Screen

164. Improving the MealDetails

Screen

165. Adding Tab-based Navigation

166. Passing Functions Through

Multiple Layers of Widgets (for State

Management)

167. Managing App-wide State & Data

168. Adding a Side Drawer

169. Closing the Drawer Manually

 170. Adding a Filter Item

171. Replacing Screens (Instead of

Pushing)

172. Adding More Filter Options

173. Replacing WillPopScope with

PopScope

174. Returning Data When Leaving a

Screen

175. Reading & Using Returned Data

176. Applying Filters

177. An Alternative Navigation

Pattern: Using Named Routes

178. Module Summary

SECTION 9: Managing App-wide State 179. Module Introduction

[MEALS APP] 180. What's The Problem?

181. Installing the Solution: Riverpod

182. How State Management with

Riverpod Works

183. Creating a Provider

184. Using a Provider

185. Creating a More Complex

Provider with StateNotifier

186. Using the FavoritesProvider

187. Triggering a Notifier Method

 188. Getting Started with Another

Provider

189. Combining Local & Provider-

managed State

190. Outsourcing State Into The

Provider

191. Connecting Multiple Providers

With Each Other (Dependent Providers)

192. Swapping The "Favorite Button"

Based On Provider State

193. Module Summary

194. "riverpod" vs "provider" - There

are many Alternatives!

SECTION 10: Adding Animations [MEALS 195. Module Introduction

APP] 196. Setup & Understanding Explicit

vs Implicit Animations

197. Explicit Animations: Adding an

Animation Controller

198. Explicit Animations: Playing the

Animation with AnimatedBuilder

199. Finetuning Explicit Animations

200. Getting Started with Implicit

Animations

201. Configuring Implicit Animations

202. Adding Multi-Screen Transitions

 203. Module Summary

SECTION 11: Handling User Input & Working 204. Module Introduction

With Forms [SHOPPING LIST APP] 205. Setup & A Challenge For You

206. Challenge Solution 1 - Building

& Using Models

207. Challenge Solution 2 - Building

the List UI

208. Adding a "New Item" Screen

209. The Form & TextFormField

Widgets

210. A Form-aware Dropdown Button

211. Adding Buttons to a Form

212. Adding Validation Logic

213. Getting Form Access via a Global

Key

214. Extracting Entered Values

215. Passing Data Between Screens

216. Final Challenge Solution

217. Module Summary

SECTION 12: Connecting a Backend & 218. Module Introduction

Sending HTTP requests [SHOPPING LIST 219. What's a Backend? And Why

APP] Would You Want One?

220. What Is HTTP & How Does It

Work?
 221. Setting Up a Dummy Backend

(Firebase)

222. Adding the http Package

223. Sending a POST Request to the

Backend

224. Working with the Request &

Waiting for the Response

225. Fetching & Transforming Data

226. Avoiding Unnecessary Requests

227. Managing the Loading State

228. Error Response Handling

229. Sending DELETE Requests

230. Handling the "No Data" Case

231. Better Error Handling

232. Using the FutureBuilder Widget

233. Module Summary

SECTION 13: Using Native Device Features 234. Module Introduction

(e.g., Camera) [FAVORITE PLACES APP] 235. Setup & A Challenge For You!

236. Adding a Place Model (Challenge

Solution 1/6)

237. Adding a "Places" Screen

(Challenge Solution 2/6)

238. Adding an "Add Place" Screen

(Challenge Solution 3/6)

239. Adding "riverpod" & A Provider

(Challenge Solution 4/6)

240. Adding Places with Provider &

Displaying Places (Challenge Solution

5/6)

241. Adding a "Place Details" Screen

(Challenge Solution 6/6)

242. Adding a "Pick an Image" Input

243. Installing the "Image Picker"

Package

244. Using the Device Camera For

Taking Pictures

245. Adding the Picked Image to the

Model & "Add Place" Form

246. Previewing the Picked Image

247. Important: "location" Package &

Android

248. Adding the "location" Package &

Starting with the "Get Location" Input

Widget

249. Getting the User's Current

Location

250. Using the Google Maps API -

Setup

251. Using Google's Geocoding API

252. Storing the Location Data in the

Model

253. Displaying a Location Preview

Map Snapshot via Google

254. Using the Picked Location in the

Form

255. Outputting the Location Data

256. Installing & Configuring the

Google Maps Package

257. Adding a "Map" Screen

258. Displaying the Picked Place on a

Dynamic Map

259. Handling Map Taps for Selecting

a Location Manually

260. Using the Map Screen in the

"Add Place" Form

261. Installing Packages for Local

(On-Device) Data Storage

262. Storing the Picked Image Locally

263. Storing Place Data in a (On-

Device) SQL Database

264. Loading Data from the SQL

Database

265. Using a FutureBuilder for

Loading Data
 266. Module Summary

267. Adding Your Own Native Code

SECTION 14: Push Notifications & More: 268. Module Introduction

Building a Chat App with Flutter & Firebase 269. App & Firebase Setup

270. Adding an Authentication Screen

271. Adding Buttons & Modes to the

Authentication Screen

272. Validating User Input

273. Firebase CLI & SDK Setup 1/2

274. FlutterFire Configuration

275. Firebase CLI & SDK Setup 2/2

276. Signing Users Up

277. Logging Users In

278. Showing Different Screens Based

On The Authentication State

279. Adding a Splash Screen (Loading

Screen)

280. Adding User Logout

281. Image Upload: Setup & First

Steps

282. Adding a User Image Picker

Widget

283. Using the ImagePicker Package

284. Managing The Selected Image In

The Authentication Form

285. Uploading Images To Firebase

286. Showing a Loading Spinner

Whilst Uploading

287. Adding a Remote Database:

Firestore Setup

288. Sending Data to Firestore

289. Storing a Username

290. Adding ChatMessages & Input

Widgets

291. A Note About Reading Data From

Firestore

292. Sending & Reading Data To &

From Firestore

293. Loading & Displaying Chat

Messages as a Stream

294. Styling Chat Message Bubbles

295. Push Notifications - Setup & First

Steps

296. Requesting Permissions &

Getting an Address Token

297. Testing Push Notifications

298. Working with Notification Topics

299. Sending Push Notifications

Automatically via Cloud Functions

300. Module Summary

SECTION 15: Next Steps & Roundup 301. Publishing iOS & Android Apps

302. Course Roundup