[go: up one dir, main page]

Skip to main content

Flutter widget index

This is an alphabetical list of many of the widgets that are bundled with Flutter. You can also browse widgets by category.

You might also want to check out our Widget of the Week video series on the Flutter YouTube channel. Each short episode features a different Flutter widget. For more video series, see our videos page.


Introducing the Flutter Widget of the Week

Widget of the Week playlist

AbsorbPointer

A widget that absorbs pointers during hit testing. When absorbing is true, this widget prevents its subtree from receiving pointer events by terminating hit testing...

Rendered image or visualization of the AlertDialog widget.
AlertDialog

Hovering containers that prompt app users to provide more data or make a decision.

Align

A widget that aligns its child within itself and optionally sizes itself based on the child's size.

AnimatedAlign

Animated transition that moves the child's position over a given duration whenever the given alignment changes.

AnimatedBuilder

A general-purpose widget for building animations. AnimatedBuilder is useful for more complex widgets that wish to include animation as part of a larger build function....

AnimatedContainer

A container that gradually changes its values over a period of time.

AnimatedCrossFade

A widget that cross-fades between two given children and animates itself between their sizes.

AnimatedDefaultTextStyle

Animated version of DefaultTextStyle which automatically transitions the default text style (the text style to apply to descendant Text widgets without explicit style) over a...

AnimatedList

A scrolling container that animates items when they are inserted or removed.

AnimatedListState

The state for a scrolling container that animates items when they are inserted or removed.

AnimatedModalBarrier

A widget that prevents the user from interacting with widgets behind itself.

AnimatedOpacity

Animated version of Opacity which automatically transitions the child's opacity over a given duration whenever the given opacity changes.

AnimatedPhysicalModel

Animated version of PhysicalModel.

AnimatedPositioned

Animated version of Positioned which automatically transitions the child's position over a given duration whenever the given position changes.

AnimatedSize

Animated widget that automatically transitions its size over a given duration whenever the given child's size changes.

AnimatedWidget

A widget that rebuilds when the given Listenable changes value.

Rendered image or visualization of the AppBar widget.
AppBar

Container that displays content and actions at the top of a screen.

AspectRatio

A widget that attempts to size the child to a specific aspect ratio.

AssetBundle

Asset bundles contain resources, such as images and strings, that can be used by an application. Access to these resources is asynchronous so that they...

Autocomplete

A widget for helping the user make a selection by entering some text and choosing from among a list of options.

BackdropFilter

A widget that applies a filter to the existing painted content and then paints a child. This effect is relatively expensive, especially if the filter...

Rendered image or visualization of the Badge widget.
Badge

Icon-like block that conveys dynamic content such as counts or status. It can include labels or numbers.

Abc
Baseline

Container that positions its child according to the child's baseline.

Rendered image or visualization of the Bottom app bar widget.
Bottom app bar

Container that displays navigation and key actions at the bottom of a screen.

Rendered image or visualization of the Bottom sheet widget.
Bottom sheet

Containers that anchor supplementary content to the bottom of the screen.

Rendered image or visualization of the BottomNavigationBar widget.
BottomNavigationBar

Container that includes tools to explore and switch between top-level views in a single tap.

Rendered image or visualization of the BottomSheet widget.
BottomSheet

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...

Rendered image or visualization of the Card widget.
Card

Container for short, related pieces of content displayed in a box with rounded corners and a drop shadow.

Rendered image or visualization of the CarouselView widget.
CarouselView

A Material carousel widget that presents a scrollable list of items, each of which can dynamically change size based on the chosen layout.

Center

Alignment block that centers its child within itself.

Rendered image or visualization of the Checkbox widget.
Checkbox

Form control that app users can set or clear to select one or more options from a set.

Rendered image or visualization of the Chip widget.
Chip

Small blocks that simplify entering information, making selections, filtering content, or triggering actions.

Rendered image or visualization of the CircularProgressIndicator widget.
CircularProgressIndicator

Circular progress indicator that spins to indicate a busy application.

ClipOval

A widget that clips its child using an oval.

ClipPath

A widget that clips its child using a path.

