MDC-102: Material structure and layout

Material Design offers navigation formats that guarantee great ease of use. One of the most visible components is the upper application bar.

Create a Google Play developer account

Inform your personal information, the address of your choice and your password.

Accept the general conditions of sale (GTC).

Add a nice photo of yourself.

Create a Google Play developer account

The procedure for creating a Google Play developer account is much simpler than at Apple.

Connect with your Gmail address.

Accept the GTC.

Adjust registration fees: a single payment of 25 euros to publish all the applications of your choice !

Inform the information relating to your account: developer name, email address and telephone number.

This has answered your question ?

Thank you for the comments there was a problem to submit your comments. please try again later.

Last update on November 9, 2021

Associated articles

• Create an application on Google Play Console
• Generate the Android P12 certificate
• Export the APK or AAB file
• Publish an Android application
• Publish an Android app outside the Play Store
• Publish on Google Play Store

MDC-102: Material structure and layout

Material Components (MDC) helps developers implement Material Design. Designed by a team of engineers and user experience specialists at Google, MDC offers dozens of elegant and functional user interface components. It is available for Android, iOS, the web and flutter.material.IO/Develop.

In the MDC-101 programming workshop, you used two Material Components elements to create a connection page: text fields and buttons comprising “ink” animations. On these bases, let us enrich our application by adding navigation, structure and data.

Workshop objectives

In this programming workshop, you will create a home screen for Shrine, an e-commerce application for the sale of clothing and items for the house. This screen will contain:

• A higher application bar
• A list of products in the form of a grid

Please note that this programming workshop was replaced by Material 3, with the exception of screenshots. They nevertheless convey the same information.

This programming workshop is the second of the four workshops that will help you create an application for a product called sanctuary. We recommend that you follow all the programming workshops in order, to advance in the tasks little by little. You will find your programming workshops here:

• MDC-101 FLUTTER: Basic principles of the material components
• MDC-103 Flutter: Use of themes of Material Design (color, shapes, elevation and type)
• MDC-104 Flutter: Advanced Material Design components

Material Flutter Material Components and Subsystems in this programming workshop

• Upper
• Grids
• Cards

In this programming workshop, you will use the default components provided by Material Flutter. You will learn to customize them in the MDC-103 section: Use of themes of Material Design (color, shapes, elevation and type).

How would you assess your level of experience in development with Flutter ?

2. Configure the Flutter development environment

For this workshop, you need two software: the Flutter SDK and a publisher.

You can run the programming workshop on one of the following devices:

• An Android or physical iOS device connected to your computer and set in developer mode.
• The iOS simulator (XCODE tools to install).
• The Android emulator (which must be configured in Android Studio).
• A browser (Chrome is required for debugging).
• As Windows, Linux or MacOS desktop. You must develop your application on the platform where you plan to deploy it. For example, if you want to develop a Windows desktop application, you must do it on Windows to access the appropriate compilation chain. Also learn about the specific requirements for operating systems, which are detailed on Docs.flutter.Dev/Desktop.

3. Download the departure app for the programming workshop

You have already followed the MDC-101 workshop ?

If you have finished the MDC-101 programming workshop, your code should be ready to start this workshop. Go to the next stage : Add a higher application bar.

You start from scratch ?

Download the starting workshop departure application

The starting application is in the Material-Component-Flutter-Codelabs-102-Starter_and_101-Complete/MDC_100_Series .

… Or clone the workshop from Github

To clone this programming workshop from GitHub, run the following commands:

Git Clone https: // github.Com/Material-Components/Material-Components-Flutter-Codelabs.Git CD MATERIAL-COMPONENTS-FLUTTER-CODELABS/MDC_100_Series Git Checkout 102-Starter_and_101-Complete

For help, see the cloning section from GitHub

Choose the correct branch

The MDC-101 programming workshops at 104 rely on each other. So when you finish the code for the MDC-102 workshop, it becomes the starting code of the MDC-103 workshop. The code is divided into several branches, which you can display the list using this command:

Git branch –list

To display the finished code, go to the 103-Starter_and_102-Complete branch .

Open the project and execute the application

