Google asked us for a slides app for macOS, built in Flutter, to show what Flutter Desktop Embedding can do. At Flutter Live ’18, Tim Sneath gave the whole keynote in it, then told the room.
- code reuse, desktop to mobile
- 100%
- views on YouTube
- 120K+
- repo stars
- 200+
The Flutter Live ’18 keynote stage with the deck on the big screen: Flutter’s four pillars, Beautiful, Productive, Fast, and Open, each with its own slide, and a real app running on the Productive slide. The clicker moves through the slides; the last one reveals that the deck was running in Flutter Slides, a Flutter app on macOS.
1 / 6 Four Pillars
01The ask
Show Flutter on the desktop, from the keynote stage.
Google regularly asks VGV to show what Flutter can do. We built Hamilton, the first commercial mobile app in Flutter, and KENKEN for The New York Times, the first Flutter web app.
This time the brief was a slides presentation app for macOS, built with Desktop Embedding, the implementation of Flutter that runs Flutter apps on Windows, macOS, and Linux.
02The slides
Rich text, any window size, one JSON file.
The slides carry rich text and resize to fit any window, so a deck viewed on a phone feels like the same deck on a desktop. Navigation controls move the presenter through them.
All slide content lives in one JSON file, so every update happens in one place.
03The tricks
Slides that run real apps.
The app has transitions, scaling effects, carousels, and more. The big one was the four-box animation for Flutter’s Four Pillars, easy to build in Flutter and out of reach for typical presentation tools.
The real point was that any Flutter code runs as a desktop app. So instead of screenshots or screen recordings of code, the slides embed code and run real apps right on the slide.
04What changed
The keynote was the demo.
-
Flutter Live ’18
A whole keynote, run in Flutter.
Tim Sneath delivered the Flutter Live ’18 keynote, then revealed that his entire presentation had been running in the app we built.
-
Desktop
The first major Flutter app for desktop.
The Flutter skills we use for mobile built this one for macOS, with no new language to learn, and all of the code reusable between desktop and mobile.
-
Open source
The code went public after the show.
The slides app is an open source repository on GitHub, with more than 200 stars.
05If you’re next
What we’d tell a team taking Flutter to desktop.
- 01
Keep content out of the code. One JSON file for every slide meant edits happened in one place.
- 02
Design for resizing from day one. Slides that fit any window feel the same on mobile and desktop.
- 03
Show the running app, not a screenshot of it. Embedded Flutter code put real apps on screen inside the deck.
Roll credits.
Who did what, and with which tools.
- Client
- Our part
- Application development
- Platforms
- macOS
- Built with
- FlutterFlutter Desktop Embedding
- Debut
- Flutter Live ’18 keynote
Built by Very Good Ventures
More success stories
All success stories
A Flutter photo booth with machine learning
A virtual photo booth showcasing Flutter and machine learning.
An interactive photo booth for Google I/O
An interactive photo booth for Google I/O 2021, on Flutter and Firebase.
I/O Pinball, built with Flutter and Firebase
The classic pinball game, rebuilt with Google on Flutter and Firebase.
We’ll care about your success as much as you do.
Our unicorns read every message and reply, usually the same day.
Start the conversationA 30-minute call about what you’re building.