GSP887

Overview

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.

What you'll build

This lab 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 MDC-Flutter.

In this lab, 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

Setup

Before you click the Start Lab button

Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources will be made available to you.

This hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access Google Cloud for the duration of the lab.

To complete this lab, you need:

• Access to a standard internet browser (Chrome browser recommended).

Note: Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.

• Time to complete the lab---remember, once you start, you cannot pause a lab.

Note: If you already have your own personal Google Cloud account or project, do not use it for this lab to avoid extra charges to your account.

Task 1. Open the Code Server Editor

In this lab, you will use a custom editor that includes the Flutter and Dart extensions. From the initial Qwiklabs panel:

1. From the Lab Details panel copy the IDE link:

2. Paste the link into a browser.

Note: Code Server Editor

• Based on VS Code
• Supports Extensions

Task 2. Download the MDC Starter app

Clone the starter app from GitHub

In this section clone the material components starter app repository.

1. From the main panel select the Explorer Icon.

2. Select the Clone Repository option.

3. Paste the following repository name:

https://github.com/material-components/material-components-flutter-codelabs.git

4. Click Clone from URL.

5. Set the destination folder as below and click OK.

/home/ide-dev/

6. You can safely ignore any pop-ups in your editor (including opening the folder).

7. Click Open Folder from the Explorer panel and navigate to the folder /home/ide-dev/material-components-flutter-codelabs/mdc_100_series. Click OK.

8. Confirm the notifications to get packages

Create a web build

The material components starter app is designed to be run and tested as a mobile app. Use the editor to quickly create a web build which you can use for rapid testing.

