Flutter Mobile Apps Development

This is the lecture video of CMSC4303 Mobile Apps Programming, Fall 2019. The vidoes were recorded in the summer of 2019 so you may need to use updated software versions as you follow the videos.

Flutter Programming Environment

The first app (lesson0) using Flutter

Pre-Lesson1: Dart Programming Language

  1. intro to Dart programming language: https://youtu.be/my68H9CCrk0
  2. named parameters in functions: https://youtu.be/SYDqRDSgfng
  3. classes in Dart: https://youtu.be/eH6jKBE3qI8
  4. async/await in Dart: https://youtu.be/r7g0Da8ZmW8

Lesson1: Stateless Widgets and Layout

  1. create project: https://youtu.be/D4FwIPThUYQ
  2. scaffold: https://youtu.be/12tY8f62-yc
  3. listview instead of column: https://youtu.be/u9-NA0v5Z4M
  4. row: https://youtu.be/F95BjK_fwOY
  5. images: https://youtu.be/4HsstCHs_7o
  6. buttons: https://youtu.be/z6YkzDx0pH4
  7. controller for buttons: https://youtu.be/85Nt4Ex5wBM
  8. alert dialog: https://youtu.be/njWtns5MjaQ
  9. drawer: https://youtu.be/zdmWUC5rMJk
  10. drawer header: https://youtu.be/x070aNnIPQU
  11. navigation to other page: https://youtu.be/B83HLLxzI6M
  12. cs page example: https://youtu.be/AIg4LyyDT9A
    (Refer to "running on Android phone" video below to fix a rendering bug)

Post-Lesson1: Running on iOS simulator and real devices; Android and iPhone (Not required to include in the assignment submission)

Pre-Lesson2: Dart Programming Language

Lesson2: Stateful Widgets and Input Forms

  1. agenda: https://youtu.be/PZI85pLzix8
  2. create project & home page setup: https://youtu.be/I2_L5LLpKVs
  3. stateful widgets: https://youtu.be/itDWJSOcgNc
  4. reload vs. restart: https://youtu.be/B-mkQNZ0VTg
  5. popup menu on appbar: https://youtu.be/lGfKJdmAHzQ
  6. popup menu using MVC: https://youtu.be/SBNck0HK1GY
  7. popup menu generated by map( ) of List: https://youtu.be/pf29MSLCeM0
  8. navigate to registration page: https://youtu.be/d5j4RT4GtK4
  9. MVC structure summary (creating registration page): https://youtu.be/Uj3wHWBsnLY
  10. form and textformfield: https://youtu.be/2HqVeuCyeps
  11. textformfield - password, age: https://youtu.be/zb12FVM56I8
  12. textformfield - validator, onsaved: https://youtu.be/v8Yzvh0sLzw
  13. dropdown menu: https://youtu.be/dNnETCcjGIs
  14. checkbox and Wrap widget in place of Row: https://youtu.be/lQ7ZeEiVrhA


Lesson3: Radio input form and Navigation

  1. agenda: https://youtu.be/DFf1qtiJxRQ
  2. create project: https://youtu.be/yiOpzVb784Y
  3. homepage based on MVC: https://youtu.be/irX25cquYsI
  4. textformfield: https://youtu.be/lHowGe4JHtE
  5. form validator: https://youtu.be/nD34ZeUC2M0
  6. model (computeobject) and form submit: https://youtu.be/moW7jCfpKZ0
  7. radio inputform for optype: https://youtu.be/jcmC99dd4vM
  8. radio inputform for inputscale: https://youtu.be/9Xj-onMx3XQ
  9. refactoring on the use of computeobject: https://youtu.be/NFFo-IWXOz8
  10. navigate to computepage: https://youtu.be/5s-WJaJnh6E
  11. create computepage using MVC: https://youtu.be/zPUtRz97mNY
  12. send data when navigate to: https://youtu.be/Bh31T3-o0nc
  13. computation at computepage: https://youtu.be/0FsKgHWxxy8
  14. receive data when navigate back: https://youtu.be/oByQ_8oNsH4
  15. show received data at homepage: https://youtu.be/wlJDpCwpVZs
  16. disable Android phone's system BACK button: https://youtu.be/7fj3ahkITjs


Lesson4: MyLibrary app using ListView

  1. agenda: https://youtu.be/ODL0hSeilvc
  2. new project and homepage in MVC: https://youtu.be/NOgusNFuu-U
  3. model: Book and MyCloud: https://youtu.be/VTcYwFFb5cg
  4. ListView.builder() and onTap: https://youtu.be/wXLQtuz9-DY
  5. ListView onLongPressed: https://youtu.be/pVEI7kvsa_U
  6. CachedNetworkImage package: https://youtu.be/T9LkAWPMD_M
  7. error handling in CachedNetworkImage: https://youtu.be/UfwTF0-4poc
  8. subtitle in ListTile: https://youtu.be/W2bykB1PEIU
  9. color names in Colors class API: https://youtu.be/XV4qUar5FGI
  10. delete operation part1: https://youtu.be/gVqEAFujftc
  11. delete operation part2: https://youtu.be/MLQ2dJsJZ_c
  12. delete operation part3: https://youtu.be/CQ58iQAGWHA
  13. navigate to book page; bookpage in MVC: https://youtu.be/y5EI29_R8o0
  14. bookpage readonly part1: https://youtu.be/z-0u1XGElVQ
  15. bookpage readonly part2: https://youtu.be/hfHKph-Fyis
  16. bookpage edit operation: https://youtu.be/7Q1tzBb7ouk
  17. bookpage save operation: https://youtu.be/7ZqlxB6yB8M
  18. homepage floating action button for ADD: https://youtu.be/Ama6c8Unfgg
  19. add a new book: https://youtu.be/Go8O32eosOU
  20. a bug fix in validateImageURL( ): https://youtu.be/0oNSls57alc


