Flutter II: Material Design — [Flutter 1.0]

In this second post about Flutter we are just about to see the easiness and the tools this framework provides to create Material Design based applications. To accomplish this, Flutter provides the MaterialApp Widget that encapsulates a group of widgets meant to be used in Material Design.

Updated to Flutter 1.0 — December 2018

Index

• Flutter I: Intro And Install — [Flutter 1.0]
• Flutter II: Material Design — [Flutter 1.0]
• Flutter III: Lists and Items — [Flutter 1.0]
• Flutter IV: MPV Architecture — [Flutter 1.0]
• Flutter V: Material Design II — [Flutter 1.0]

Before explaining this Widget and see some samples, we will better learn the differences between the two different type of widgets that can be created in Flutter first. Any of the widgets will extend StatefulWidget or StatelessWidget most of the time.

The difference between them is about their states persistence in the future. By the time we want to make a Widget not to change its state internally (“immutable”), StatelessWidget should be used. On the opposite, StatefulWidget is the right choice in order to get a “mutable” Widget. A state must be associated to the StatefulWidget which is the one keeping the object.

The reason why, is because both objects' life-cycles are different. A Widget is something temporary but, in the other hand a State will remain between different calls to the build method. This method is where the user interface is created either for StatelessWidget or StatefulWidget.

EXPLAINING MUTABLE AND IMMUTABLE WIDGETS

An immutable Widget example could be a TextWidget, its constructor takes the text to show and Text is internally stored as a final attribute. This attribute can´t change because the Widget is temporary and its state is not stored.

On the opposite, a mutable Widget example could be a list of items. This list will contain the items internally, if this items are retrieved through network consuming a service, the group of items will grow in each call so, the Widget becomes mutable in time an its state must be stored.

From now on we will create a Flutter application example step by step, you can get the code in this repository. This repo contains several folders with projects about each step reviewed. This post is related to step 1.

MATERIALAPP WIDGET

It provides a Material Design oriented layout. In order to use it, we need to create a new instance inside the runnApp method.

Some MaterialApp attributes:

• title - Application title
• theme - The theme that will be used, it has some other attributes to be configured such as primarySwatch, brightness, primaryColor and accentColor among others. In the example above only a primarySwatch is specified using Colors class, which internally implements Material Design color specs. Specifically using Colors.blue (map containing colors for blue) makes the blue palette colors to be defined in the application. Following posts will show how easy is changing a Flutter application theme.
• home - The first screen to be shown in the app must be specified inside this attribute. Flutter screens are distributed in routes, in this case home represents ‘/’. Routes may be configured using routes attribute that will be covered when Drawers are explained.

Next step is creating home, to do so, both StatelessWidget and StatefulWidget examples will be provided.

STATELESSWIDGET

Build a new StatelessWidget and use it as a Material app home attribute can be done the following way.

Tip: This code is quite similar to Java. About this._appBarTitle instruction: ‘_’ character is used to define variables as private. ‘this’ makes the constructor to auto-asign the value to the attribute. It could be the equivalent in Java to coding this._appBarTitle = appBarTitle inside the constructor´s body.

So, we extended StatelessWidget because _appBarTitle attribute is final so the class is immutable and there is also a build method that returns a Widget.

Build method in the example above is returning a Scaffold which is a Widget implementing a Material Design layout basic structure. This layout, among other things, has an attribute called appBar that receives an AppBar object that has an attribute called title and another attribute called body which represents the rest of the screen but the AppBar.

Modify MaterialApp home attribute from the example above and run the application.

home: new StatelessWidgetExample(“Hello, World”)

STATEFULWIDGET

Let´s do the same now using a StatefulWidget.

Inside StatefulWidgetExample _appBarTitle attribute is stored, super constructor is called with a key optional value (using brackets {} means the parameter is optional) and returns through createState method the state associated to the view build method.

Inside this class´ build method, now a floatinButton is added and by the time it is pressed the private method _incrementCounter will be called. Inside incrementCounter setState method must be executed in order to invalidate the Widget so it can be build again and also to increment the counter using a lambda function as a parameter.

When updating the state, the build method is called again and another text is build with the new amount of times the button was pressed.

FloatingButton attribute is part of the layout offered by Scaffold, which places the FAB in the left lower corner using Material Design style in sizes and metrics. We also add a tooltip to the FAB so it shows some help when it is pressed and also an icon. Icons class has a reference to Material Design icons.

Update the main to use the new Widget and run the application again.

home: new StatefulWidgetExample(“Hello, World”)

TO SUM UP

This post have gone further introducing Material Design in view creation using MaterialApp and Scaffold widgets. Also differences between the two main Widget types StatelessWidget and StatefulWidget.

The whole code can be find here. This repository stores two .dart files corresponding to a StatelessWidget and a StatefulWidget sample.

Following posts will go deeper in Widget construction, to be precise in lists and their items.

If you enjoyed reading this, please click the heart icon below. This will help to share the story with others.