In this tutorial we will explain some basics that you will encounter frequently in the code we post here and generally in flutter development.

What is a Widget?

Widget is an abstract class for Flutter that describes the configuration for an Element.

A widget is an immutable description of part of a user interface.

Widget derives from the DiagnosticableTree class

abstract class Widget extends DiagnosticableTree

and is defined in the flutter package.

Widgets are very important to the way Flutter Framework works and is the central class hierarchy in Flutter.

You can inflate Widgets into elements. Those elements then become responsible for the management of the underlying render tree.

Widgets themselves have no mutable state (all their fields must be final).

However you can associate a mutable state with a widget. In that case you can use the StatefulWidget class, which will then create a State object via StatefulWidget.createState whenever it is inflated into an element and incorporated into the tree.

You can inlude a widget in the tree zero or more times. In particular a given widget can be placed in the tree multiple times.

Each time a widget is placed in the tree, it is inflated into an Element, which means a widget that is incorporated into the tree multiple times will be inflated multiple times.

The key property controls how one widget replaces another widget in the tree. If the runtimeType and key properties of the two widgets are operator==, respectively, then the new widget replaces the old widget by updating the underlying element (i.e., by calling Element.update with the new widget).

Otherwise, the old element is removed from the tree, the new widget is inflated into an element, and the new element is inserted into the tree.

Widget API Definition

Let's look at the API definition of the Widget class.

Here's the inheritance hierarchy:


Object
   ↳    Diagnosticable
       ↳    DiagnosticableTree
           ↳    Widget

Here's its constructor. This initializes key for subclasses.

Widget({Key key })

A widget has a property key that controls how one widget replaces another widget in the tree.

5 Classes That implement the Widget Class

Here are the 5 implementers of Widget class:

1. StatelessWidget : a widget that does not require mutable state.

2. StatefulWidget : A widget that has mutable state.

3. RenderObjectWidget : A widget that provides the configuration for RenderObjectElements, which wrap RenderObjects, which provide the actual rendering of the application.

4. ProxyWidget : A widget that has a child widget provided to it, instead of building a new widget.

5. PreferredSizeWidget : An interface for widgets that can return the size this widget would prefer if it were otherwise unconstrained.

BuildContext

In this tutorial we want to look at and explain an important class we will be using in each and every one of flutter applications, the BuildContext.

What is BuildContext?

BuildContext is an abstract class acting as a handle to the location of a widget in the widget tree.

abstract class BuildContext

It's defined in the flutter package.

It's role as an abstract class is to hold a set of methods. These methods can be used from StatelessWidget.build methods and from methods on State objects.

Normally when you are using widget builder functions like the build() method of the StatelessWidget class.

For instance here's a BuildContext object being passed to the build() method of a StatelessWidget subclass:

 @override
  Widget build(BuildContext context) {
    return MaterialApp()

Most components in Flutter are widgets. And these widgets, each of them, has it's own BuildContext. This BuildContext object will be used as the parent of the widget that is returned by the StatelessWidget.build() or the State.build() method.

  @override
  Widget build(BuildContext context) {
    // here, Scaffold.of(context) returns null
    return new Scaffold(
      appBar: new AppBar(title: new Text('Demo')),
      body: new Builder(
        builder: (BuildContext context) {
          return new FlatButton(
            child: new Text('BUTTON'),
            onPressed: () {
              // here, Scaffold.of(context) returns the locally created Scaffold
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text('Hello.')
              ));
            }
          );
        }
      )
    );
  }

ThemeData

ThemeData is a class that holds the color and typography values for a material design theme.

It resides in the flutter package and derives from the Diagnosticable class.

class ThemeData extends Diagnosticable

Normally you use this class to configure a Theme widget.

To obtain the current theme you can useTheme.of method.

MaterialApp

It is a concrete class and derives from the StatefulWidget and resides in the flutter package.

class MaterialApp extends StatefulWidget

MaterialApp makes our job easier by wrapping several widgets that are commonly required for material design applications. It builds upon a WidgetsApp by adding material-design specific functionality, such as AnimatedTheme and GridPaper.

It then configures the top-level Navigator to search for routes in the following order:

  1. For the / route, the home property, if non-null, is used.
  2. Otherwise, the routes table is used, if it has an entry for the route.
  3. Otherwise, onGenerateRoute is called, if provided. It should return a non-null value for any valid route not handled by home and routes.
  4. Finally if all else fails onUnknownRoute is called.

If a Navigator is created, at least one of these options must handle the / route, since it is used when an invalid initialRoute is specified on startup (e.g. by another application launching this one with an intent on Android).

MaterialApp also configures the observer of the top-level Navigator (if any) to perform Hero` animations.