ClipRect

A widget that clips its child using a rectangle.

Column

Layout a list of child widgets in the vertical direction.

Rendered image or visualization of the Common buttons widget.
Common buttons

Clickable blocks that start an action, such as sending an email, sharing a document, or liking a comment.

ConstrainedBox

A widget that imposes additional constraints on its child.

Container

A convenience widget that combines common painting, positioning, and sizing widgets.

Rendered image or visualization of the CupertinoActionSheet widget.
CupertinoActionSheet

An iOS-style modal bottom action sheet to choose an option among many.

Rendered image or visualization of the CupertinoActionSheetAction widget.
CupertinoActionSheetAction

A button typically used in a CupertinoActionSheet.

Rendered image or visualization of the CupertinoActivityIndicator widget.
CupertinoActivityIndicator

An iOS-style activity indicator. Displays a circular 'spinner'.

Rendered image or visualization of the CupertinoAdaptiveTextSelectionToolbar widget.
CupertinoAdaptiveTextSelectionToolbar

The default Cupertino context menu for text selection for the current platform with the given children.

Rendered image or visualization of the CupertinoAlertDialog widget.
CupertinoAlertDialog

An iOS-style alert dialog.

Rendered image or visualization of the CupertinoApp widget.
CupertinoApp

An application that uses Cupertino design.

Rendered image or visualization of the CupertinoButton widget.
CupertinoButton

An iOS-style button.

Rendered image or visualization of the CupertinoCheckBox widget.
CupertinoCheckBox

A macOS-style checkbox.

Rendered image or visualization of the CupertinoColors widget.
CupertinoColors

A palette of Color constants that describe colors commonly used when matching the iOS platform aesthetics.

Rendered image or visualization of the CupertinoContextMenu widget.
CupertinoContextMenu

An iOS-style full-screen modal route that opens when the child is long-pressed. Used to display relevant actions for your content.

Rendered image or visualization of the CupertinoContextMenuAction widget.
CupertinoContextMenuAction

A button in a ContextMenuSheet.

Rendered image or visualization of the CupertinoDatePicker widget.
CupertinoDatePicker

An iOS-style date or date and time picker.

CupertinoDesktopTextSelectionControls

Desktop Cupertino styled text selection controls.

Rendered image or visualization of the CupertinoDesktopTextSelectionToolbar widget.
CupertinoDesktopTextSelectionToolbar

A macOS-style text selection toolbar.

Rendered image or visualization of the CupertinoDesktopTextSelectionToolbarButton widget.
CupertinoDesktopTextSelectionToolbarButton

A button in the style of the macOS context menu buttons.

Rendered image or visualization of the CupertinoDialogAction widget.
CupertinoDialogAction

A button typically used in a CupertinoAlertDialog.

CupertinoDialogRoute

A dialog route that shows an iOS-style dialog.

CupertinoDynamicColor

A Color subclass that represents a family of colors, and the correct effective color in the color family.

Rendered image or visualization of the CupertinoFormRow widget.
CupertinoFormRow

An iOS-style form row.

Rendered image or visualization of the CupertinoFormSection widget.
CupertinoFormSection

An iOS-style form section.

Rendered image or visualization of the CupertinoFullscreenDialogTransition widget.
CupertinoFullscreenDialogTransition

An iOS-style transition used for summoning fullscreen dialogs.

Rendered image or visualization of the CupertinoListSection widget.
CupertinoListSection

Container that uses the iOS style to display a scrollable view.

Rendered image or visualization of the CupertinoListTile widget.
CupertinoListTile

A block that uses the iOS style to create a row in a list.

Rendered image or visualization of the CupertinoListTileChevron widget.
CupertinoListTileChevron

A typical iOS trailing widget used to denote that a CupertinoListTile is a button with an action.

CupertinoLocalizations

Defines the localized resource values used by the Cupertino widgets.

CupertinoMagnifier

A RawMagnifier used for magnifying text in cases where a user's finger may be blocking the point of interest, like a selection handle.

CupertinoModalPopupRoute

A route that shows a modal iOS-style popup that slides up from the bottom of the screen.