Lesson5: Book Review App (PART I) - using Firebase

  1. Agenda 1 - Google Firebase: https://youtu.be/lwqjWWWyuhU
  2. Agenda 2 - Demo of the app: https://youtu.be/VFBzGGhliDk
  3. front page: https://youtu.be/hJPFB_-ylCw
  4. signup page: https://youtu.be/H0AYVINdtP0
  5. User model: https://youtu.be/gDiITMUvN64
  6. signup page controller: https://youtu.be/eAG_NhodbUo
  7. Firebase configuration 1 - create Firebase project: https://youtu.be/bVlYcVDY_M0
  8. Firebase configuration 2 - setup for iOS devices: https://youtu.be/RcP9pkkK67s
  9. Firebase configuration 3 - setup for Android (1): https://youtu.be/B4xa4D8iioQ
  10. Firebase configuration 4 - setup for Flutter: https://youtu.be/6SKxu10GgVk
  11. Firebase configuration 5 - setup test for iOS: https://youtu.be/RoRnrRTclZo
  12. Firebase configuration 6 - setup for Android (2) and testing: https://youtu.be/GI8d6sxzow8
  13. Firebase configuration 7 - Android simulator requirements: https://youtu.be/_ZzIG7xM1dc
  14. Firebase Auth test on Android: https://youtu.be/d_dq73DsxNU
  15. Firebase Auth test on iOS: https://youtu.be/I2Sr0L5xJJE
  16. create account: https://youtu.be/X3_hBqaMjWQ
  17. Firebase NoSQL database: https://youtu.be/UEpqf247Y4I
  18. Firestore document example: https://youtu.be/JO3caoMeRwo
  19. enhanced User model: https://youtu.be/GrVeHQZhbx0
  20. save user profile (1) : https://youtu.be/cPo9RXnCRHc
  21. save user profile (2): https://youtu.be/Ov2CGOJ3bmw
  22. test for save user profile: https://youtu.be/oTEuZ5Qh5Fs
  23. login page: https://youtu.be/Ne17nDzkpvg
  24. navigate to home page (1): https://youtu.be/VNBBSrNgQbk
  25. navigate to home page (2): https://youtu.be/nlzZ9nR4qoo
  26. bug fix on dialogbox for navigate to homepage: https://youtu.be/OkYTJL9HuXc
  27. Firestore security rules - userprofile access control: https://youtu.be/ql17J2FjHWA
  28. drawer on homepage and disable Android BACK button: https://youtu.be/QdmKmLXkHr0
  29. sign out: https://youtu.be/RUpFVFIC5hE
  30. progress bar: https://youtu.be/S3yLwjmkp2U
  31. progress bar in login process: https://youtu.be/RISNVNsCHsE

Lesson6: Book Review App (PART II) - cont'd from Lesson5

32. Book model: https://youtu.be/bOYl-KNK8rE
33. Add button on home page: https://youtu.be/kMGMyS2_vJw
34. bookpage and controller: https://youtu.be/2acFfsaAceA
35. Book model - empty constructor: https://youtu.be/4dcVUoZD1zY
36. book page (1): https://youtu.be/sBedf0hkT4w
37. book page (2): https://youtu.be/jyhaUjY_PNQ
38. book page (3): https://youtu.be/wbKifYqV58A
39. book page (4): https://youtu.be/DR13ac-wy34
40. book page (5): https://youtu.be/y85S8FRgLg0
41. Book model - serialize: https://youtu.be/EULNVFLO7aY
42. add books in Firestore and security rules: https://youtu.be/GwGAP9-3p6c
43. from Save button to Add button: https://youtu.be/pl8wLCAF1Rw
44. read books at login (1): https://youtu.be/-sVfqH3Oj6Q
45. read books at login (2): https://youtu.be/67RpOqD9UBE
46. read books at login (3), Book model - deserialize: https://youtu.be/Am0cyzmUzfE
47. read books Firestore security rules: https://youtu.be/PBDG5UVJ8KU
48. homepage with book list: https://youtu.be/uKaf_wRw-YA
49. book page for edit (1): https://youtu.be/42444j84pJ4
50. homepage error fix: https://youtu.be/ssfP5cBV-OU
51. book page for edit (2): https://youtu.be/_Z7ev-O7Pdg
52. book page for edit (3) and save: https://youtu.be/YqOR0MR9jiU
53. book page for edit, Firestore save: https://youtu.be/DnzHQsDQteE
54. Firestore books collection security rules: https://youtu.be/u2QPDYtzmF0
55. homepage update with Add button: https://youtu.be/QUbzAdJUIi8
56. homepage update after book edit: https://youtu.be/0TV5qwRkV0Y
57. book page - read only fields: https://youtu.be/RiHdlznCTVU
58. delete books (1): https://youtu.be/ONs8OTnbW2s
59. delete books (2): https://youtu.be/T9I4itkpJLs
60. delete books (3): https://youtu.be/g2JqCQMXKi0
61. Add button bug fix on 1st book add: https://youtu.be/jcdAquOgqQs
62. homepage book list left justification: https://youtu.be/cEen2XBDpKU
63. books shared with me (1): https://youtu.be/bu7TrTseZHw
64. books shared with me (2): https://youtu.be/ZvXMGF_v7SI
65. Firestore indexes build for shared with me query: https://youtu.be/4IOiBubXmps
66. shared books page (1): https://youtu.be/_CIWw9Clp68
67. shared books page (2): https://youtu.be/0z7XWmEcYwQ
68. testing on shared books features: https://youtu.be/ktgMA9jgll0
69. profile menu for future implementation: https://youtu.be/ETWQeqQS8G8