Widgets

Widgets are the building blocks of the Flutter UI, everything is a widget. Widgets are UI elements, you put together, like building blocks, to build your UI. For reference, you can see all available widgets in the Widgets Catalog.

Stateful vs Stateless

The first thing you need to know about widgets, is that they can be Stateful or Stateless.

StatefulWidgets: are widgets that the user can interact with, and hence change its state. Examples of these widgets are TextField, Checkbox, Slider and so forth.

An Image is Stateful widget. You might expect it to be stateless, but since it can be loading from an external source, it will update its state based on success.

StatelessWidgets: are widgets that have no internal state to manage, and are only updated when the UI is refreshed, such as when setState() is called. Examples of these widgets include; Text or Icon.

A Button is also a Stateless widget, because it doesn’t have any mutable state, it only raises an event if pressed, but the widget itself does not change based on user input.

Layout Widgets

All apps start with laying out widgets, and for this, they are available layout widgets. They come in two flavors, single-child layout widgets:

Container – a convenience widget, that includes sizing, margin, padding and positioning properties

Center – centers its child widget, within it

Padding – applies padding around a child widget

Also available, are multi-child layout widgets, that include:

ListView – scrollable list of widgets

Stack – used for overlaying widgets

Row / Column – layout widgets in a horizontal or vertical direction

Themes

Flutter doesn’t use any native controls, they are widgets that mimic the native look and feel of platform specific controls. These are under Material Components (Android-like) and Cupertino (iOS-like).

Material is a very common app design, and has the largest selection of Widgets. With Material components you can create things such as:

• TabBar
• Drawer
• Appbar
• BottomNavigationBar

If you need to change the Widget based on platform, it is recommended you create a new Widget, that returns the relevant Widget.

class DialogWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    if (Platform.isIOS)
      return new CupertinoDialog(....);
    if (Platform.isAndroid)
      return new AlertDialog(....);
  }
}

Other Widgets

Flutter contains many other Widgets that let you do many things.

• Control Widgets
  These are common Widgets, you will likely use a lot of, such as Text, TextField, Image and Icon.
• Animation
  Sliding, sizing, fade and more that lets you animation any number of other Widgets.
• Accessibility
  Semantics, allows annotation of a Widget with a description.

Check out the Widgets Catalog for a complete list of widgets.