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 asText
,TextField
,Image
andIcon
. - 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.
