Flutter – Material Design

 If someone wants to quickly build beautiful, scalable apps across platforms? Then Material Design is the way to go. 

What is Material design?

Material is an adaptable design system, backed by open-source code, that helps developers easily build high-quality, digital experiences. From design guidelines to developer components, Material can help developers build products faster. Material design guidelines provide best practices and user interface design. Usability and platform guidance to help make sure that our app works for all users, regardless of the platform they are using. Within the guidelines, there are components which are the building blocks that make a product usable and functional. Each component page includes guidance on how they should be used, interaction pattern, and design specifications giving you the information developer need to ensure you get it right.

And the good news is flutter also supports material design. There is all kind of Material design widgets in flutter be it buttons, expanding panels, animations and much more. In this article, we are going to how we can use flutters Material Design widgets can help developers quickly break down a design and turn it into real code that runs on both iOS and Android.

Material Design Color System

A color theme in Material refers to a restrained set of colors that define an interface. The default Material Theme incorporates vivid, colors like the primary and secondary, as well as color slots for backgrounds, surfaces, errors, and more. Defining a color theme. This way is helpful because it helps craft a consistent and rational color story that can be used globally and consistently throughout your app. This helps users perceive content and more easily know how the app works. 

One refinement of the color theme is. On Colors. On colors are named so because they appear on other elements. For example, the on background color for the below app is black, because the text that appears on the background is black, as well as other elements like icons. That also appears on the background. On colors are useful because they can help ensure that content appearing in various contexts throughout your app remains consistent and readable.

They also give you a steady global control over things like color contrast, so you don’t need to fine-tune the text on every surface with the same color as long as the corresponding on color for those surfaces meets contrast requirements. These colors can also have different emphasis levels, which can be helpful for transferring information in state-rich situations or when you create a dark theme.

Material Typography

Typography in material design is based on a type scale. A type scale is a hierarchy of type styles that can be used for various circumstances throughout a layout. The Material type scale is a mixture of 13 reusable styles that each have an intended application and meaning, all the way from big headline styles to body text captions and buttons. Working out a good type scale for your app keeps typography consistent and significant to users, while providing enough stylistic options to create a compelling appearances and character.

Type is one of the subsystems that allows you to theme Material components, customizing them to create something unique. Each component’s typography fits into a category. For example, the text on a button belongs to the button category, which is shared by the buttons in a dialog box and tab labels. So changing attributes like typeface style, size, and spacing causes a ripple effect. It customizes all the typography belonging to that category.

Below is a list of all major Material Design Widgets in flutter.

1. App structure and navigation

• AppBar
• BottomNavigationBar
• Drawer
• MaterialApp
• Scaffold
• SliverAppBar
• TabBar
• TabBarView
• WidgetsApp

2. Buttons

• ButtonBar
• DropdownButton
• FlatButton
• FloatingActionButton
• IconButton
• OutlineButton
• PopupMenuButton
• RaisedButton

3. Input and selection

• Checkbox
• Date & Time Picker
• Radio
• Slider
• Switch
• TextField

4. Dialogs, alerts and panels

• AlertDialog
• BottomSheet
• ExpansionPanel
• SimpleDialog

SnackBar

5. Information Display

• Card
• Chip
• CircularProgressIndicator
• DataTable
• GridView
• Icon
• Image
• LinearProgressIndicator
• Tooltip

6. Layout

• Divider
• ListTile
• Stepper

There are many more material design widgets available to more about then you can visit the official website. Now we will see the implementation of two material design widgets, the first is Appbar widget and the second is the Card widget.

Example 1: Appbar

main.dart file

Dart

import "package:flutter/material.dart";

// importing flutter material design library
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("GeeksforGeeks"),
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Menu Icon',
          onPressed: () {},
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.note),
            tooltip: 'Comment Icon',
            onPressed: () {},
          ),
          SizedBox(
            width: 30,
          ) //IconButton
          //IconButton
        ], //<Widget>[]
        backgroundColor: Colors.green,
        elevation: 20.0,
        //IconButton
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20)),
          //BorderRadius.only
        ), //RoundedRectangleBorder
        brightness: Brightness.light,
      ), //AppBar
      body: Center(
          //Text
          ), //Center
    ), //Scaffold
  )); //MaterialApp
}