Rendered image or visualization of the CupertinoNavigationBar widget.
CupertinoNavigationBar

Container at the top of a screen that uses the iOS style. Many developers use this with `CupertinoPageScaffold`.

Rendered image or visualization of the CupertinoNavigationBarBackButton widget.
CupertinoNavigationBarBackButton

A nav bar back button typically used in CupertinoNavigationBar.

CupertinoPage

A page that creates a cupertino style PageRoute.

CupertinoPageRoute

A modal route that replaces the entire screen with an iOS transition.

CupertinoPageScaffold

Basic iOS style page layout structure. Positions a navigation bar and content on a background.

Rendered image or visualization of the CupertinoPageTransition widget.
CupertinoPageTransition

Provides an iOS-style page transition animation.

Rendered image or visualization of the CupertinoPicker widget.
CupertinoPicker

An iOS-style picker control. Used to select an item in a short list.

CupertinoPickerDefaultSelectionOverlay

A default selection overlay for CupertinoPickers.

CupertinoPopupSurface

Rounded rectangle surface that looks like an iOS popup surface, such as an alert dialog or action sheet.

Rendered image or visualization of the CupertinoRadio widget.
CupertinoRadio

A macOS-style radio button.

CupertinoScrollBehavior

Describes how Scrollable widgets behave for CupertinoApps.

Rendered image or visualization of the CupertinoScrollbar widget.
CupertinoScrollbar

An iOS-style scrollbar that indicates which portion of a scrollable widget is currently visible.

Rendered image or visualization of the CupertinoSearchTextField widget.
CupertinoSearchTextField

An iOS-style search field.

Rendered image or visualization of the CupertinoSegmentedControl widget.
CupertinoSegmentedControl

An iOS-style segmented control. Used to select mutually exclusive options in a horizontal list.

Rendered image or visualization of the CupertinoSlider widget.
CupertinoSlider

Used to select from a range of values.

Rendered image or visualization of the CupertinoSlidingSegmentedControl widget.
CupertinoSlidingSegmentedControl

An iOS-13-style segmented control. Used to select mutually exclusive options in a horizontal list.

Rendered image or visualization of the CupertinoSliverNavigationBar widget.
CupertinoSliverNavigationBar

A navigation bar with iOS-11-style large titles using slivers.

CupertinoSliverRefreshControl

A sliver widget implementing the iOS-style pull to refresh content control.

Rendered image or visualization of the CupertinoSpellCheckSuggestionsToolbar widget.
CupertinoSpellCheckSuggestionsToolbar

The default spell check suggestions toolbar for iOS.

Rendered image or visualization of the CupertinoSwitch widget.
CupertinoSwitch

An iOS-style switch. Used to toggle the on/off state of a single setting.

Rendered image or visualization of the CupertinoTabBar widget.
CupertinoTabBar

An iOS-style bottom tab bar. Typically used with CupertinoTabScaffold.

CupertinoTabController

Coordinates tab selection between a CupertinoTabBar and a CupertinoTabScaffold.

Rendered image or visualization of the CupertinoTabScaffold widget.
CupertinoTabScaffold

Tabbed iOS app structure. Positions a tab bar on top of tabs of content.

Rendered image or visualization of the CupertinoTabView widget.
CupertinoTabView

Root content of a tab that supports parallel navigation between tabs. Typically used with CupertinoTabScaffold.

Rendered image or visualization of the CupertinoTextField widget.
CupertinoTextField

An iOS-style text field.

Rendered image or visualization of the CupertinoTextFormFieldRow widget.
CupertinoTextFormFieldRow

Creates a CupertinoFormRow containing a FormField that wraps a CupertinoTextField.

Rendered image or visualization of the CupertinoTextMagnifier widget.
CupertinoTextMagnifier

A CupertinoMagnifier used for magnifying text in cases where a user's finger may be blocking the point of interest, like a selection handle.

CupertinoTextSelectionControls

iOS-style text selection controls.

Rendered image or visualization of the CupertinoTextSelectionToolbar widget.
CupertinoTextSelectionToolbar

An iOS-style text selection toolbar.

