Interactive Photo Booth Built for Google I/O

Technology
Flutter
Firebase
Very Good CLI

We built I/O Photo Booth with Google for Google I/O 2021, a virtual photo booth on the web made with Flutter and Firebase. Attendees took selfies with the Google mascots on the device of their choice and shared them to social media.

mascots to take a selfie with: 4
test coverage from the first commit: 100%
in the Flutter repository on GitHub: Open source

01The ask

A photo booth for Google I/O, with no booth to stand in.

Google launched Flutter in 2017 to build apps for every screen, and it has partnered with us many times since to show what Flutter can do. For Google I/O 2021, it asked us to build an interactive photo booth with Flutter and Firebase.

Attendees opened I/O Photo Booth on the web from whatever device they had. They took selfies with Flutter’s Dash, Android Jetpack, Chrome’s Dino, and Firebase’s Sparky, decorated the photos with props, and shared them to social media for the event.

02The camera

We wrote the camera plugin Flutter web needed.

We built a camera plugin for the web that follows Flutter’s federated plugin architecture, with two main APIs, one to start the camera and one to take the photo.

We built it for the booth, but nothing in it is specific to the booth. Any Flutter app on the web can use it, and the code is open source.

The photo booth in a browser window, a laughing woman in a grey hoodie framed by the camera with Dash, Sparky, Android Jetpack, and the Chrome Dino added around her, an Add Friends menu of mascots, and a shutter button

03The backend

Firebase ran the booth, Cloud Functions made the posts.

Firebase handles storage, hosting, and performance monitoring for the booth.

Cloud Functions power the social sharing. Each one builds a social post with the attendee’s photo, its metadata, and a link back to I/O Photo Booth.

The white I/O photo booth beside a fanned stack of photo prints of Dash, Android Jetpack, Sparky, and the Chrome Dino on red, blue, green, and yellow backgrounds — Dash, Sparky, Dino, and Android Jetpack, ready for their close-up.

04The architecture

Tested and translated before the first feature.

We generated the project with Very Good CLI, so the first commit already had null safety, internationalization, and 100% unit and widget test coverage. State management runs on flutter_bloc, which keeps it predictable.

A feature-driven monorepo let the team build features in parallel and kept the UI apart from the business logic. The codebase is open source in the Flutter repository.

05What changed

The booth went wherever the attendees were.

Any device

A photo booth that opens in a browser.

Attendees took and shared their photos from the device of their choice, with nothing to install.
Reusable

A camera plugin for Flutter on the web.

Built for the booth, general enough for any Flutter web app that needs a camera.
Open source

The whole codebase is public.

I/O Photo Booth lives in the Flutter repository, so other teams can read how it was made.

06If you’re next

What we’d tell a team with an event on the calendar.

01
Build the hard piece as its own package. The camera plugin came out of this project and works in any Flutter web app.
02
Start from a template that already has tests and internationalization, so the first commit is ready for production habits.
03
Split the repo by feature, so people can build in parallel without waiting on each other.
04
Hand the one-off jobs to serverless functions, like building a share post for every photo.

Roll credits.

Who did what, and with which tools.

Client: Google
Our part: Application developmentCamera plugin for Flutter webFirebase backendArchitecture
Platforms: Web, on any device
Built with: FlutterFirebaseCloud FunctionsVery Good CLIflutter_bloc
Timeline: Google I/O 2021
Read more: How it’s made, on MediumThe code on GitHub