1. Open the project in the publisher of your choice.
2. Follow the instructions concerning the publisher you have chosen. They are accessible to the “RUN The App” paragraph (execute the application) on the Get Started> Test Drive page (first steps> Test).

Successful operation. The sanctuary connection page from the MDC-101 programming workshop must be displayed on your device.

Now that the connection screen is in place, let’s add some products to the application.

4. Add a higher application bar

For the moment, if you click on the “Next” button, the home screen is displayed with the message “You Did It!” (You succeeded.)). Perfect. However, our user has nothing to do and does not know where he is in the application. To help you, it’s time to add navigation.

There navigation refers to components, interactions, visual indicators and information architecture that allow users to navigate in an application. It allows you to discover content and features, and to easily perform tasks.

To find out more, consult the article devoted to navigation in the Material Design instructions.

Material Design offers navigation formats that guarantee great ease of use. One of the most visible components is the upper application bar.

You may know this element under the name “Navigation bar” under iOS, or simply “Application bar” or “Header”.

To offer users quick access to other actions, let’s add a higher application bar.

Add an appbar widget

In Home.Dart, add an appbar to “Scaffold”, then delete the Const highlighted:

Return Const Scaffold (// Todo: Add App Bar (102) Appbar: Appbar (// Todo: Add Buttons and Title (102)), 

The addition of theAppbar At the appbar field: scaffolding allows us to obtain a perfect and free layout, leaving the application bar at the top of the page and below the body.

Scaffold is an important widget in Materialapps. It provides practical APIs to display all kinds of current matters components, such as panels, “snackbar” notification bars and Bottom Sheet elements. It even facilitates the placement of a floating action button.

Consult the Flutter documentation to find out more about Scaffold.

Record the project. Once the Shrine is updated, click on Next (Following) to display the home screen.

The element is well positioned, but it lacks a title.

Add a text widget

In Home.Dart, add a title to the Appbar application bar:

// Todo: Add App Bar (102) Appbar: Appbar (// Todo: Add Buttons and Title (102) Title: Const Text ('Shrine'), // Todo: Add Trailing Buttons (102) 

Record the project.

You may have noticed variations for each platform. The Material Design system takes into account that each platform (Android, iOS, Web) is different and that user expectations are different. For example, on iOS, the titles are almost always centered. This is the default behavior provided by Uikit. On Android, they are lined up on the left. Therefore, if you use an emulator or an Android device, your title should be aligned on the left. In the case of a simulator or an iOS device, it must be centered.

To find out more, consult this article on adaptation to different platforms with Material Design.

Many application bars have a button next to the title. Add a menu icon to our application.

Add an iconbutton button at the start of the line

Always in Home.Dart, define an iconbutton element for the leading field: of the appbar application bar. (Place it before the Title field: in accordance with the start from start to the end of the line):

 // todo: add buttons and title (102) leading: iconbutton (icon: const icon (icons.Menu, Semanticlabel: 'Menu',), ONPRESSED: () < print('Menu button'); >, )), 

Record the project.

The menu icon (also called “hamburger”), appears at the desired location.

The class Iconbutton is a practical way to integrate material icons into your application. She uses a widget Icon. Flutter has a complete collection of icons in the classroom Icons. Icons are automatically imported according to “Const” channel mappings.

To find out more about the Icons class, see the Flutter documentation. To find out more about the icon widget, see the Flutter documentation.

You can also add buttons at the end of the line. In Flutter, these buttons are called “actions”.

Terms beginning And END express the meaning of reading, regardless of the language concerned. When you work in a tongue reading from left to right, such as English, beginning means to the left And END means to the right. In a language that reads from right to left, like Arabic, the term beginning means to the right, And END means to the left.

To find out more about the reversal of the user interface, consult the Material Design instructions on bidirectionality.

Add actions

There is enough room for two other iconbutton elements.

Add them to the Appbar instance after the title:

// todo: add trailing buttons (102) Actions: [iconbutton (icon: const icon (icons.Search, Semanticlabel: 'Search',), Ontpresd: () < print('Search button'); >, ), Iconbutton (icon: Const icon (icons.tune, semanticlabel: 'filter',), onpresd: () < print('Filter button'); >, ),], 

Record the project. Your home screen should arise as follows:

The application now has a button at the start of the line, a title and two actions on the right. The application bar also has an effect ofelevation due to a slight shade indicating that it is at a different level from that of the content.

In an icon class, the field Semanticlabel is a common way to add accessibility information to Flutter. It is a system very close to the Android content wording and Uiaccessibility functionality on iOS Accessibilitylabelbel . You will find it in many courses.

The information contained in this field makes it possible to provide information on screen readers on the role of this button.

If a widget does not have a Semanticlabel field :, you can encapsulate it in a widget Semantics. To find out more about the Semantics widget, see the Flutter documentation.

5. Add a sheet in a grid

Now that our application is a little more structured, let us organize its content by placing them in files.

THE cards are independent elements that display the content and actions associated with a given subject. They offer a flexible way to present similar content in the form of a collection.

To find out more, see the article devoted to files in the Material Design instructions.

To find out more about the Card widget (sheet), consult the article on the creation of layouts in Flutter.

Add a gridview widget

Let’s start by adding a sheet under the upper application bar. Currently, the widget Card (Sheet) does not contain enough information to position yourself visibly. We will therefore encapsulate it in a widget Gridview.

Replace the center in the body of the SCAFFOLD element with a GRIDVIEW widget:

// todo: add a grid view (102) body: gridview.Count (CrossaxisCount: 2, Padding: Const Edgeinsts.All (16.0), Childaspectratio: 8.0/9.0, // Todo: Build A Grid of Cards (102) Children: [Card ()],),), 

Let’s analyze this code. The Griver widget calls the manufacturer Count (), because the number of elements it displays can be counted and is not infinite. But he needs additional information to define his layout.

The CrossaxisCount variable: indicates the number of elements per line. We want to get two columns.

L’transversal axis in Flutter corresponds to the axis that we do not scroll. The sense of scrolling is called main axis. If you use vertical scrolling, as is the default case with GridView, the transverse axis is horizontal.

To find out more, see the page dedicated to creating layouts.

The Padding field: defines a free space on the four sides of the GridView widget. Of course, this margin is not visible as a result of the element or under it, because no child GridView has yet been placed next to this element for the moment.

The Childaspecto field: identifies the size of the elements in the form of proportions (width on height).

By default, GridView creates blocks of identical size.

We have a sheet, but it is empty. Add children’s widgets to this sheet.

Put the contents

The sheets must include areas for an image, a title and secondary text.

Update children from the GridView widget:

// todo: build a grid of cards (102) Children: [Card (Clipbehavior: clip.Antialias, child: column (crosSaxisalignment: crosSaxisalignment.Start, Children: [Aspectratio (aspectratio: 18.0/11.0, child: image.Asset ('Assets/Diamond.png '),), padding (padding: Const edgeinsts.fromltrb (16.0, 12.0, 16.0, 8.0), child: column (crossaxisalignment: crossaxisalignment.Start, Children: [Text ('Title'), Const Sizedbox (Height: 8.0), Text ('Secondary text'),],),),],),)]], 

This code adds a column widget (column) which allows you to have children’s widgets vertically.

The Crossaxisalignment parameter: Field specifies the crossaxisalignment value.Start, which means “align the text on the ‘start of the line'” side “.

The widget Aspectratio defines the proportions of the displayed image, regardless of the type of image provided.

The element Padding defines a margin for the text.

The two widgets Text one above the other are placed and separated by eight empty space points (Sizedbox)). We create another element Column to give them interior margins.