Rendered image or visualization of the CupertinoTextSelectionToolbarButton widget.
CupertinoTextSelectionToolbarButton

A button in the style of the iOS text selection toolbar buttons.

CupertinoTextThemeData

Cupertino typography theme in a CupertinoThemeData.

CupertinoTheme

Applies a visual styling theme to descendant Cupertino widgets.

CupertinoThemeData

Styling specifications for a CupertinoTheme.

CupertinoThumbPainter

Paints an iOS-style slider thumb or switch thumb.

Rendered image or visualization of the CupertinoTimerPicker widget.
CupertinoTimerPicker

An iOS-style countdown timer picker.

CustomMultiChildLayout

A widget that uses a delegate to size and position multiple children.

CustomPaint

A widget that provides a canvas on which to draw during the paint phase.

CustomScrollView

A ScrollView that creates custom scroll effects using slivers.

CustomSingleChildLayout

A widget that defers the layout of its single child to a delegate.

Rendered image or visualization of the DataTable widget.
DataTable

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

Rendered image or visualization of the DatePicker widget.
DatePicker

Calendar interface used to select a date or a range of dates.

DecoratedBox

A widget that paints a Decoration either before or after its child paints.

DecoratedBoxTransition

Animated version of a DecoratedBox that animates the different properties of its Decoration.

DefaultTextStyle

The text style to apply to descendant Text widgets without explicit style.

Dismissible

A widget that can be dismissed by dragging in the indicated direction. Dragging or flinging this widget in the DismissDirection causes the child to slide...

Rendered image or visualization of the Divider widget.
Divider

Thin line that groups content in lists and containers.

DragTarget

A widget that receives data when a Draggable widget is dropped. When a draggable is dragged on top of a drag target, the drag target...

Draggable

A widget that can be dragged from to a DragTarget. When a draggable widget recognizes the start of a drag gesture, it displays a feedback...

DraggableScrollableSheet

A container for a Scrollable that responds to drag gestures by resizing the scrollable until a limit is reached, and then scrolling.

Rendered image or visualization of the Drawer widget.
Drawer

A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.

Rendered image or visualization of the DropdownButton widget.
DropdownButton

Shows the currently selected item and an arrow that opens a menu for selecting another item.

Rendered image or visualization of the ElevatedButton widget.
ElevatedButton

A Material Design elevated button. A filled button whose material elevates when pressed.

ExcludeSemantics

A widget that drops all the semantics of its descendants. This can be used to hide subwidgets that would otherwise be reported but that would...

Expanded

A widget that expands a child of a Row, Column, or Flex.

Rendered image or visualization of the ExpansionPanel widget.
ExpansionPanel

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

Rendered image or visualization of the Extended FloatingActionButton widget.
Extended FloatingActionButton

Clickable block that triggers an action. These wider blocks can fit a text label and provide a larger target area.

FadeTransition

Animates the opacity of a widget.

FittedBox

Scales and positions its child within itself according to fit.

Rendered image or visualization of the FloatingActionButton widget.
FloatingActionButton

Clickable block containing an icon that keeps a key action always in reach.

Flow

A widget that implements the flow layout algorithm.

FlutterLogo

The Flutter logo, in widget form. This widget respects the IconTheme.

Form

An optional container for grouping together multiple form field widgets (e.g. TextField widgets).

FormField

A single form field. This widget maintains the current state of the form field, so that updates and validation errors are visually reflected in the...

FractionalTranslation

A widget that applies a translation expressed as a fraction of the box's size before painting its child.

FractionallySizedBox

A widget that sizes its child to a fraction of the total available space. For more details about the layout algorithm, see RenderFractionallySizedOverflowBox.

FutureBuilder

Widget that builds itself based on the latest snapshot of interaction with a Future.

GestureDetector

A widget that detects gestures. Attempts to recognize gestures that correspond to its non-null callbacks. If this widget has a child, it defers to that...

Rendered image or visualization of the GridView widget.
GridView

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

Hero

A widget that marks its child as being a candidate for hero animations.

Rendered image or visualization of the Icon widget.
Icon

