Problem

You want to know how to use components in Flutter.

Solution

Widgets are everywhere in Flutter.

Discussion

If you have been involved in development of user interface, you should be familiar with concepts like widgets or components. These concepts represent reusable building blocks to create user interface. A good user interface library should have a large number of high-quality and easy-to-use components. Buttons, icons, images, menus, dialogs, and form inputs are all examples of components. Components can be big or small. Complicated components are usually composed of small components. You can create your own components by following the component model. You can also choose to share your components to the community. A good eco-system of components is a key factor for a user interface library to be successful.

Flutter uses widgets to describe reusable building blocks in the user interface. Comparing to other libraries, widget in Flutter is a much broader concept. Not only common components like buttons and form inputs are widgets, layout constraints are also expressed as widgets in Flutter. For example, if you want to place a widget in the center of a box, you simply wrap the widget into a Center widget. Widgets are also used to retrieve context data. For example, DefaultTextStyle widget gets the TextStyle applies to un-styled Text widgets.

Widget in Flutter is an immutable description of a part of the user interface. All fields of a widget class are final and set in the constructor. Widget constructors only have named parameters. A widget can have one or many widgets as the children. Widgets of a Flutter app creates a tree-like hierarchy. The main() method of a Flutter app’s entry point file uses the runApp() method to start the app. The only parameter of runApp() is a Widget object. This Widget object is the root of the app’s widgets tree. Widgets are only static configurations that describe how to configure a subtree in the hierarchy. To actually run the app, we need a way to manage instantiation of widgets.

Flutter uses Element to represent an instantiation of a Widget at a particular location in the tree. A Widget can be instantiated zero or many times. The process to turn Widgets to Elements is called inflation. Widget class has a createElement() method to inflate the widget to a concrete instance of Element. Flutter framework is responsible for managing the lifecycle of elements. The widget associated with an element may change over time. The framework updates the element to use the new configuration.

When running the app, Flutter framework is responsible for rendering elements to create a render tree, so the end user can actually see the user interface. A render tree is composed of RenderObjects with the root of a RenderView. If you are using Android Studio, you can actually see the widgets tree and the render tree in Flutter Inspector view. Select View ➤ Tool Windows ➤ Flutter Inspector to open the Flutter Inspector view. Figure 4-1 shows the widgets tree in Flutter Inspector. The top panel shows the widgets tree, while the bottom panel shows the details of a widget.

Figure 4-2 shows the render tree in Flutter Inspector. The root is a RenderView.

Problem

You want to access information related to a widget in the widgets tree.

Solution

WidgetBuilder functions have a BuildContext parameter to access information related to a widget in the widgets tree. You can see BuildContext in StatelessWidget.build() and State.build() methods .

Discussion

Problem

You want to create a widget that has no mutable state.

Solution

Extend from StatelessWidget class.

Discussion

Problem

You want to create a widget that has mutable state.

Solution

Extend from StatefulWidget class.

Discussion

Problem

You want to propagate data down the widgets tree.

Solution

Extend from InheritedWidget class .

Discussion

When building a subtree of widgets, you may need to propagate data down the widgets tree. For example, your root widget of a subtree may define some context data, for example, configuration data retrieved from the server. Other widgets in the subtree may also need to access the context data. One possible way is to add the context data to a widget’s constructor, then propagate the data as constructor parameter of children widgets. The major drawback of this solution is that you need to add the constructor parameter to all widgets in the subtree. Even though some widgets may not actually need the data, they still need to have the data to pass to their children widgets.

A better approach is to use InheritedWidget class. BuildContext class has an inheritFromWidgetOfExactType() method to get the nearest instance of a particular type of InheritedWidget. With InheritedWidget, you can store the context data in an InheritedWiget instance. If a widget needs to access the context data, you can use inheritFromWidgetOfExactType() method to get the instance and access the data. If an inherited widget changes state, it will cause its consumers to rebuild.

Problem

You want to display some text.

Solution

Use the Text and RichText widgets .

Discussion

Almost all apps need to display some text to the end users. Flutter provides several classes related to text. Text and RichText are the two widgets to display text. In fact, Text uses RichText internally. The build() method of Text widget returns a RichText instance. The difference between Text and RichText is that Text uses the style from the closest enclosing DefaultTextStyle object, while RichText requires explicit style.

Text

TextSpan

RichText

RichText always uses TextSpan objects to represent text and styles. RichText() constructor has a required named parameter text of the type TextSpan. It also has optional named parameters textAlign, textDirection, softWrap, overflow, textScaleFactor, maxLines, and locale. These optional named parameters have the same meaning as Text() constructor shown in Table 4-2.

Problem

You want the displayed text to have different styles.

Solution

Use TextStyle to describe styles.

Discussion

FontWeight class defines values w100, w200, w300, w400, w500, w600, w700, w800, and w900. FontWeight.w100 is the thinnest, while w900 is the thickest. FontWeight.bold is an alias of FontWeight.w700, while FontWeight.normal is an alias of FontWeight.w400. FontStyle is an enum type with two values italic and normal. TextBaseline is an enum type with values alphabetic and ideographic.

Problem

You want to display images loaded from network.

Solution

Use Image.network() with the image URL to load and display an image.

Discussion

All downloaded images are cached regardless of HTTP headers. This means that all HTTP cache control headers will be ignored. You can use cache buster to force cached images to refresh. For example, you can add a random string to the image URL.

If extra HTTP headers are required to load the image, you can specify the headers parameter of type Map<String, String> to provide these headers. A typical use case is to load protected images that require HTTP headers for authentication.

Problem

You want to use icons.

Solution

Use Icon to show icons from Material Design or icon packs from community.

Discussion

Icons are used extensively in mobile apps. Comparing to text, icons take less screen estate to express the same semantics. Icons can be created from font glyphs or images. The Icon widget is drawn with a font glyph. A font glyph is described with IconData class. To create an IconData instance, the Unicode code point of this icon in the font is required.

Icons class has a number of predefined IconData constants for icons in Material Design (https://​material.​io/​tools/​icons/​). For example, Icons.call is the IconData constant for the icon named “call”. If the app uses Material Design, then these icons can be used out of box. CupertinoIcons class has a number of predefined IconData constants for iOS-style icons.

Problem

You want to use buttons with text.

Solution

Use button widgets FlatButton, RaisedButton, OutlineButton, and CupertinoButton.

Discussion

FlatButtons should be used on toolbars, in dialogs, in cards, or inline with other content where there is enough space to make buttons’ presence obvious. RaisedButtons should be used where using space is not enough to make the buttons stand out. OutlineButton is the cross between RaisedButton and FlatButton. OutlineButtons can be used when neither FlatButtons nor RaisedButtons are appropriate.

Problem

You want to use buttons with icons.

Solution

Use IconButton widget, FlatButton.icon(), RaisedButton.icon(), and OutlineButton.icon().

Discussion

There are two ways to create a button with an icon. If only the icon is enough, use IconButton widget. If both the icon and text are required, use constructors FlatButton.icon() , RaisedButton.icon() , or OutlineButton.icon() .

Problem

You want to add placeholders to represent widgets that will be added later.

Solution

Use Placeholder.

Discussion

Before implementing the interface of an app, you usually have a basic idea about how the app looks like. You can start by breaking down the interface into many widgets. You can use placeholders to represent unfinished widgets during development, so you can test the layout of other widgets. For example, if you need to create two widgets, one displays at the top, while the other one displays at the bottom. If you choose to create the bottom widget first and use a placeholder for the top widget, you can see the bottom widget in its desired position.