Building a web app with Flutter and Firebase

Project Overview

We were excited to team up with Google to build I/O Photo Booth for Google I/O 2021. Attendees were able to access a completely virtual photo booth experience on the web from their device of choice. Users could take selfies with Google mascots: Flutter's Dash, Android Jetpack, Chrome's Dino, and Firebase's Sparky and decorate their photos with props. Users could also share their photo creations to social media for the event!

I/O Photo Booth highlighted during the Google I/O '21 Developer Keynote

Camera plugin for web

The main feature of the app is the camera. We created a camera plugin specifically for the web that follows the federated plugin architecture. We implemented two main APIs for initializing the camera and taking the photo. While we built this plugin for the I/O Photo Booth, the implementation is not specific to this project, and could be used to build other Flutter apps on the web. View the open source code.

Girl smiling with Dash and Sparky on her shoulders and Android Jetpack and Chrome Dino in the background

Firebase backend integrations

We used Firebase for various backend functionality such as storage, hosting, and performance monitoring. Firebase cloud functions were a key part in developing the social sharing feature of the app. The cloud functions allowed us to generate social posts with the user's photo, metadata, and a link back to the I/O Photo Booth.

I/O Photo Booth was featured in four tents in the interactive I/O Adventure and users could access the web app from these locations.
In addition to visiting the web app directly, users could access it through the interactive I/O Adventure

Scalable architecture

We built the I/O Photo Booth with scalable architecture patterns that we implement at VGV. We used Very Good CLI to generate the project, which meant our first commit had null safety, internationalization, and 100% unit and widget test coverage. We used flutter_bloc for a reliable and predictable state management solution. Implementing a feature-driven monorepo structure allowed our team to work on features in parallel and ensured that UI was separated from business logic. View the codebase.

I/O Photo Booth

Project Outcomes

Learn more

How It's Made

A deep dive into how we built I/O Photo Booth with Google, including code snippets from the app and solutions for challenges we encountered.

Read article on Medium →

Open source code

The codebase for I/O Photo Booth is open source in the Flutter repository.

View on GitHub →

I/O Photo Booth

Google is a global company with hundreds of thousands of employees around the world. The company is most known for the Google search engine, as well as numerous other cloud computing, internet, hardware, and software services. Google launched Flutter in 2017 as a solution to build apps for all screens and has since partnered with us numerous times to demonstrate Flutter’s amazing potential.

More Success Stories