1. In the editor, open a new Terminal by clicking the Application Menu > Terminal > New Terminal. You can also press ctrl + shift + ` to open a new Terminal.

2. Ensure you are working from the material-components-flutter-codelabs directory:

cd ~/material-components-flutter-codelabs/mdc_100_series

3. Enable web for your flutter project:

flutter config --enable-web

4. Re-create the flutter project with web now enabled:

flutter create .

You'll now see a web folder appear in your mdc_100_series directory. Flutter has added the files necessary to build and test this application on the web.

Run the Starter app

To run the web application start the server and then use the Live Server to view the result.

1. Run the Flutter web server from the terminal:

fwr

The running web server should look similar to below:

2. Copy the Live Server address from the Qwiklabs Panel and paste it into a new browser tab.

3. The browser will render the web application!

4. Return to your Code Server IDE tab and inspect the code.

Note: The web application might take some time to display the SHRINE Icon.

Click Check my progress to verify the objective. Clone the repository, re-create the flutter project and run the starter app

Widgets in login.dart

1. If you haven't already, expand the mdc_100_series and lib folders in your Code Server explorer.

2. Open up lib/login.dart.

Notice that it contains:

• An import statement that brings Material Components into this file.
• A LoginPage public class that represents the entire page displayed in the simulator.
• A _LoginPageState private class that includes a build() function to control the UI widgets.

Task 3. Add TextField widgets

To begin, you'll add two text fields to your login page, where users enter their username and password. You'll use the TextField widget, which displays a floating label and activates a touch ripple.

Note: Material's text fields have been greatly enhanced to improve brand flexibility, with improvements backed by extensive user experience (UX) research for better usability and visual design.

Learn more about the new text fields in their Material Guidelines article.

This page is structured primarily with a ListView, which arranges its children in a scrollable column. Let's place text fields at the bottom.

1. In lib/login.dart, add two new text fields and a spacer by replacing line 45, // TODO: Add TextField widgets (101), with this snippet:

// TODO: Add TextField widgets (101) // [Name] TextField( decoration: InputDecoration( filled: true, labelText: 'Username', ), ), // spacer const SizedBox(height: 12.0), // [Password] TextField( decoration: InputDecoration( filled: true, labelText: 'Password', ), obscureText: true, ),

The text fields each have a decoration: field that takes an InputDecoration widget.

The filled: field means the background of the text field is lightly filled in to help people recognize the tap or touch target area of the text field.

The second text field's obscureText: true value automatically replaces the input that the user types with bullets, which is appropriate for passwords.

2. Save your changes to lib/login.dart.

3. In your Code Server terminal, press the r key to perform a hot reload.

4. Return to the tab displaying your web app and refresh it.

You should now see a page with two text fields for Username and Password! Check out the floating label animation.

Note: TextField features include:

• The TextField widget's look can be easily changed. For the decoration field, specify an InputDecoration value.
• The MDC text field displays touch feedback (called the MDC ripple or "ink") by default.
• The FormField is a similar widget that has special features for embedding fields in Forms.
• TextField class documentation

Note: The application might take some time to load text fields for Username and Password.

Click Check my progress to verify the objective. Add TextField widgets in the lib/login.dart

Task 4. Add buttons

Next, you'll add two buttons to your login page: "Cancel" and "Next." You'll use two kinds of MDC button widgets:

• TextButton
• ElevatedButton

Note: Why not simply display two contained buttons? Each button type indicates which actions are more important than others.

A layout should contain a single prominent button. This makes it clear that other buttons have less importance. This prominent button represents the action we most want our users to take in order to advance through our app.

The action we'd least like them to take is canceling the login. Because a contained button draws the eye with its raised appearance, it should be used for the more important action. By comparison, the plain text button to the left of it looks less emphasized.

Learn more about button hierarchy in the Buttons article of the Material Guidelines.

Add the OverflowBar

In lib/login.dart:

1. Add the OverflowBar to the ListView's children by replacing // TODO: Add button bar (101) with this code:

// TODO: Add button bar (101) OverflowBar( alignment: MainAxisAlignment.end, // TODO: Add a beveled rectangular border to CANCEL (103) children: <Widget>[ // TODO: Add buttons (101) ], ), The OverflowBar arranges its children in a row.

Add the buttons

Then add two buttons to the OverflowBar's list of children:

// TODO: Add buttons (101) TextButton( child: const Text('CANCEL'), onPressed: () { // TODO: Clear the text fields (101) }, ), // TODO: Add an elevation to NEXT (103) // TODO: Add a beveled rectangular border to NEXT (103) ElevatedButton( child: const Text('NEXT'), onPressed: () { // TODO: Show the next page (101) }, ), Note: Why are there empty blocks for the onPressed: fields?

If you passed null, or didn't include the field (which then defaults to null), the buttons would become disabled. There would be no feedback on touch and you couldn't get a good idea of their enabled behavior. Using empty blocks prevents them from being disabled.

For more information on buttons and their interactions, refer to Adding Interactivity to Your App.

2. Save your lib/login.dart file.

3. Hot reload your app by pressing the r key in the Coder Server terminal. And, return to the tab displaying your application.

You should see two buttons appear: Cancel and Next.

The OverflowBar handles the layout work for you. It positions the buttons horizontally, so they appear next to one another.

Touching a button initiates an ink ripple animation, without causing anything else to happen. Let's add functionality into the anonymous onPressed: functions, so that the cancel button clears the text fields, and the next button dismisses the screen:

Add TextEditingControllers

To make it possible to clear the text fields' values, you'll add TextEditingControllers to control their text.

1. Right under the _LoginPageState class's declaration in login.dart, find the // TODO: Add text editing controllers (101). Replace it to add the controllers as final variables:

// TODO: Add text editing controllers (101) final _usernameController = TextEditingController(); final _passwordController = TextEditingController();

2. Locate the first TextField you added with the // [Name] comment. Add a controller: field and set it to the _usernameController:

// [Name] TextField( controller: _usernameController,

3. Find the next TextField with the // [Password] comment. Add a controller: field and set it to the _passwordController:

// [Password] TextField( controller: _passwordController,

Edit onPressed

1. In the CANCEL onPressed function, replace // TODO: Clear the text fields (101) with a command to clear to each controller:

// TODO: Clear the text fields (101) _usernameController.clear(); _passwordController.clear();

2. Save login.dart. Now when you type something into the text fields, hitting cancel clears each field again.

This login form is in good shape! Next, you will advance your users to the rest of the Shrine app.

Pop

To dismiss this view, you want to pop (or remove) this page (which Flutter calls a route) off the navigation stack.

1. In the ElevatedButton's NEXT onPressed: function, pop the most recent route from the Navigator by replacing // TODO: Show the next page (101) with this:

// TODO: Show the next page (101) Navigator.pop(context);

2. Save your login.dart file.

3. Lastly, open up home.dart and set resizeToAvoidBottomInset to false in the Scaffold.

4. Replace the return const Scaffold section of the code (lines 24-31) with this snippet:

return Scaffold( // TODO: Add app bar (102) // TODO: Add a grid view (102) body: Center( child: Text('You did it!'), ), // TODO: Set resizeToAvoidBottomInset (101) resizeToAvoidBottomInset: false, ); Note: If you get an error Cannot invoke a non- 'const' constructor, in app.dart file, remove const from return MaterialPageRoute code block. So it can look like builder: (BuildContext context) => LoginPage(),

Doing this ensures that the keyboard's appearance does not alter the size of the home page or its widgets.

That's it!

5. Save the home.dart.

6. Perform a hot reload in your Code Server terminal and view the app in your browser.

7. Try out the Next button. You should receive the message below in the application.

"You did it!"

Note: About buttons

• In addition to FlatButton and RaisedButton, there's OutlineButton, FloatingActionButton, IconButton, and more.
• Browse buttons and their documentation in the MDC Widgets catalog.

Click Check my progress to verify the objective. Add buttons in the lib/login.dart and replace the section of the code in the home.dart file

Task 5. Add a top app bar

Right now, if you click the "Next" button you will be able to see the home screen that says "You did it!". That's great! But now the user has no actions to take, or any sense of where they are in the app. To help with that, it's time to add navigation.

Note: Navigation refers to the components, interactions, visual cues, and information architecture that enable users to move through an app. It helps make content and features discoverable, so that tasks are easy to complete.

Learn more in the Navigation article in the Material Guidelines.

Material Design offers navigation patterns that ensure a high degree of usability. One of the most visible components is a top app bar.

Note: You may know the top app bar as a "Navigation Bar" in iOS, or as simply an "App Bar" or "Header."

To provide navigation and give users quick access to other actions, you will add a top app bar.

Add an AppBar widget

Adding the AppBar to the Scaffold's appBar: field, gives you a perfect layout for free, keeping the AppBar at the top of the page and the body underneath.

Note: Scaffold is an important widget in MaterialApps. It provides convenient APIs for displaying all sorts or common Material Components like drawers, snack bars, and bottom sheets. It can even help layout a Floating Action Button.

Learn more about Scaffold in its Flutter documentation.

1. In home.dart, add an AppBar to the Scaffold. Replace the // TODO: Add app bar (102) line with this code:

// TODO: Add app bar (102) appBar: AppBar( // TODO: Add buttons and title (102) ),

2. Save home.dart and hot reload your app by pressing the r key in your Code Server terminal.

3. Refresh your app and click Next to see the home screen.

AppBar looks great but it needs a title.

Add a text widget

1. In home.dart, add a title to the AppBar:

// TODO: Add app bar (102) appBar: AppBar( // TODO: Add buttons and title (102) title: Text('SHRINE'), // TODO: Add trailing buttons (102) ),

2. Save home.dart, perform a hot reload, and refresh your web app page to view the title.

Many app bars have a button next to the title. In the next section, you will add a menu icon to the app.

Add a leading IconButton

Note: The IconButton class is a convenient way to incorporate Material Icons in your app. It takes an Icon widget. Flutter has a whole collection of icons in the Icons class. It automatically imports the icons based on a mapping of const strings.

Learn more about the Icons class in its Flutter documentation. And learn more about the Icon widget in its Flutter documentation.

You can also add buttons to the trailing side of the title. In Flutter, these are called "actions".

Note: Leading and trailing are terms that express direction, referring to the beginning and ending of text lines in a language-agnostic way. When working in an LTR (left-to-right) language like English, leading means left and trailing means right. In an RTL (right-to-left) language like Arabic, leading means right and trailing means left.

For more information on UI Mirroring, see the Material Design guidelines on Bidirectionality.

1. While still in home.dart, set an IconButton for the AppBar's leading: field. Replace the // TODO: Add buttons and title (102) line with this code:

// TODO: Add buttons and title (102) leading: IconButton( icon: Icon( Icons.menu, semanticLabel: 'menu', ), onPressed: () { print('Menu button'); }, ),

The IconButton is placed before the title: field to mimic the leading-to-trailing order.

2. Save home.dart, perform a hot reload, and refresh your web app page to view the menu.

The menu icon (also known as the "hamburger") shows up right where you'd expect it.

Add actions

There's room for two more IconButtons.

1. Add them to the AppBar instance after the title. Replace // TODO: Add trailing buttons (102):

// TODO: Add trailing buttons (102) actions: <Widget>[ IconButton( icon: Icon( Icons.search, semanticLabel: 'search', ), onPressed: () { print('Search button'); }, ), IconButton( icon: Icon( Icons.tune, semanticLabel: 'filter', ), onPressed: () { print('Filter button'); }, ), ],

2. Save your home.dart file, perform a hot reload in your Cloud Server terminal, and refresh your web app page.

Your home screen should reflect the changes.

Now the app has a leading button, a title, and two actions on the right side. The app bar also displays elevation using a subtle shadow that shows it's on a different layer than the content.

Click Check my progress to verify the objective. Add a top app bar

Task 6. Make a card collection

Whenever multiple cards are present in a screen, they are grouped together into one or more collections. Cards in a collection are coplanar, meaning cards share the same resting elevation as one another (unless the cards are picked up or dragged, but that won't be covered within this lab).

Multiply the card into a collection

1. Make a new private function above the build() function (remember that functions starting with an underscore are private API). Replace // TODO: Make a collection of cards (102) with this code:

// TODO: Make a collection of cards (102) List<Card> _buildGridCards(int count) { List<Card> cards = List.generate( count, (int index) => Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset('assets/diamond.png'), ), Padding( padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ), ); return cards; }

2. Assign the generated cards to GridView's children field. Remember to replace everything contained in the body with this new code:

// TODO: Add a grid view (102) body: GridView.count( crossAxisCount: 2, padding: EdgeInsets.all(16.0), childAspectRatio: 8.0 / 9.0, children: _buildGridCards(10) // Replace ),

3. Save home.dart, perform a hot reload, and refresh your web app browser.

The cards are there, but they don't show anything yet. Now's the time to add some product data.

Let's unpack that code. The GridView invokes the count() constructor since the number of items it displays is countable and not infinite. But it needs some information to define its layout.

The crossAxisCount: specifies how many items across. We want 2 columns.

Cross axis in Flutter means the non-scrolling axis. The scrolling direction is called the main axis. So, if you have vertical scrolling, like GridView does by default, then the cross axis is horizontal. Learn more in Build Layouts.

The padding: field provides space on all 4 sides of the GridView. Of course you can't see the padding on the trailing or bottom sides because there's no GridView children next to them yet.

The childAspectRatio: field identifies the size of the items based on an aspect ratio (width over height).

By default, GridView makes tiles that are all the same size.

We have one card but it's empty. Let's add child widgets to our card.

4. Cards should have regions for an image, a title, and secondary text.

Update the children of the GridView:

children: <Widget>[ Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset('assets/diamond.png'), ), Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('Title'), const SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ) ],

Add product data

The app has some products with images, names, and prices. You'll add that to the widgets you have in the card already.

1. In home.dart, import a new package and some files supplied within the GitHub repo for a data model:

import 'package:intl/intl.dart'; import 'model/products_repository.dart'; import 'model/product.dart';

2. Update _buildGridCards() to fetch the product info, and use that data in the cards:

// TODO: Make a collection of cards (102) // Replace this entire method List<Card> _buildGridCards(BuildContext context) { List<Product> products = ProductsRepository.loadProducts(Category.all); if (products == null || products.isEmpty) { return const <Card>[]; } final ThemeData theme = Theme.of(context); final NumberFormat formatter = NumberFormat.simpleCurrency( locale: Localizations.localeOf(context).toString()); return products.map((product) { return Card( clipBehavior: Clip.antiAlias, // TODO: Adjust card heights (103) child: Column( // TODO: Center items on the card (103) crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) fit: BoxFit.fitWidth, ), ), Expanded( child: Padding( padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( // TODO: Align labels to the bottom and center (103) crossAxisAlignment: CrossAxisAlignment.start, // TODO: Change innermost Column (103) children: <Widget>[ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.headline6, maxLines: 1, ), SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.subtitle2, ), ], ), ), ), ], ), ); }).toList(); }

3. Change the build() function to pass the BuildContext to _buildGridCards() before you try to compile:

// TODO: Add a grid view (102) body: GridView.count( crossAxisCount: 2, padding: EdgeInsets.all(16.0), childAspectRatio: 8.0 / 9.0, children: _buildGridCards(context) // Changed code ),

4. Save home.dart, perform a hot reload, and refresh your web app browser.

The products are now showing up in the app perfectly!

Click Check my progress to verify the objective. Make a collection of cards

Congratulations!

You built the foundations for the Shrine app with Flutter-MDC!

Using basic HTML markup and just a few lines of CSS and JavaScript, the Material Components for the web library has helped you create a beautiful login page that conforms to the Material Design guidelines, and looks and behaves consistently across all devices.

Your site has a basic flow that takes the user from the sign in page to a home page, where products can be viewed. In just a few lines of code, you added a drawer and an image list to present content. The home page now has a basic structure and content.

Finish your quest

This self-paced lab is part of the Flutter Development quest. A quest is a series of related labs that form a learning path. Completing this quest earns you a badge to recognize your achievement. You can make your badge or badges public and link to them in your online resume or social media account. Enroll in this quest and get immediate completion credit. Refer to the Google Cloud Skills Boost catalog for all available quests.

Take your next lab

Continue your quest with Flutter Web and Firebase Authentication or check out these suggestions:

• Dart Functions Framework
• Getting started with Flutter Development

Google Cloud training and certification

...helps you make the most of Google Cloud technologies. Our classes include technical skills and best practices to help you get up to speed quickly and continue your learning journey. We offer fundamental to advanced level training, with on-demand, live, and virtual options to suit your busy schedule. Certifications help you validate and prove your skill and expertise in Google Cloud technologies.

Manual Last Updated September 12, 2023

Lab Last Tested September 12, 2023

Copyright 2024 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.