MDC-101 Flutter: Material Components Basics

1. Introduction

What are Material Design and the Material Flutter library?

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.

The Material Flutter library includes Flutter widgets which implement the designs of Material Design components (MDC for short) to 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.

In this codelab, you'll build a login page using several of Material Flutter's components.

What you'll build

This codelab is the first of four codelabs that will guide you through building an app called Shrine, an e-commerce app that sells clothing and home goods. It will demonstrate how you can customize components to reflect any brand or style using Material Flutter.

In this codelab, you'll build a login page for Shrine that contains:

  • An image of Shrine's logo
  • The name of the app (Shrine)
  • Two text fields, one for entering a username and the other for a password
  • Two buttons

Android

iOS