Using Flutter to teach the next generation part2

As promised I now want to share how well the teaching experiment went.

How the day went

Preparation

I used our kitchen table and moved it closer to the TV to mirror the MacBook’s screen to it.
I used AirPlay for that which turned out to be quite laggy (moving the mouse was very hard) so the next time I would rather run an HDMI cable to the TV

Start

We gathered 6 kids (2 of my kids and 4 friends) and started off discussing what the TicTacToe game has to look and behave like.
I used the version I already created beforehand to show what our goal will be.

After doing that we started Android Studio and created a new project. I explained briefly what the main parts of a Flutter app are and where we will spend our effort at (Position wise). Of course, I didn’t explain all the details of what’s written there. No information about State(less)Widgets, classes or anything on that end.

We started by simply placing 9 texts and layouted them using Columns and Rows. Before we started to fine tune the cells I mentioned that we might want to extract the Text part to a method so that we don’t have to make every modification 9 times.
The concept of a Function was already clear to my children (they used Swift Playgrounds a bit) so they were eager to explain the concept to the other kids.

So we created a method that creates the cell content, moved the Text there and made the content a parameter.
Afterwards we replaced all Texts with a call to that method.
The cells up to that point simply contain the “cell ID” (1-9) to see how the text will look like.

We continued to lay out the whole UI (by introducing additional methods to create a row).

State

Then we made a short break to discuss the concept of state. I only briefly mentioned that word but asked the kids what kind of information the game needs to know that distinguish a freshly opened instance from a running / finished instance.
We found out that we need

• cell content
• what player’s turn it currently is
• is the game already finished?

So we extended the code to contain a two-dimensional array that contains the current cell data. I briefly explained that we have to start counting at 0 (like in any sane programming language 😉)
We modified the code to not use the cell numbers but the content from the state.

Behavior

Then we started to implement tap behavior by calling a method getting the row and col index of the cell that has been tapped.
The first behavior was to just set the content of the cell to the current player and switch to the other player.

The kids quickly found out that this is problematic because we have to check if the cell is already filled with something - so we fixed that problem.

We quickly found out that it would be a good idea to have a reset button so that we don’t have to restart the app every time we want to start over, so we used the FloatingActionButton from the sample to hold that functionality.

Afterwards we implemented the logic that detects if the current state contains a winning player already.

Sugar on the top

Finally (we were already tight on time) we rushed to add the confetti that I had in my sample application by copying that functionality from my variant and made it running in the kids’ codebase.

Distribution

In the end I copied the source code to USB sticks that the kids can take with them and deployed the app to the devices the kids have brought.
Turned out that Apple only allows a certain amount of devices in an unpaid developer account, so I had to borrow my wife’s account to publish the app to one iPhone.

Some impressions

Summary

I think overall the day went really well. It would have been better if we had more computers so that more than one kid can type at the same time, but I think that would also mean that I would need some tutor help to still manage that.

Two kids already said - now they know how complicated apps are internally, and they know that they don’t want to become software developers 🫣
I guess at least I tried, right 😉

Outlook

I definitely plan to repeat that. Maybe in a year or so or on demand because it was real fun to explain the different steps to the kids and to see the proud faces when their own apps ran on their devices.