Record the project.

In this overview, you can see that the sheet is positioned with a margin, its corners are rounded and it projects a shadow (representing its elevation). The whole form is called “container” in the Material Design system (not to be confused with the widget class called container).

Apart from the container, all the elements of the sheets are optional in Material. You can add header text, a sticker or an avatar, a subtitle text, separators, and even pimples and icons.

To find out more about the content of the sheets, consult this article in the Material Design instructions.

The sheets are generally displayed in a collection with other sheets. Arrange them in the form of a collection in a grid.

6. Create a collection of files

When several sheets are present on a screen, they are grouped in one or more collections. The files of a collection are coplanar: they have all the same elevation at rest (that is to say when they are not selected or moved, which we will not do here).

Create a collection of files

For the moment, our sheet is positioned inside the Children field: GridView grid. This leads to a large amount of nested code that can be difficult to read. Let us transform this part of the code into a function allowing to generate as many empty sheets as necessary and to return a list of files.

Create a private function above the Build () function (Remember that the functions starting with an underlining line are private APIs):

// todo: make a collection of cards (102) list _buildgridcards (int cent) < Listcards = List.generate( count, (int index) < return Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ 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: const [ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ); >, ); Return Cards; > 

Assign the files generated at the Children field of the GridView Widget. do not forget to Replace all the elements contained in the GRIDVIEW WIDGET with this new code ::

