Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material Components (MDC)
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
Material Theming and 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 material.io/develop/flutter.
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:
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:
- MDC 101 Flutter: Material Components Basics
Learn the basics of using Material Components by building a simple app with core components. - MDC 102 Flutter: Material Structure and Layout
Learn how to use Material for structure and layout in Flutter, adding navigation, structure, and data. - MDC 103 Flutter: Material Theming with Color, Shape, Elevation, and Type
Use Material Components for Flutter to differentiate your product, and express your brand through design. - MDC 104 Flutter: Material Advanced Components
Improve your design and learn to use our advanced component backdrop menu.
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!