Output: 

Explanation: In the main.dart file the first thing that we did is we imported the material design library which is going let us use material design widget which in this case are MaterialApp, Scaffold, and Appbar. After initializing the app we have the MaterialApp class which is going to hold the entire widget tree for the application. In the home parameter of the MaterialApp class, we have a Scaffold widget that basically provides the whole screen of the device to render app widgets. Then inside the Scaffold widget, we have AppBar widget which is occupying the appBar parameter. The green color in the appbar is provided the be backgroundColor property, the menu icon is provided by the leading property, the text ‘GeeksforGeeks’ is provided by the title property and at the right corner the action parameter is holding note icon and a SizedBox (to provide gap from the debug banner).  And the body of the app is blank currently. 

To know more about AppBar widget click here.

Example 2: Card

main.dart file

Dart

import 'package:flutter/material.dart';

//imported google's material design library
void main() {
  runApp(

      /**Our App Widget Tree Starts Here**/
      MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("GeeksforGeeks"),
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Menu Icon',
          onPressed: () {},
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.note),
            tooltip: 'Comment Icon',
            onPressed: () {},
          ),
          SizedBox(
            width: 30,
          ) //IconButton
          //IconButton
        ], //<Widget>[]
        backgroundColor: Colors.green,
        elevation: 20.0,
        //IconButton
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20)),
           //BorderRadius.only
        ), //RoundedRectangleBorder
        brightness: Brightness.light,
      ), //AppBar
      body: Center(

        /** Card Widget **/
        child: Card(
          elevation: 60,
          shadowColor: Colors.black,
          color: Colors.greenAccent[100],
          child: SizedBox(
            width: 300,
            height: 450,
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.green[300],
                    radius: 108,
                    child: Text(
                      "C++",
                      style: TextStyle(
                          fontSize: 100,
                          fontWeight: FontWeight.bold,
                          color: Colors.green[900]),
                    ),
                  ), //CircleAvatar
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  Text(
                    'C++ Programming Language',
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.green[900],
                      fontWeight: FontWeight.w500,
                    ), //Textstyle
                  ), //Text
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  Text(
                    'C++ is a general purpose programming language and
                    widely used now a days for competitive programming.
                    It has imperative, object-oriented and generic
                    programming features.',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.green[900],
                    ), //Textstyle
                  ), //Text
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  SizedBox(
                    width: 120,
                    child: RaisedButton(
                      onPressed: () => null,
                      color: Colors.green,
                      child: Padding(
                        padding: const EdgeInsets.all(4.0),
                        child: Row(
                          children: [
                            Icon(Icons.touch_app),
                            Text('Buy Now'),
                          ],
                        ), //Row
                      ), //Padding
                    ), //RaisedButton
                  ) //SizedBox
                ],
              ), //Column
            ), //Padding
          ), //SizedBox
        ), //Card
      ), //Center
    ), //Scaffold
  ) //MaterialApp
      );
}

Output: 

Explanation: This app is the further continuation of the previous app, in this example, we are going to add a Card widget in the body of the app, which was blank earlier. In the body parameter of the MaterialApp the parent widget is Center which is holding the Card widget. Card widget is utilizing four of its parameter in total, which are:

• elevation : It uplifts the card from its background by providing a bit of black shadow. Here it is 60.
• shadowColor : It provides color to the shadow. The above property also uses the color provided by this parameter. Here the shadow color is black.
• color: As the name suggests it provide the background color for the card. In this case, the color of the card is greenAccent[100].
• child: This property would hold all the content of the app. Here the SizedBox widget with dimensions 300X450 is going to hold all the content of the app which is arranged by a Column widget. Inside the Column widget, there are CircularAvatar, two Text widgets, and a RaisedButton all separated by SizedBox of height 10.

These were just two examples of the material design widget in flutter, to see more examples you can click on the link provided in the above list.