How to structure the course
Overview/Concepts
- What is Flutter: origin of the project, goals etc
- Dev environment: installation, hot reload, debug vs release
- Dart language overview: imo we shouldn't talk that much about it because
- people in Polimi tend to have a general understanding of how C-like programming works;
- Flutter is more of a UX/UI framework: we should focus more on the workflow for creating UX/UI, not on Dart's fancy or complex features;
- Widgets: what are they, stateless vs stateful, properties, how are they nested
Scaffold
Text
-
Container
,SizedBox
,FittedBox
BoxDecoration
Center
-
Row
/Column
Expanded
Stack
- Icons
- Various buttons (
ElevatedButton
,TextButton
,IconButton
, evenInkWell
maybe?) SingleChildScrollView
-
ListView
,ListTile
Ideas
"Interactivity"
I was thinking about doing something more interesting than just a "theoretical" course: when explaining what all the widgets do, I'd show them on a project that we'll build as we go. In other words:
- the day would start with a blank Flutter project;
- we'd proceed by explaining the first widget (with it's properties etc.), let's say
Text
; - the presenter switches to Android Studio or VSCod(ium), and while still presenting their screen adds the lines on the project, hot reloading the app and showing it on scrcpy;
-
Rinse and repeat for every other widget: we talk about
Center
? Explain the theory and then switch to the editor and show the thing.
Show, don't tell - someone in Hollywood prolly
Why all of this? Simply because just theory, just screenshots, just words are not enough. It's far more entertaining - and I'd argue even far more effective - to show stuff as we go, in order to have a "complete", albeit simple, demo app.
Is it doable? Yes, as long as we have a PC capable of running the presentation AND an editor AND scrcpy AND OBS.
Let me be clear on one thing, I do not want (necessarily) the students to follow along on their machines: as we saw for Arduino, waiting for everyone to install and setup their stuff is extremely tedious. Rather, I'd make (just?) the last day a "code-along" day (dunno, if possible): we'd expect people to have everything ready and we'd immediately start to code another demo app.
Useful links:
- https://flutter.dev/learn
- https://m3.material.io/ (for design)
- https://flutter.dev/showcase (who uses Flutter)