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

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.

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.