// todo: add a grid view (102) body: gridview.Count (CrossaxisCount: 2, Padding: Const Edgeinsts.All (16.0), Childaspectratio: 8.0/9.0, children: _buildgridcards (10) // Replace), 

Record the project.

The cards are present, but they do not display anything for the moment. The time has come to add product data.

Add product data

The application contains some products with images, names and prices. Add this to the widgets already present in the file

Then in Home.Dart, import a new package and some files provided for a data model:

Import 'Package: Flutter/Material.Dart '; Import 'Package: Intl/Intl.Dart '; Import 'Model/Product.Dart '; Import 'Model/Products_rePository.Dart '; 

Finally, modify _buildgridcards () to retrieve product information and use this data in the files:

// Todo: Make A Collection of Cards (102) // Replace this Entire Method List _buildgridcards (BuildContext Context) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Final Themedata Theme = Theme.of (context); Final Numberformat Formatter = Numberformat.Simplecurrent (local: premises.Localof (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: [ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) ), ), Expanded( child: Padding( padding: const 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: [ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.titleLarge, maxLines: 1, ), const SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.titleSmall, ), ], ), ), ), ], ), ); >)).Tolist (); > 

NOTICED : Wait before launching the compilation and execution. There remains a modification to make.

To format the text, we use theme data Themedata from the value BuildContext current.

To learn more about the formatting of the text, consult the article on typography in the Material Design instructions. To find out more about formatting from a theme, continue after this programming workshop with MDC-103: Use of themes of Material Design (color, shapes, elevation and type).

Also modify the build () function to transmit the value BuildContext at _Buildgridcards () before launching the compilation:

// todo: add a grid view (102) body: gridview.Count (CrossaxisCount: 2, Padding: Const Edgeinsts.All (16.0), Childaspectratio: 8.0/9.0, Children: _Buildgridcards (Context) // Change code), 

Restart the hot application.

You may notice that we do not add vertical space between the files. Because they have four margins by the top and bottom have.

Record the project.

The produced data are displayed, but the images are surrounded by an unnecessary space. By default, the images are drawn with the field Boxfit defined .Scaledown (in this case). Replace this value with .Fitwidth so that she can zoom in and remove the unnecessary space.

Add a Fit field: like the Boxfit value.Fitwidth:

 // todo: Adjust the box size (102) Fit: Boxfit.fitwidth, 

Our products are now perfectly displayed in the application.

7. Congratulations !

Our application offers basic operation allowing the user to go from the connection screen to a home screen where the products are displayed. A few lines of code were enough to add a higher application bar (with a title and three buttons) and files (to present the content of our application). The home screen obtained is simple and functional, and has a basic structure and usable content.

The completed version of the MDC-102 application is available in the 103-Starter_and_102-Complete branch .

You can compare your version on the page with the application of this branch.

Following steps

With the application bar, the sheet, the text field and the button located at the top of the page, we have now used four main components of the Material Flutter library. To find out more, see the catalog of material components.

Even if our application works perfectly, it does not reflect a brand identity or a particular point of view. In the MDC-103 workshop: Use of themes of Material Design (color, shapes, elevation and type), we will personalize the style of these components to express a modern and dynamic brand.

The realization of this programming workshop asked me for a time and reasonable efforts

Totally agree

Neither agree, nor agree

not agree at all

I want to continue using Material Components

Totally agree

Neither agree, nor agree

not agree at all

Unless otherwise indicated, the content of this page is governed by a Creative Commons Assignment 4 license.0, and code samples are governed by a Apache 2 license.0. For more information, see the rules of the Google Developers site. Java is a registered trademark of Oracle and/or its affiliated companies.