A Material Design icon.

Rendered image or visualization of the IconButton widget.
IconButton

Clickable icons to prompt app users to take supplementary actions.

IgnorePointer

A widget that is invisible during hit testing. When ignoring is true, this widget (and its subtree) is invisible to hit testing. It still consumes...

Image

A widget that displays an image.

ImplicitlyAnimatedWidget

An abstract class for building widgets that animate changes to their properties.

IndexedStack

A Stack that shows a single child from a list of children.

InteractiveViewer

A widget that enables pan and zoom interactions with its child.

IntrinsicHeight

A widget that sizes its child to the child's intrinsic height.

IntrinsicWidth

A widget that sizes its child to the child's intrinsic width.

KeyboardListener

A widget that calls a callback whenever the user presses or releases a key on a keyboard.

LayoutBuilder

Builds a widget tree that can depend on the parent widget's size.

LimitedBox

A box that limits its size only when it's unconstrained.

Rendered image or visualization of the LinearProgressIndicator widget.
LinearProgressIndicator

Vertical line that changes color as an ongoing process, such as loading an app or submitting a form, completes.

ListBody

A widget that arranges its children sequentially along a given axis, forcing them to the dimension of the parent in the other axis.

Rendered image or visualization of the ListTile widget.
ListTile

A single fixed-height row that typically contains some text as well as a leading or trailing icon.

Rendered image or visualization of the ListView widget.
ListView

A scrollable, linear list of widgets. ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction....

LongPressDraggable

Makes its child draggable starting from long press.

Rendered image or visualization of the MaterialApp widget.
MaterialApp

A convenience widget that wraps a number of widgets that are commonly required for applications implementing Material Design.

MediaQuery

Establishes a subtree in which media queries resolve to the given data.

Rendered image or visualization of the Menu widget.
Menu

Container that displays a list of choices on a temporary surface.

MergeSemantics

A widget that merges the semantics of its descendants.

Rendered image or visualization of the Navigation rail widget.
Navigation rail

Persistent container on the leading edge of tablet and desktop screens to navigate to parts of an app.

Rendered image or visualization of the NavigationBar widget.
NavigationBar

Persistent container that enables switching between primary destinations in an app.

Rendered image or visualization of the NavigationDrawer widget.
NavigationDrawer

Container that slides from the leading edge of the app to navigate to other sections in an app.

Navigator

A widget that manages a set of child widgets with a stack discipline. Many apps have a navigator near the top of their widget hierarchy...

NestedScrollView

A scrolling view inside of which can be nested other scrolling views, with their scroll positions being intrinsically linked.

NotificationListener

A widget that listens for Notifications bubbling up the tree.

Offstage

A widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit...

Opacity

A widget that makes its child partially transparent.

Rendered image or visualization of the OutlinedButton widget.
OutlinedButton

A Material Design outlined button, essentially a TextButton with an outlined border.

OverflowBox

A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent.

Padding

A widget that insets its child by the given padding.

PageView

A scrollable list that works page by page.

Placeholder

A widget that draws a box that represents where other widgets will one day be added.

Rendered image or visualization of the PopupMenuButton widget.
PopupMenuButton

Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected.

PositionedTransition

Animated version of Positioned which takes a specific Animation to transition the child's position from a start position to and end position over the lifetime...

Rendered image or visualization of the Radio widget.
Radio

Form control that app users can set or clear to select only one option from a set.

RawImage

A widget that displays a dart:ui.Image directly.

Rendered image or visualization of the RefreshIndicator widget.
RefreshIndicator

A Material Design pull-to-refresh wrapper for scrollables.

ReorderableListView

A list whose items the user can interactively reorder by dragging.

RichText

The RichText widget displays text that uses multiple different styles. The text to display is described using a tree of TextSpan objects, each of which...

RotatedBox

A widget that rotates its child by a integral number of quarter turns.

RotationTransition

Animates the rotation of a widget.

Row

Layout a list of child widgets in the horizontal direction.

Rendered image or visualization of the Scaffold widget.
Scaffold

Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.

ScaleTransition

Animates the scale of transformed widget.

