Flutter Workshop 2021 @ ARU

1. Flutter Workshop 2021
25-26 January 2021
Phranakhon Si Ayutthaya Rajabhat University

2. Link
● Git repository (http://bit.ly/flutter_aru_2021_code)
● Presentation (http://bit.ly/flutter_aru_2021_slide)
● Youtube (http://bit.ly/flutter_aru_2021_video)
● Google Meet (https://meet.google.com/erx-pdof-pgc)

3. Who am I?
● Former senior software engineer - Software Industry Promotion Agency
● Former technical team leader - IoT and Digital Innovation Institue / DEPA
● Former Content writer - thaiopensource.org
● Cloud computing and IoT consultant
● Content creater - Facebook page Dart แบบ Dart Dart

4. Flutter is UX Toolkit to make a
mobile, web, desktop application.
Flutter made by Google inc.

7. Create your first app

9. Main method
Root widget

10. Home widget / Home screen

11. Let’s run your app

13. Create more pages

14. Create a folders for easy organized your files eg:
● pages
● services
● models

16. Create page with a blank container

17. Widget Tree
MaterialApp
Scaffold
AppBar
Text
Body

18. Basic navigation

19. Travel Guide UI Design
* See more detail in XD file

23. Screen Layout & Custom Widget

24. Tips
Draw a box to separate
segment and draw a box
again to identify widget.

25. Row
- Text
- Spacer
- CircularAvatar
- Icon

26. Container
- Row
- Icon
- TextEditField

27. Column
- Image
- Text
- Text

28. ListView (Horizontal)
- Column
- Image
- Text
- Text

29. GirdView
- Column
- Image
- Text
- Text

30. ListView
- Column
- Row
- Icon
- Text
- Stack
- Image
- Pisitioned
- Column
- Text
- Text

31. Let’s Code!!!
(Example 03)

33. Let’s connect to Firebase

34. Firebase
Build Release & Monitor Engage
Link - https://firebase.google.com
● Cloud Firestore
● Machine Learning
● Cloud Functions
● Authentication
● Hosting
● Cloud Storage
● Realtime Database
● Crashlytics
● Performance Monitoring
● Test Lab
● App Distribution
● In-App Messaging
● Google Analytics
● Predictions
● A/B Testing
● Cloud Messaging
● Remote Config
● Dynamic Links

35. Create your project

36. Firebase billing plans

37. FlutterFire
Link - https://firebase.flutter.dev

38. Design your NoSQL Document
1. Cloud Firestore is NoSQL database
2. A Limit in query and not support full-text search
3. A limit in index MUST design your document properly
4. Read, Write, Snapshot is cost so design your document properly

39. Design NoSQL Document #1
●
●
●
●
●
●
Single collection separate trip with user
but hard to query city and country

40. Design NoSQL Document #2
●
●
●
●
●
●
●
●
●
●
●
●
Separate into 2 collection user and trip easy to query user data but still hard to query city and country

41. Design NoSQL Document #3
●
●
●
●
●
●
Separate into 3 collections user, trip, city. It easy to query user data, trip city but should have problem
data intrigity when delete city data (may use Cloud Function to handle this)
●
●
●
●
●
●
●
●

45. Cloud Firestore Query
Link - https://www.youtube.com/watch?v=WacqhiI-g_o&list=PLl-K7zZEsYLlP-k-RKFa7RyNPa9_wCH2s

46. Cloud Firestore Query
Add data to collection with random document id
…

47. Cloud Firestore Query
Add data to collection with specify document id
…

48. Cloud Firestore Query
Update data

49. Cloud Firestore Query
Delete document by specify document id

50. Cloud Firestore Query
Get document directly with document id, eg:
Or

51. Cloud Firestore Query
Get the list of document in collection eg:
You can use where, orderby, limit etc to filter your data.

52. Cloud Firestore Query
Get snapshot

53. Cloud Firestore NO Full Text Search T_T
Firebase is no full text search aka LIKE in SQL command. You MUST use 3rt party
service like Algolia, Elasticsearch or RDB.

54. Let’s Code!!!
(Example 05)

55. Don’t forget
● Register your Firebase account
● Register your project and debug keystore
● Copy google-service.json to android/app directory
● Add mockup data
● Complete trip detail and search page (search page, use list.contain for
search)

57. Firebase Authentication

58. Sign In Method

59. UI Cheat Sheet

60. App with transparent status bar

61. Remove debug banner

62. Google Font

63. Custom AppBar

64. Rounded rectangle Container

65. Image with Clip in Rounded rectangle

66. Image with Clip in CardView

67. ListView Item (1/2)

68. ListView Item (2/2)

69. Horizontal ListView

70. GridView with child aspect ratio

71. Stack

72. Search Bar (Container + Text Field)

73. Color Gradient

74. Cached Network Image

75. Form

76. Dropdown List