What are Material Design and Material Components for Flutter?

Material Design is a system for building bold and beautiful digital products. By uniting style, branding, interaction, and motion under a consistent set of principles and components, product teams can realize their greatest design potential.

Material Components for Flutter (MDC-Flutter) unite design and engineering with a library of components that create a consistent user experience across apps and platforms. As the Material Design system evolves, these components are updated to ensure consistent pixel-perfect implementation, adhering to Google's front-end development standards. MDC is also available for Android, iOS, and the web.

Want to get started on building Flutter apps?

Join us for this Flutter Study Jam! Together we'll work through Flutter codelabs prepared by Google instructors. You will be able to get hands-on experience with Flutter and build a Flutter app while learning the fundamentals.

Note: If you are completely new to Flutter, we recommend checking out the material from our last Flutter Study Jam, where we went through an introduction to Flutter. Here's a link to the recording: https://gdg.community.dev/events/details/google-gdg-chapel-hill-presents-flutter-study-jams-getting-started-with-flutter-online-workshop/

In this session we will build a Flutter app with the following 2 codelabs:

MDC-101 Flutter: Material Components (MDC) Basics

Description: Material Design is a system for building bold and beautiful digital products. By uniting style, branding, interaction, and motion under a consistent set of principles and components, product teams can realize their greatest design potential.

Material Components for Flutter (MDC-Flutter) unite design and engineering with a library of components that create a consistent user experience across apps and platforms. As the Material Design system evolves, these components are updated to ensure consistent pixel-perfect implementation, adhering to Google's front-end development standards. MDC is also available for Android, iOS, and the web.

In this Codelab, you'll build a login page using several of MDC Flutter's components:

MDC-102 Flutter: Material Structure and Layout

Description: In Codelab MDC-101, you used two Material Components to build a login page: text fields and buttons with ink ripples. Now let's expand upon this foundation by adding navigation, structure, and data. The outcome of this lab will look like the following: