Introduction

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 in the material library. The material library is implemented in terms of the widgets library. That library in turn is implemented in terms of the rendering library, and so forth.

Even within each library, we use a layered approach. For example, the widgets library’s Container widget is implemented in terms of lower-level widgets from the same library, such as Padding and ConstrainedBox.

Container

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.

Documentation

Text

Abc

A run of text with a single style.

Documentation

Image

A widget that displays an image.

Documentation

Layout models

The following widgets allow you to arrange a series of children.

Row

Layout a list of child widgets in the horizontal direction.

Documentation

Column

Layout a list of child widgets in the vertical direction.

Documentation

Expanded

Configures a child of a Row or Column to make it expand to fit the container.

Documentation

Stack

Layout a list of child widgets on top of each other from back to front.

Documentation

Positioned

Configures the position and size of a child of a Stack.

Documentation

ListView

Arranges children one after the other, and scrolls if necessary.

Documentation

Positioning and sizing

The following widgets allow you to position and size other widgets.

Center

Center the child widget both horizontally and vertically within the space occupied by this widget.

Documentation

Align

Aligns its child box within itself.

Documentation

Padding

Surround the child with empty space on the top, right, bottom, and left according to the given EdgeInsets.

Documentation

SizedBox

Force the child widget to have a particular width or height (or both).

Documentation

ConstrainedBox

Apply the given BoxConstraints to the child widget as additional constraints during layout. This widget is a generalization of SizedBox.

Documentation

AspectRatio

Force the child widget's width and height to have the given aspect ratio, expressed as a ratio of width to height.

Documentation

Transform

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.

Documentation

Baseline

Abc

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.

Documentation

Painting effects

These widgets apply visual effects to the children without changing their layout, size, or position.

DecoratedBox

Draw the given BoxDecoration surrounding the child widget.

Documentation

Opacity

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.

Documentation

ClipRect

Apply a rectangular clip to the child widget. The dimensions of the clip match the dimensions of the child.

Documentation

ClipRRect

Apply a rounded-rect clip the child widget.

Documentation

ClipOval

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.

Documentation

CustomPaint

Uses the given CustomPainter (which you implement and provide) during the paint phase, providing it with the current Canvas and Size.

Documentation

Material design widgets

Flutter implements many of the UI components from Google’s Material Design Specification. You can see many of the material design widgets in action in our Flutter Gallery demo app.

Bottom navigation

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. The BottomNavigationBar widget implements this component.

Documentation | Interface design guidelines

Bottom sheets

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.

Documentation | Interface design guidelines

Floating action button

A floating action button represents the primary action in an application. The FloatingActionButton widget implements this component.

Documentation | Interface design guidelines

Raised button

A typically rectangular material button that lifts and displays ink reactions on press. The RaisedButton widget implements this component.

Documentation | Interface design guidelines

Flat button

A button made of ink that displays ink reactions on press but does not lift. The FlatButton widget implements this component.

Documentation | Interface design guidelines

Cards

A card is a sheet of material that serves as an entry point to more detailed information. The Card widget implements this component.

Documentation | Interface design guidelines

Chips

Chips represent complex entities in small blocks such as a contact. The Chip widget implements this component.

Documentation | Interface design guidelines

Data tables

Data tables display sets of raw data. They usually appear in desktop enterprise products. The DataTable widget implements this component.

Documentation | Interface design guidelines

Simple Dialog

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.

Documentation | Interface design guidelines

Alerts

Alerts are urgent interruptions requiring acknowledgement that inform the user about a situation. The AlertDialog widget implements this component.

Documentation | Interface design guidelines

Dividers

A divider is a thin lightweight rule that groups content in lists and page layouts. The Divider widget implements this component.

Documentation | Interface design guidelines

Expansion panels

Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.

Documentation | Interface design guidelines

Grid lists

A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout. The GridView widget implements this component.

Documentation | Interface design guidelines

List tiles

A list tile consists of an icon and some text. List tiles are typically seen in lists or on cards. The ListTile widget implements this component.

Documentation | Interface design guidelines

Menus

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.

Documentation | Interface design guidelines

Pickers

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.

Documentation | Interface design guidelines

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.

Documentation | Interface design guidelines

Checkbox

Checkboxes allow the user to select multiple options from a set. The Checkbox widget implements this component.

Documentation | Interface design guidelines

Radio button

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.

Documentation | Interface design guidelines

Switch

On/off switches toggle the state of a single settings option. The Switch widget implements this component.

Documentation | Interface design guidelines

Sliders

Sliders let users select from a range of values by moving the slider thumb. The Slider widget implements this component.

Documentation | Interface design guidelines

Snackbars

Snackbars provide brief feedback about an operation through a message at the bottom of the screen. The SnackBar widget implements this component.

Documentation | Interface design guidelines

Steppers

Steppers convey progress through numbered steps. The Stepper widget implements this component.

Documentation | Interface design guidelines

Tabs

Tabs make it easy to explore and switch between different views. The TabBar widget implements this component.

Documentation | Interface design guidelines

TextField

Touching a text field places the cursor and displays the keyboard. The TextField widget implements this component.

Documentation | Interface design guidelines

Toolbars

Toolbar actions appear above the view affected by their actions. The AppBar widget implements this component.

Documentation | Interface design guidelines

Tooltips

Tooltips are text labels that appear when the user hovers over focuses on or touches an element. The Tooltip widget implements this component.

Documentation | Interface design guidelines

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.