ScrollConfiguration

Controls how Scrollable widgets behave in a subtree.

Scrollable

Scrollable implements the interaction model for a scrollable widget, including gesture recognition, but does not have an opinion about how the viewport, which actually displays...

Scrollbar

A Material Design scrollbar. A scrollbar indicates which portion of a Scrollable widget is actually visible.

Rendered image or visualization of the SegmentedButton widget.
SegmentedButton

Single or multiple selected clickable blocks to help people select options, switch views, or sort elements.

Semantics

A widget that annotates the widget tree with a description of the meaning of the widgets. Used by accessibility tools, search engines, and other semantic...

Rendered image or visualization of the SimpleDialog widget.
SimpleDialog

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...

SingleChildScrollView

A box in which a single widget can be scrolled. This widget is useful when you have a single box that will normally be entirely...

SizeTransition

Animates its own size and clips and aligns the child.

SizedBox

A box with a specified size. If given a child, this widget forces its child to have a specific width and/or height (assuming values are...

SizedOverflowBox

A widget that is a specific size but passes its original constraints through to its child, which will probably overflow.

SlideTransition

Animates the position of a widget relative to its normal position.

Rendered image or visualization of the Slider widget.
Slider

Form control that enables selecting a range of values.

Rendered image or visualization of the SliverAppBar widget.
SliverAppBar

A material design app bar that integrates with a CustomScrollView.

SliverChildBuilderDelegate

A delegate that supplies children for slivers using a builder callback.

SliverChildListDelegate

A delegate that supplies children for slivers using an explicit list.

SliverFixedExtentList

A sliver that places multiple box children with the same main axis extent in a linear array.

SliverGrid

A sliver that places multiple box children in a two dimensional arrangement.

SliverList

A sliver that places multiple box children in a linear array along the main axis.

SliverPadding

A sliver that applies padding on each side of another sliver.

SliverPersistentHeader

A sliver whose size varies when the sliver is scrolled to the edge of the viewport opposite the sliver's GrowthDirection.

SliverToBoxAdapter

A sliver that contains a single box widget.

Rendered image or visualization of the SnackBar widget.
SnackBar

Brief messages about app processes that display at the bottom of the screen.

Stack

This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with...

Rendered image or visualization of the Stepper widget.
Stepper

A Material Design stepper widget that displays progress through a sequence of steps.

StreamBuilder

Widget that builds itself based on the latest snapshot of interaction with a Stream.

Rendered image or visualization of the Switch widget.
Switch

Toggle control that changes the state of a single item to on or off.

Rendered image or visualization of the TabBar widget.
TabBar

Layered containers that organize content across different screens, data sets, and other interactions.

Rendered image or visualization of the TabBarView widget.
TabBarView

A page view that displays the widget which corresponds to the currently selected tab. Typically used in conjunction with a TabBar.

Rendered image or visualization of the TabController widget.
TabController

Coordinates tab selection between a TabBar and a TabBarView.

Rendered image or visualization of the TabPageSelector widget.
TabPageSelector

Displays a row of small circular indicators, one per tab. The selected tab's indicator is highlighted. Often used in conjunction with a TabBarView.

Table

Displays child widgets in rows and columns.

Abc
Text

A run of text with a single style.

Rendered image or visualization of the TextButton widget.
TextButton

A Material Design text button. A simple flat button without a border outline.

Rendered image or visualization of the TextField widget.
TextField

Box into which app users can enter text. They appear in forms and dialogs.

Theme

Applies a theme to descendant widgets. A theme describes the colors and typographic choices of an application.

Rendered image or visualization of the TimePicker widget.
TimePicker

Clock interface used to select and set a specific time.

Rendered image or visualization of the Tooltip widget.
Tooltip

Tooltips provide text labels that help explain the function of a button or other user interface action. Wrap the button in a Tooltip widget to...

Transform

A widget that applies a transformation before painting its child.

Rendered image or visualization of the WidgetsApp widget.
WidgetsApp

A convenience class that wraps a number of widgets that are commonly required for an application.

Wrap

A widget that displays its children in multiple horizontal or vertical runs.