Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flutter workshop @ bang saen 2020

141 views

Published on

Flutter workshop @ bang saen 2020 on 26-28 Oct 2020 at The 90's Workplace see more example in github repository https://github.com/anoochit/flutter_bangsaen_2020

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Flutter workshop @ bang saen 2020

  1. 1. 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
  2. 2. Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
  3. 3. Get Started
  4. 4. Let’s use Flutter Doctor flutter doctor
  5. 5. Show more detail flutter doctor -v
  6. 6. Use mobile phone or simulator
  7. 7. Check connected devices flutter devices
  8. 8. Create new project flutter create helloworld
  9. 9. Project structure
  10. 10. Create with package name flutter create --org com.awesome helloworld
  11. 11. Visual Studio Code install more plugins
  12. 12. 1st run your app flutter run -d your-device-id
  13. 13. 01_helloworld
  14. 14. Workshop 01 Create expense management application and run in your mobile phone or simulator flutter create --org com.awesome expense 03_expense
  15. 15. Start with main() and runApp
  16. 16. Everything in Flutter is widget
  17. 17. Clear all MyHomePage widget and create 2 new widget
  18. 18. Use snippet for create stateful widget just type statefulW
  19. 19. First Page
  20. 20. Second Page
  21. 21. Change MyHomePage to FirstPage
  22. 22. Run your app and test navigation
  23. 23. 02_page_navigation
  24. 24. Let’s see Observatory debugger
  25. 25. Workshop 02 ● Create folder for pages ● Create dart file call home.dart for home page 03_expense
  26. 26. Custom Theme
  27. 27. 04_custom_theme
  28. 28. Center Widget
  29. 29. 05_center_text
  30. 30. Button Widget
  31. 31. 06_button
  32. 32. Column Widget
  33. 33. 07_column
  34. 34. Padding Widget
  35. 35. 08_padding
  36. 36. Row Widget
  37. 37. 09_row
  38. 38. SizedBox Widget
  39. 39. 10_sizedbox
  40. 40. Expanded Widget
  41. 41. 11_expanded
  42. 42. ListView Widget
  43. 43. 12_listview
  44. 44. GridView Widget
  45. 45. 13_gridview
  46. 46. CardView Widget
  47. 47. 14_cardview
  48. 48. Stack Widget
  49. 49. 15_custom_widget
  50. 50. Create your own widget
  51. 51. 15_custom_widget
  52. 52. FAB Widget
  53. 53. 16_fab
  54. 54. Workshop 03 ● Create all page with custom widget ● see UI and UI flow in XD file 17_expense_full_widget
  55. 55. Bottom Navigation Bar
  56. 56. 20_form_validation
  57. 57. Navigation Drawer
  58. 58. Workshop 04 ● Add bottom navigation and navigation drawer ● UI and UI flow in XD file 21_expense_navigation
  59. 59. Form & Input Validation
  60. 60. 20_form_validation
  61. 61. Workshop 05 ● Create sign in and sign up page with input validation ● UI and UI flow in XD file
  62. 62. MOOR ⇔ ROOM
  63. 63. 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/
  64. 64. Moor Add dev dependencies ● build_runner: null ● moor_generator: ^3.3.1
  65. 65. Moor Declare tables and query
  66. 66. Moor Generate code in cli flutter packages pub run build_runner build OR watch and build flutter packages pub run build_runner watch
  67. 67. Workshop 6 ● Write a Todo app 22_moor_sqlite
  68. 68. Shared Preferences
  69. 69. 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
  70. 70. Workshop 7 ● Write profile page ● Save username and avatar path to shared preferences 23_sharedpreferences
  71. 71. Connect to REST API
  72. 72. REST API Http request method GET, PUT, POST, DELETE to perform action to your resource. http://127.0.0.1/api/v1/user
  73. 73. 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
  74. 74. 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
  75. 75. Http client plugin ● Http ● Dio ● Retrofit *** ● Chopper Json2DartClass -> https://javiercbk.github.io/json_to_dart
  76. 76. 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
  77. 77. Retrofit 1. Add dependency ● dio: ^3.0.10 ● json_annotation: ^3.1.0 ● retrofit: ^1.3.4+1 Retrofit - https://pub.dev/packages/retrofit
  78. 78. Retrofit 2. Add dev dependency ● build_runner: ^1.10.3 ● retrofit_generator: ^1.4.0
  79. 79. 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
  80. 80. 24_todo_api
  81. 81. Workshop 8 ● Todo List app connect to your backend 25_retrofit_provider

×