Flutter Hot Reload Game at Google I/O 2018

About a month and a half before I/O ’18, we started working with the Flutter team at Google to create an interactive kiosk for the conference. The goal of the exhibit was to give attendees a chance to experience Flutter in a fun, interactive, and memorable way.

The game we built is a multiplayer, collaborative, UI-building race. Attendees play as the app developers of a food delivery startup. Each attendee has a tablet, with instructions appearing from various stakeholders that need to be announced to other players. Each tablet also has a variety of buttons, sliders, and knobs to accomplish those instructions. Players have to juggle announcing the tasks and completing them before the stakeholders lose their temper and shut down the project. The concept is similar to Spaceteam.

As players interact with their tablets, the UI of the Flutter app on the TV updates in real-time thanks to Flutter’s hot reload functionality.

The whole experience is made up of three Flutter applications:

• Tablet App
• TV App
• Simulator App

Tablet App

The Tablet App is what’s running on the tablets, and this is where all the gameplay happens. Each player has a different task on the left side of their screen, which needs to be accomplished using the controls on the right side of the screen. Sometimes the task appears on their screen, most other times it appears on the other players’ tablets. Things can get pretty chaotic (and fun) as everybody is yelling and executing tasks as a team!

TV App

The TV App is what runs on the big display and acts as a server for the whole game. The code displayed here is all real! As players are completing tasks on their tablets, real live Flutter code is changing on the fly. As this code is changing, the Simulator App is updating in real-time thanks to Flutter’s hot reload feature.

The TV App also keeps track of high scores at the end of each session.

Simulator App

The goal of the game is to complete the Simulator App. When the game begins, the Simulator App is in a very basic wireframe state. As the players accomplish tasks on their tablets, the Simulator App’s layout, design, and animation all come to life.

All components of the game (tablet and TV apps) are built with Flutter and the animations are created using 2Dimensions’ tools, Nima and Flare.

Open Source

The whole project is open source, so feel free to explore the code here and setup your own game. Be sure to share your high scores with us!

Check out the Flutter website to learn more about how it was possible to create such an engaging experience in such a short amount of time!

Originally published at 2Dimensions.com on August 4, 2018.