Our slide deck for technical workshops building a game app with Flutter.

1. How to make a game app
(with Flutter)
William & Mary, Spring 2023

2. Workshop 1: Flutter Basics
How to make a game app

3. What is Flutter?
● Framework for app and web development
● Code is structured into stateful and
stateless classes
● Apps are composed of widgets
● Language is called Dart
I love the Widget of the Week series!

4. Getting started
● Navigate to the following link: https://github.com/ceh-
2000/paint_drop.git
● Scroll down to the section called “Prerequisites” and follow
the steps to install a code editor and Flutter.

5. Flutter Doctor | Path Issues
C:> where flutter dart
Command Prompt ✅ | Powershell 🛑
(1) Search for “env” and select “Edit
environment variables for your
account”
(2) User variables → click entry called
“Path” → Append to the end with “;”:
C:path-to-flutterbin
⚠️ Restart terminal after completion!

6. Creating your first app
● Navigate to the following link:
https://github.com/ceh-2000/paint_drop.git
● Scroll down to the section called “Creating
your first app” and follow the steps to
install a code editor and Flutter.
Your default app should look like this →

7. Workshop 2: Game design basics
How to make a game app

8. Question
Suppose I have two phones. One can redraw a star on the screen
every 1 second. The second phone is older and can only redraw a
star on the screen every 2 seconds. We want to make the star look
like it’s moving left to right across the screen. How do we create one
set of logic that works for both phones?

9. Answer
new_position = old_position + speed * dt
Flame (a Flutter game package) gives us the elapsed time (dt)
between frames to compute where we need to put the heart for the
same movement across different devices.

10. Workshop 3: User interaction
How to make a game app

11. Falling stars specifications
● Drop a variable number of spinning
stars from top of screen to bottom
● Stars are draggable horizontally
● Stars cannot be dragged off the screen
● Stars do not rotate when being
dragged

12. Flame inputs
● Drag Events (play around
with the demo in the docs)
● Gesture Input (mouse and
touch pointers)
● Keyboard Input
● Tap Events
● Other Inputs (supports
Joysticks and Gamepads) https://docs.flame-
engine.org/1.6.0/flame/inputs/drag_events.html#demo

13. Mixins ● Use mixins to inject code into a
class (to make things draggable)
● Mixin class acts as parent class,
offering the child the desired
functionality
● Key difference between mixins and
inheritance: “child class can still
inherit all the features of the parent
class, but, the semantics about the
child ‘being a kind of’ the parent
need not be necessarily applied”
(mixin on Wikipedia)

14. Workshop 4: Paint drop game
How to make a game app

15. App layout and adding sprites

16. Game logic
● Players drag the paint drops above the correct colored buckets.
● Scoring:
○ Correct paint drop and bucket = +1
○ Incorrect paint drop and bucket = -1
● Possible extensions:
○ Make paint drops fall faster over time
○ Power-ups that automatically move all paint drops to the
correct place or pause paint drops in the air

17. Workshop 5: App deployment
How to make a game app