This page describes some of the widgets available in Flutter.
Flutter uses a layered approach. At the highest level we provide
Material components. These are implemented
material library is implemented in terms of the
That library in turn is implemented in terms of the
and so forth.
Even within each library, we use a layered approach. For example, the
widget is implemented in terms of lower-level widgets from the same
library, such as
A multi-purpose widget which can apply padding to its child, draw decorations (e.g. borders or shadows) around the padding, and whose width and height can be set.
The following widgets allow you to arrange a series of children.
Layout a list of child widgets on top of each other from back to front.
Arranges children one after the other, and scrolls if necessary.
Positioning and sizing
The following widgets allow you to position and size other widgets.
Center the child widget both horizontally and vertically within the space occupied by this widget.
Surround the child with empty space on the top, right, bottom, and left according to the given EdgeInsets.
Force the child widget to have a particular width or height (or both).
Force the child widget's width and height to have the given aspect ratio, expressed as a ratio of width to height.
Apply the given matrix to the child before painting the child. This widget is useful for adjusting the visual size and position of a widget without affecting layout.
If the child widget has a baseline of the given type, position the child such that its baseline is at a given number of logical pixels from the top of this widget.
These widgets apply visual effects to the children without changing their layout, size, or position.
Draw the given BoxDecoration surrounding the child widget.
Adjusts the opacity of the child widget, making the child partially transparent. The amount of transparency is controlled by the
opacity argument; 0.0 is fully transparent and 1.0 is fully opaque.
Apply a rectangular clip to the child widget. The dimensions of the clip match the dimensions of the child.
Apply an oval clip to the child widget. The oval will be axis-aligned, with its horizontal and vertical bounds matching the bounds of the child widget.
Material design widgets
Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. The BottomNavigationBar widget implements this component.
Bottom sheets slide up from the bottom of the screen to reveal more content. You can call showBottomSheet() to implement a persistent bottom sheet or showModalBottomSheet() to implement a modal bottom sheet.
Floating action button
A floating action button represents the primary action in an application. The FloatingActionButton widget implements this component.
A typically rectangular material button that lifts and displays ink reactions on press. The RaisedButton widget implements this component.
A button made of ink that displays ink reactions on press but does not lift. The FlatButton widget implements this component.
A card is a sheet of material that serves as an entry point to more detailed information. The Card widget implements this component.
Chips represent complex entities in small blocks such as a contact. The Chip widget implements this component.
Data tables display sets of raw data. They usually appear in desktop enterprise products. The DataTable widget implements this component.
Simple dialogs can provide additional details or actions about a list item. For example they can display avatars icons clarifying subtext or orthogonal actions (such as adding an account). The SimpleDialog widget implements this component.
Alerts are urgent interruptions requiring acknowledgement that inform the user about a situation. The AlertDialog widget implements this component.
A divider is a thin lightweight rule that groups content in lists and page layouts. The Divider widget implements this component.
Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.
A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout. The GridView widget implements this component.
A list item consists of an icon and some text. List items are typically seen in lists or on cards. The ListItem widget implements this component.
Menus appear upon interaction with a button action or other control. They display a list of choices with one choice per line. The PopupMenuButton widget implements this component.
Date pickers use a dialog window to select a single date on mobile. Time pickers use a dialog to select a single time (in the hours:minutes format) on mobile. You can call showDatePicker() and showTimePicker() to implement these two pickers.
Progress & activity
Progress and activity indicators are visual indications of an app loading content. The LinearProgressIndicator widget implements this component. In addition you may also use the CircularProgressIndicator widget.
Checkboxes allow the user to select multiple options from a set. The Checkbox widget implements this component.
Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. The Radio widget implements this component.
On/off switches toggle the state of a single settings option. The Switch widget implements this component.
Sliders let users select from a range of values by moving the slider thumb. The Slider widget implements this component.
Snackbars provide brief feedback about an operation through a message at the bottom of the screen. The SnackBar widget implements this component.
Steppers convey progress through numbered steps. The Stepper widget implements this component.
Tabs make it easy to explore and switch between different views. The TabBar widget implements this component.
Touching a text field places the cursor and displays the keyboard. The Input widget implements this component.
Toolbar actions appear above the view affected by their actions. The AppBar widget implements this component.
Tooltips are text labels that appear when the user hovers over focuses on or touches an element. The Tooltip widget implements this component.
The owl image is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license. It was originally created by Trebol-a and has been modified for this site.