Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material Components (MDC)

Michael Thomsen
May 10, 2018 · 3 min read

At Google I/O 2018, the Material team announced a important update to Material Design, with a strong focus on enabling mobile apps to stand out from the rest by systematically applying brand-specific design. This is Material Theming. The following study shows customized Material components, combined together to create a brand-specific design for ‘Shrine’, an e-commerce app that sells clothing and home goods. Flutter is the perfect framework for realizing designs like this!

“I’m incredibly excited to welcome Flutter into the official set of Material Design Components as a full fledged peer to our Android, iOS and Web offerings. Flutter’s philosophy of flexible and adaptable widgets is a great fit for Material Theming, and Flutter’s ability for real time UI iteration is a game changer in the way we polish and refine designs.”

- Matías Duarte, VP, Material Design

UI elements from the ‘Shrine brand-specific design’ using
Material Theming and Material Components
A screenshot from the Shrine design implemented using Flutter & Material Components

Official Flutter support for Material Components

One of Flutter’s core tenets is best-in-class support for creating expressive and flexible mobile UI. To support this goal, we are delighted to announce that Material has now adopted Flutter as a first-class platform! Flutter is included in design and engineering discussions, documentation, official support, content from Google Design, and education along with Android, iOS, and web. Material has even started a dedicated Flutter engineering team that works hand-in-hand with Flutter’s Material library engineers. This partnership will allow Flutter to stay even more current as Material Design continues to evolve and add features like Material Theming. You can find more information at

Using Material Theming and Material Components in Flutter

Just in time for I/O, Flutter’s Material Components library has been updated to support dozens of new features, styles, and components from the updated Material system. These are available in Flutter beta 3, and are built right into the Flutter framework with no additional libraries needed! We have also worked on adding more examples of how to use these widgets in the Flutter Gallery:

A selection of Material Components from the Flutter Gallery

Learning more

For a quick introduction to Material Theming with Flutter, check-out our Google I/O session:

Lastly, we are happy to announce four new codelabs that teach core concepts required to create beautiful and flexible user interfaces with Flutter and Material Components:

Next steps

Flutter will continue to release features in partnership with Material. Learn more about the Material Components release schedule in the Material Components Roadmap on GitHub. We look forward to seeing what creative designs you all create using Flutter and Material Theming!


Flutter is Google's mobile UI framework for crafting…

Michael Thomsen

Written by

Product Manager working on Dart and Flutter. Helping developers is my passion!



Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at

More From Medium

More from Flutter

More from Flutter

More from Flutter

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade