What is Material Design in flutter?

Material design in Flutter refers to an adaptable design system. However, if we don’t explain this statement a little further, it really doesn’t make any sense if you’re a beginner.

To sum up, with the help of Material design system we create Widgets in Flutter.

What are Widgets?

It says that in Flutter, everything is Widgets.

Firstly, widgets are classes written in Dart programing language. As a result, widgets follow Dart coding guidelines. However, we don’t have to worry about this now.

With the help of Material design system we build myriad of widgets. At some point we may feel the widgets are countless.

As there are lots of different types of Widgets that Flutter come with. Besides, we can make our custom widgets.

Some of the default widgets are visually stunning. We use them to give users visually rich experience.

Secondly, widgets may have behavioral patterns, such as a widget may maintain its state. It can inherits from its parent, or maintains it itself, or passes state to its child. When state changes, certainly the behavior changes.

Finally, we need widgets that are motion rich. That means it may use animation.

However, all widgets don’t have Material components widgets, like MaterialApp widget as its ancestor. We’ll discuss that later and see which widgets don’t care about Material components widgets.

But, at present, we’ll show you how material design widgets affect a flutter app.

If we don’t understand that concept, as a beginner we’ll stumble at the very beginning.

Let’s run the following code. All we want is to display a TextButton widget on the screen,

void main() {
  runApp(
    Center(
      child: TextButton(
        style: TextButton.styleFrom(
          textStyle: const TextStyle(fontSize: 20),
        ),
        onPressed: () {},
        child: const Text('Enabled'),
      ),
    ),
  );
}

When we ran the app, it should have displayed the text button, which is a widget, on the screen.

However, that didn’t happen. It gave us a long message that basically was an error message.

We can read the same message on our console.

What does that say?

An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:40089/ituDJNtr1rE=
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building _InkResponseStateWidget(gestures: , mouseCursor:
ButtonStyleButton_MouseCursor, clipped to BoxShape.rectangle, dirty, state:
_InkResponseState#a0527):
No Directionality widget found.
_InkResponseStateWidget widgets require a Directionality widget ancestor.
The specific widget that could not find a Directionality ancestor was:
_InkResponseStateWidget
The ownership chain for the affected widget is: “_InkResponseStateWidget ← InkWell ←
DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#679ad ink renderer] ←
NotificationListener ← CustomPaint ← _ShapeBorderPaint ← PhysicalShape
← _MaterialInterior ← ⋯”
Typically, the Directionality widget is introduced by the MaterialApp or WidgetsApp widget at the
top of your application widget tree. It determines the ambient reading direction and is used, for
example, to determine how to lay out text, how to interpret “start” and “end” values, and to resolve
EdgeInsetsDirectional, AlignmentDirectional, and other *Directional objects.
The relevant error-causing widget was:
TextButton TextButton:file:///home/ss/Documents/development/flutter_artisan/lib/main.dart:5:11

Quite a big error message, a beginner may stumble to decipher the meaning.

However, a seasoned flutter developer can take a look and know the summary. To sum up, the long error message says, while running the app you didn’t use Material components widgets as an ancestor of the TextButton widget.

It means we should have wrapped the TextButton with a MaterialApp widget.

What is MaterialApp in Flutter?

For any material design related widgets, this convenience widget, MaterialApp plays a key role. MaterialApp in Flutter wraps a number of widgets that we need to design any flutter app.

There are lots of material-design specific functionalities that we need while building a flutter app.

If you compare convenience, MaterialApp is more convenient than WidgetsApp. Besides adding design-specific functionalities it adds styling, color, controlling sizes and many more.

As per as convenience is concerned, after MaterialApp, we need Scaffold widget that implements material design specific layout.

Therefore, we need to wrap the TextButton widget with MaterialApp and Scaffold widgets.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material Design'),
        ),
        body: Center(
          child: Column(
            children: [
              TextButton(
                style: TextButton.styleFrom(
                  textStyle: const TextStyle(
                    fontSize: 20,
                  ),
                ),
                onPressed: null,
                child: const Text(
                  'Text Button Disabled',
                ),
              ),
              const SizedBox(height: 30),
              TextButton(
                style: TextButton.styleFrom(
                  textStyle: const TextStyle(
                    fontSize: 20,
                  ),
                ),
                onPressed: () {},
                child: const Text(
                  'Text Button Enabled',
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

Now, as a result, we can run the flutter app safely.

Why the first TextButton looks different than the second one?

That’s a completely different issue. We’ll discuss it later.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter