Flutter is Google's UI toolkit for building beautiful, natively compiled applications from a single codebase. It allows creating mobile, web, and desktop apps. The document provides an overview of getting started with Flutter and common widgets like text, buttons, lists, and more. It also describes data management using Moor and shared preferences as well as connecting to REST APIs with packages like Retrofit and Dio.

2. Who am I?
● Former
○ Product manager @ Trilex Network
○ Software Engineer @ Software Industry Promotion Agency
○ Team Leader @ Digital Park Thailand
○ Team Leader @ IoT and Digital Innovation Institute, DEPA
○ Content creator @ Thaiopensource.org
● Present
○ A cat slave
○ A Traveler in Teyvat

6. Flutter is Google’s UI toolkit for building
beautiful, natively compiled applications for
mobile, web, and desktop from a single
codebase.

14. Get Started

21. Let’s use Flutter Doctor
flutter doctor

23. Show more detail
flutter doctor -v

26. Use mobile phone or simulator

29. Check connected devices
flutter devices

31. Create new project
flutter create helloworld

34. Project structure

38. Create with package name
flutter create --org com.awesome helloworld

39. Visual Studio Code
install more plugins

47. 1st
run your app
flutter run -d your-device-id

50. 01_helloworld

52. Workshop 01
Create expense management application and run in your mobile phone or
simulator
flutter create --org com.awesome expense
03_expense

54. Start with main() and runApp

56. Everything in Flutter is widget

59. Clear all MyHomePage widget
and create 2 new widget

60. Use snippet for create stateful widget
just type statefulW

62. First Page

65. Second Page

68. Change MyHomePage to FirstPage

70. Run your app and test navigation

71. 02_page_navigation

72. Let’s see Observatory debugger

75. Workshop 02
● Create folder for pages
● Create dart file call home.dart for home page
03_expense

79. Custom Theme

81. 04_custom_theme

82. Center Widget

84. 05_center_text

85. Button Widget

87. 06_button

88. Column Widget

90. 07_column

91. Padding Widget

93. 08_padding

94. Row Widget

96. 09_row

97. SizedBox Widget

99. 10_sizedbox

100. Expanded Widget

102. 11_expanded

103. ListView Widget

105. 12_listview

106. GridView Widget

108. 13_gridview

109. CardView Widget

111. 14_cardview

112. Stack Widget

114. 15_custom_widget

115. Create your own widget

118. 15_custom_widget

119. FAB Widget

121. 16_fab

122. Workshop 03
● Create all page with custom widget
● see UI and UI flow in XD file
17_expense_full_widget

124. Bottom Navigation Bar

126. 20_form_validation

127. Navigation Drawer

130. Workshop 04
● Add bottom navigation and navigation drawer
● UI and UI flow in XD file
21_expense_navigation

133. Form & Input Validation

137. 20_form_validation

140. Workshop 05
● Create sign in and sign up page with input validation
● UI and UI flow in XD file

144. MOOR ⇔ ROOM

145. Moor
Add dependencies
● path: ^1.7.0
● path_provider: ^1.6.21
● provider: ^4.3.2+2
● sqlite3_flutter_libs: ^0.2.0
● moor_flutter: ^3.1.0
Moor - https://moor.simonbinder.eu/docs/

146. Moor
Add dev dependencies
● build_runner: null
● moor_generator: ^3.3.1

147. Moor
Declare tables and query

150. Moor
Generate code in cli
flutter packages pub run build_runner build
OR watch and build
flutter packages pub run build_runner watch

151. Workshop 6
● Write a Todo app
22_moor_sqlite

152. Shared Preferences

153. Shared Preferences
● Add plugin shared_preferences to your project
● Use shared preference to store key-value data
Shared Preference - https://pub.dev/packages/shared_preferences

154. Workshop 7
● Write profile page
● Save username and avatar path to shared preferences
23_sharedpreferences

157. Connect to REST API

158. REST API
Http request method GET, PUT, POST, DELETE to perform action to your resource.
http://127.0.0.1/api/v1/user

159. REST API
GET PUT POST DELETE
/user Get all user Add new user Add new user Delete all user
/user/1 Get user
Id = 1
Update user
Id = 1
Delete user
id = 1
Request methods

160. REST API
Sample http status code
● 200 Ok
● 201 Created
● 400 Bad request
● 401 Unauthorized
● 403 Forbidden
● 404 Not found
REST API Status code - https://restfulapi.net/http-status-codes

161. Http client plugin
● Http
● Dio
● Retrofit ***
● Chopper
Json2DartClass -> https://javiercbk.github.io/json_to_dart

162. http
● Add http plugin to your pubspec.yaml
● Test your endpoint eg: Swagger, Postman, Insomnia etc
● Write a service call according to your request
● Merge your request to widget in Flutter
Cookbook Networking -> https://flutter.dev/docs/cookbook#networking

163. Retrofit
1. Add dependency
● dio: ^3.0.10
● json_annotation: ^3.1.0
● retrofit: ^1.3.4+1
Retrofit - https://pub.dev/packages/retrofit

164. Retrofit
2. Add dev dependency
● build_runner: ^1.10.3
● retrofit_generator: ^1.4.0

165. Retrofit
3. Create rest client and model class
1. RestClient
2. Model
Use build_runner to generate code
flutter packages pub run build_runner build
Call REST API with RestClient

166. 24_todo_api

167. Workshop 8
● Todo List app connect to your backend
25_retrofit_provider