The Flutter Slides App for Flutter Live ‘18

When we set out to build the Flutter Slides app, we had basically no constraints or defined scope. It simply need to work, had to be easily updated as content creators finished their slides, needed to showcase what Flutter can really do, and it could not possibly crash (Oof, can you imagine 😳).

Minimum Viable Slides

Our first task was figuring out the minimum feature set required to create an effective slides app. By the time we started, we had less than a month until the big day, so we had to be frugal with our choices.

First, we need to be able to layout content on a slide. Since the window of desktop app can be resized, we needed a layout system that would be relative to the window and scale content up and down accordingly (create a slide in Google Slides and resize your window and watch how the content behaves to see what we mean). On mobile, content doesn’t necessarily resize so that it looks the same at all scales, so this was a new challenge.

Next, we needed to be able to move forwards and backwards between slides. We needed keyboard and mouse click bindings to make this happen and we needed to be certain it would work with wireless “clickers”.

Of course once we had many slides, we found ourselves needing to quickly jump non-sequentially from one to another. We needed a slide sorter!

Then it was clear that to be interesting, the slides would need visually compelling transitions and element animations. So we devised a system for transitions between slides and a re-usable set of animations we could apply to the content.

File -> Open. Your slides running in Flutter!

Lastly, we needed an easily maintainable asset and content management approach. So, we devised a JSON schema, folder structure, and file import system (hello File -> Open) to streamline the process of maintaining content.

Content Management

Anyone who has ever created a major keynote with many speakers knows that the slides are never finished until the last moment. This was a major challenge for the project. Content was created first in Google Slides, and then our team would translate it into the app.

Fortunately, we anticipated this challenge and rather than build each slide with custom slide-specific code, we devised a JSON file with a reusable slide schema. So rather than change code, we simply needed to change a single content file. While we did occasionally have to write some new code if a slide had a new set of requirements, most slides could be laid out and populated with content simply by updating the JSON.

{

"advancement_step": 1,

"type": "rect",

"fill": "0xFF000000",

"x": 1060.0,

"y": 340.0,

"height": 100.0,

"width": 100.0,

"animation": {

"curve": "easeOut",

"duration_in_milliseconds": 3000,

"opacity_start": 0.0

}

}

While maintaining JSON comes naturally for developers, it’s not very intuitive for non-technical people. Really the JSON system is just a starting point, and in comparison to other slide products, we know the system is not perfect. With our data structure in place, the next step would be to add an “edit” mode where we could add content boxes, add text and images, group and ungroup, reposition elements, and do the things Google Slides and Powerpoint can do. We’d love to hear ideas from the open source community for improving on this system.

It’s an App!

Of course the most exciting prospect of building a presentation as a Flutter app is that we can do anything Flutter can do. No longer does a presentation have to be limited by what Google or Microsoft or Apple have built as features for their presentation applications. We can build anything we want!

For the keynote, we wanted to ensure that we used Flutter for animations where it made sense. For complex animations, the sensible choice was to use Flare, Lottie, or animated gifs/webp. But we still wanted to demonstrate Flutter’s native animations capabilities.

So, we built a variety of transitions, carousel animations, scaling effects, and other useful (and reusable) animations.

Try doing this in Powerpoint…

Perhaps the flagship animation for the presentation was the unique 4-box transition we created for Flutters “Four Pillars”. Our goal was to create a transition flow that demonstrated each pillar individually while keeping them all rooted together as a system. The final effect is simply something that is not possible in the normal presentations tools (at least not without embedded videos or incredibly advanced Powerpoint ninjas).

Slides that are a real Flutter app running real Flutter code!

Additionally, it was crucial that we show the world that really any Flutter code can run as a desktop app. So, of course what better way to illustrate this than to show the screen every Flutter developer has seen — the starter “counter” app. We added the real code to the application, and Tim demonstrated live during the presentation that you can tap the “+” to increment the counter.

No longer must a slideshow be limited to text, images, and videos. We can run code! Just consider the implications for technical conferences and demos during presentations. Now, instead of showing screenshots or video captures, we can embed our real code and run real apps in our slides! Amazing.