Designing for Flutter

3 min read   /   
6h ago

If you google “designing for flutter”, you’ll get some great tips on how designers can learn to code and how developers can design their apps with Flutter.

You won’t find much help for designers who are accustomed to designing for iOS and Android apps separately, and are now designing for a single multi-platform Flutter app.

There aren’t as many rules to follow as you may think. Our team has shipped a two major Flutter apps, and here's a few things that I’ve learned along the way:

Bring your unique design language.

Flutter provides base user interface widgets in Material and Cupertino flavors for engineers to create apps more efficiently, but that doesn't mean you're limited.

The Material widgets are most numerous and also very flexible in their expression. This doesn't mean that Flutter apps are just Material Design for iOS, even though they can be.

The beauty of flutter is that you can make identical apps for iOS and Android but you can also specify where you want them to diverge. The Cupertino widgets are there to help bridge the gap so you can keep your iOS toggles — and even use them on both platforms if you wish.

The great thing about how Flutter's widget system works is that it's extremely flexible, so take advantage and design something original.

Get to know the animation classes.

Handing off our perfectly crafted UI animations from design team to the engineers has always been a challenge, but Flutter provides new tools to make our lives easier.

Before Flutter, UI animations were implemented by different team members, on separate teams and at totally different times. I have many memories of reviewing build after build from one platform trying to achieve what the other had no problem implementing.

"Animation consistency across iOS and Android has never been simple, until now. "

- Caroline Maxwell

Flutter's Curve class provides designers and engineers a shared reference for choosing the right animation style. There are also pre-built Material animations to achieve some of the more fancy transitions.

We pick the style, set the duration and the before/after states, and it renders the same on both platforms.

Animation example
With Flutter, it’s a new era for communicating UI animations — so lean in!

Make use of Rive and other animation tools.

Designers now have control over the final animation output, using a tool called Rive.

You can make animations as you would in another prototyping design program, but with the benefit of producing a final product for your team to use in the app. These files can be added as easily as any other image asset.

You can also define states of your animation, if you want an event to spark a particular movement using the same assets.

The MGM Resorts app's Digital Key is a prime example of an animation changing state based on the user’s input as they interact with their hotel room door. The states you can see below are: Idle, Unlocking, Unlock-Success.

Key unlocking

The app knows when the Bluetooth connection is made with the lock, the animation state to show is Unlock-Success which transitions beautifully from the Unlocking state, thanks to Nick Boes.

Another bonus about Rive we discovered recently is the ability to import Lottie animations.

Geoff Roseborough made a loading state for the website that we wanted to also use in the app and, with a little effort ordering the layers panel after import, we created a .flr file to use in the Flutter app.

Disco Animation
Enjoy the new control you have over animations, and find moments to delight your users.

Enjoy live working sessions, thanks to Hot Reload.

Flutter diminishes a lot of the natural awkwardness between a designer and engineer trying to make decisions together in real time.

Hot Reload allows engineers to see UI updates almost instantly without having to wait for a full rebuild of the application, meaning you can make UI adjustments and see the change right away. You can also quickly check how the UI will look across devices. No more silence waiting for a build to load, while both of you think you’ve got better things to do than collaborate.

Mobile app UI demos
Stay close to your engineers and ask to see work in progress so you can make changes together before you get the test build — it's a lot easier now!

Hopefully this has put your design mind at ease, and you’re excited for your team to build with Flutter. It’s a refreshing new way to design apps!

More Articles

Article Cover




Superformula's Iesha Smith Talks Product Design and Working Remotely

Article Cover




Figma and Zeplin: Superformula’s winning design-to-development process



©2021 Superformula. All rights reserved.

👋  We use cookies to improve the user-experience of this website.