Flutter Widget 目录
你可以在下方以字母顺序查看各个 Widget 的使用方法,几乎包括了所有与 Flutter 相关的 widget。除此之外你还可以查阅 核心 Widget 目录。
我们每周都会在 Youtube Flutter 频道 发布关于 Widget 的系列视频,你可以前去观看学习。每一个短视频都介绍了一个不同的 Flutter Widget。关于更多系列视频,也欢迎查看我们的 学习 Flutter 的视频列表。
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/widget-catalog/material-3-dialog.png)
Hovering containers that prompt app users to provide more data or make a decision.
A widget that aligns its child within itself and optionally sizes itself based on the child's size.
![](/assets/images/docs/catalog-widget-placeholder.png)
Animated transition that moves the child's position over a given duration whenever the given alignment changes.
![](/assets/images/docs/catalog-widget-placeholder.png)
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....
![](/assets/images/docs/catalog-widget-placeholder.png)
A container that gradually changes its values over a period of time.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that cross-fades between two given children and animates itself between their sizes.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
A scrolling container that animates items when they are inserted or removed.
![](/assets/images/docs/catalog-widget-placeholder.png)
The state for a scrolling container that animates items when they are inserted or removed.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that prevents the user from interacting with widgets behind itself.
![](/assets/images/docs/catalog-widget-placeholder.png)
Animated version of Opacity which automatically transitions the child's opacity over a given duration whenever the given opacity changes.
![](/assets/images/docs/catalog-widget-placeholder.png)
Animated version of PhysicalModel.
![](/assets/images/docs/catalog-widget-placeholder.png)
Animated version of Positioned which automatically transitions the child's position over a given duration whenever the given position changes.
![](/assets/images/docs/catalog-widget-placeholder.png)
Animated widget that automatically transitions its size over a given duration whenever the given child's size changes.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that rebuilds when the given Listenable changes value.
![](/assets/images/docs/widget-catalog/material-3-top-app-bar.png)
Container that displays content and actions at the top of a screen.
A widget that attempts to size the child to a specific aspect ratio.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget for helping the user make a selection by entering some text and choosing from among a list of options.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/widget-catalog/material-3-badge.png)
Icon-like block that conveys dynamic content such as counts or status. It can include labels or numbers.
Container that positions its child according to the child's baseline.
![](/assets/images/docs/widget-catalog/material-3-bottom-app-bar.png)
Container that displays navigation and key actions at the bottom of a screen.
![](/assets/images/docs/widget-catalog/material-3-bottom-sheet.png)
Containers that anchor supplementary content to the bottom of the screen.
![](/assets/images/docs/widget-catalog/material-bottom-navigation-bar.png)
Container that includes tools to explore and switch between top-level views in a single tap.
![](/assets/images/docs/widget-catalog/material-bottom-sheets.png)
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...
![](/assets/images/docs/widget-catalog/material-3-card.png)
Container for short, related pieces of content displayed in a box with rounded corners and a drop shadow.
Alignment block that centers its child within itself.
![](/assets/images/docs/widget-catalog/material-3-checkbox.png)
Form control that app users can set or clear to select one or more options from a set.
![](/assets/images/docs/widget-catalog/material-3-chip.png)
Small blocks that simplify entering information, making selections, filtering content, or triggering actions.
![](/assets/images/docs/widget-catalog/material-circular-progress-indicator.png)
Circular progress indicator that spins to indicate a busy application.
A widget that clips its child using an oval.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that clips its child using a path.
A widget that clips its child using a rectangle.
Layout a list of child widgets in the vertical direction.
![](/assets/images/docs/widget-catalog/material-3-buttons.png)
Clickable blocks that start an action, such as sending an email, sharing a document, or liking a comment.
A widget that imposes additional constraints on its child.
A convenience widget that combines common painting, positioning, and sizing widgets.
![](/assets/images/docs/widget-catalog/CupertinoActionSheetAction.png)
An iOS-style modal bottom action sheet to choose an option among many.
![](/assets/images/docs/catalog-widget-placeholder.png)
A button typically used in a CupertinoActionSheet.
![](/assets/images/docs/widget-catalog/cupertino-activity-indicator.png)
An iOS-style activity indicator. Displays a circular 'spinner'.
![](/assets/images/docs/widget-catalog/CupertinoAdaptiveTextSelectionToolbar.png)
The default Cupertino context menu for text selection for the current platform with the given children.
![](/assets/images/docs/widget-catalog/cupertino-alert-dialog.png)
An iOS-style alert dialog.
![](/assets/images/docs/widget-catalog/CupertinoApp.png)
An application that uses Cupertino design.
![](/assets/images/docs/widget-catalog/cupertino-button.png)
An iOS-style button.
![](/assets/images/docs/widget-catalog/CupertinoCheckbox.png)
An macOS-style checkbox.
![](/assets/images/docs/widget-catalog/CupertinoColors.png)
A palette of Color constants that describe colors commonly used when matching the iOS platform aesthetics.
![](/assets/images/docs/widget-catalog/cupertino-context-menu.png)
An iOS-style full-screen modal route that opens when the child is long-pressed. Used to display relevant actions for your content.
![](/assets/images/docs/widget-catalog/CupertinoContextMenuAction.png)
A button in a _ContextMenuSheet.
![](/assets/images/docs/widget-catalog/CupertinoDatePicker.png)
An iOS-style date or date and time picker.
![](/assets/images/docs/catalog-widget-placeholder.png)
Desktop Cupertino styled text selection controls.
![](/assets/images/docs/widget-catalog/CupertinoDesktopTextSelectionToolbar.png)
A macOS-style text selection toolbar.
![](/assets/images/docs/widget-catalog/CupertinoDesktopTextSelectionToolbarButton.png)
A button in the style of the macOS context menu buttons.
![](/assets/images/docs/widget-catalog/cupertino-dialog-action.png)
A button typically used in a CupertinoAlertDialog.
![](/assets/images/docs/catalog-widget-placeholder.png)
A dialog route that shows an iOS-style dialog.
![](/assets/images/docs/catalog-widget-placeholder.png)
A Color subclass that represents a family of colors, and the correct effective color in the color family.
![](/assets/images/docs/widget-catalog/CupertinoFormRow.png)
An iOS-style form row.
![](/assets/images/docs/widget-catalog/CupertinoFormSection.png)
An iOS-style form section.
![](/assets/images/docs/widget-catalog/cupertino-fullscreen-dialog-transition.png)
An iOS-style transition used for summoning fullscreen dialogs.
![](/assets/images/docs/widget-catalog/cupertino-list-section.png)
Container that uses the iOS style to display a scrollable view.
![](/assets/images/docs/widget-catalog/cupertino-list-tile.png)
A block that uses the iOS style to create a row in a list.
![](/assets/images/docs/widget-catalog/CupertinoListTileChevron.png)
A typical iOS trailing widget used to denote that a CupertinoListTile is a button with an action.
![](/assets/images/docs/catalog-widget-placeholder.png)
Defines the localized resource values used by the Cupertino widgets.
![](/assets/images/docs/catalog-widget-placeholder.png)
A RawMagnifier used for magnifying text in cases where a user's finger may be blocking the point of interest, like a selection handle.
![](/assets/images/docs/catalog-widget-placeholder.png)
A route that shows a modal iOS-style popup that slides up from the bottom of the screen.
![](/assets/images/docs/widget-catalog/cupertino-nav-bar.png)
Container at the top of a screen that uses the iOS style. Many developers use this with CupertinoPageScaffold
.
![](/assets/images/docs/widget-catalog/CupertinoNavigationBarBackButton.png)
A nav bar back button typically used in CupertinoNavigationBar.
![](/assets/images/docs/catalog-widget-placeholder.png)
A page that creates a cupertino style PageRoute.
![](/assets/images/docs/catalog-widget-placeholder.png)
A modal route that replaces the entire screen with an iOS transition.
![](/assets/images/docs/widget-catalog/cupertino-page-scaffold.png)
Basic iOS style page layout structure. Positions a navigation bar and content on a background.
![](/assets/images/docs/widget-catalog/cupertino-page-transition.png)
Provides an iOS-style page transition animation.
![](/assets/images/docs/widget-catalog/CupertinoPicker.png)
An iOS-style picker control. Used to select an item in a short list.
![](/assets/images/docs/catalog-widget-placeholder.png)
A default selection overlay for CupertinoPickers.
![](/assets/images/docs/catalog-widget-placeholder.png)
Rounded rectangle surface that looks like an iOS popup surface, such as an alert dialog or action sheet.
![](/assets/images/docs/widget-catalog/CupertinoRadio.png)
A macOS-style radio button.
![](/assets/images/docs/catalog-widget-placeholder.png)
Describes how Scrollable widgets behave for CupertinoApps.
![](/assets/images/docs/widget-catalog/cupertino-scrollbar.png)
An iOS-style scrollbar that indicates which portion of a scrollable widget is currently visible.
![](/assets/images/docs/widget-catalog/cupertino-search-field.png)
An iOS-style search field.
![](/assets/images/docs/widget-catalog/cupertino-segmented-control.png)
An iOS-style segmented control. Used to select mutually exclusive options in a horizontal list.
![](/assets/images/docs/widget-catalog/cupertino-slider.png)
Used to select from a range of values.
![](/assets/images/docs/widget-catalog/cupertino-sliding-segmented-control.png)
An iOS-13-style segmented control. Used to select mutually exclusive options in a horizontal list.
![](/assets/images/docs/widget-catalog/cupertino-sliver-navigation-bar.png)
An navigation bar with iOS-11-style large titles using slivers.
![](/assets/images/docs/catalog-widget-placeholder.png)
A sliver widget implementing the iOS-style pull to refresh content control.
![](/assets/images/docs/widget-catalog/CupertinoSpellCheckSuggestionsToolbar.png)
The default spell check suggestions toolbar for iOS.
![](/assets/images/docs/widget-catalog/cupertino-switch.png)
An iOS-style switch. Used to toggle the on/off state of a single setting.
![](/assets/images/docs/widget-catalog/cupertino-tab-bar.png)
An iOS-style bottom tab bar. Typically used with CupertinoTabScaffold.
![](/assets/images/docs/catalog-widget-placeholder.png)
Coordinates tab selection between a CupertinoTabBar and a CupertinoTabScaffold.
![](/assets/images/docs/widget-catalog/cupertino-tab-scaffold.png)
Tabbed iOS app structure. Positions a tab bar on top of tabs of content.
![](/assets/images/docs/widget-catalog/cupertino-tab-view.png)
Root content of a tab that supports parallel navigation between tabs. Typically used with CupertinoTabScaffold.
![](/assets/images/docs/widget-catalog/cupertino-textfield.png)
An iOS-style text field.
![](/assets/images/docs/widget-catalog/CupertinoTextFormFieldRow.png)
Creates a CupertinoFormRow containing a FormField that wraps a CupertinoTextField.
![](/assets/images/docs/widget-catalog/CupertinoTextMagnifier.png)
A CupertinoMagnifier used for magnifying text in cases where a user's finger may be blocking the point of interest, like a selection handle.
![](/assets/images/docs/catalog-widget-placeholder.png)
iOS-style text selection controls.
![](/assets/images/docs/widget-catalog/CupertinoTextSelectionToolbar.png)
An iOS-style text selection toolbar.
![](/assets/images/docs/widget-catalog/CupertinoTextSelectionToolbarButton.png)
A button in the style of the iOS text selection toolbar buttons.
![](/assets/images/docs/catalog-widget-placeholder.png)
Cupertino typography theme in a CupertinoThemeData.
![](/assets/images/docs/catalog-widget-placeholder.png)
Applies a visual styling theme to descendant Cupertino widgets.
![](/assets/images/docs/catalog-widget-placeholder.png)
Styling specifications for a CupertinoTheme.
![](/assets/images/docs/catalog-widget-placeholder.png)
Styling specifications for a CupertinoTheme.
![](/assets/images/docs/catalog-widget-placeholder.png)
Paints an iOS-style slider thumb or switch thumb.
![](/assets/images/docs/widget-catalog/CupertinoTimerPicker.png)
An iOS-style countdown timer picker.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that uses a delegate to size and position multiple children.
A widget that provides a canvas on which to draw during the paint phase.
![](/assets/images/docs/catalog-widget-placeholder.png)
A ScrollView that creates custom scroll effects using slivers.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that defers the layout of its single child to a delegate.
![](/assets/images/docs/widget-catalog/material-data-table.png)
Data tables display sets of raw data. They usually appear in desktop enterprise products. The DataTable widget implements this component.
![](/assets/images/docs/widget-catalog/material-3-date-picker.png)
Calendar interface used to select a date or a range of dates.
A widget that paints a Decoration either before or after its child paints.
![](/assets/images/docs/catalog-widget-placeholder.png)
Animated version of a DecoratedBox that animates the different properties of its Decoration.
![](/assets/images/docs/catalog-widget-placeholder.png)
The text style to apply to descendant Text widgets without explicit style.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/widget-catalog/material-3-divider.png)
Thin line that groups content in lists and containers.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
A container for a Scrollable that responds to drag gestures by resizing the scrollable until a limit is reached, and then scrolling.
![](/assets/images/docs/widget-catalog/material-drawer.png)
A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.
![](https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B7WCemMG6e0VakJ6a0F2MFJaaDQ/components_menus.png)
Shows the currently selected item and an arrow that opens a menu for selecting another item.
![](/assets/images/docs/widget-catalog/material-elevated-button.png)
A Material Design elevated button. A filled button whose material elevates when pressed.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that expands a child of a Row, Column, or Flex.
![](https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VOXF3eEJ3azZMSjg/components_expansion_panels.png)
Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.
![](/assets/images/docs/widget-catalog/material-3-extended-fab.png)
Clickable block that triggers an action. These wider blocks can fit a text label and provide a larger target area.
![](/assets/images/docs/catalog-widget-placeholder.png)
Animates the opacity of a widget.
![](/assets/images/docs/catalog-widget-placeholder.png)
Scales and positions its child within itself according to fit.
![](/assets/images/docs/widget-catalog/material-3-floating-action-button.png)
Clickable block containing an icon that keeps a key action always in reach.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that implements the flow layout algorithm.
![](/assets/images/docs/catalog-widget-placeholder.png)
The Flutter logo, in widget form. This widget respects the IconTheme.
![](/assets/images/docs/catalog-widget-placeholder.png)
An optional container for grouping together multiple form field widgets (e.g. TextField widgets).
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that applies a translation expressed as a fraction of the box's size before painting its child.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that sizes its child to a fraction of the total available space. For more details about the layout algorithm, see RenderFractionallySizedOverflowBox.
![](/assets/images/docs/catalog-widget-placeholder.png)
Widget that builds itself based on the latest snapshot of interaction with a Future.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/widget-catalog/material-grid-view.png)
A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout. The GridView widget implements this component.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that marks its child as being a candidate for hero animations.
![](https://flutter.github.io/assets-for-api-docs/assets/widgets/icon.png)
A Material Design icon.
![](/assets/images/docs/widget-catalog/material-3-icon-button.png)
Clickable icons to prompt app users to take supplementary actions.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
A widget that displays an image.
![](/assets/images/docs/catalog-widget-placeholder.png)
An abstract class for building widgets that animate changes to their properties.
![](/assets/images/docs/catalog-widget-placeholder.png)
A Stack that shows a single child from a list of children.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that enables pan and zoom interactions with its child.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that sizes its child to the child's intrinsic height.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that sizes its child to the child's intrinsic width.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that calls a callback whenever the user presses or releases a key on a keyboard.
![](/assets/images/docs/catalog-widget-placeholder.png)
Builds a widget tree that can depend on the parent widget's size.
![](/assets/images/docs/catalog-widget-placeholder.png)
A box that limits its size only when it's unconstrained.
![](/assets/images/docs/widget-catalog/material-3-progress-indicator.png)
Vertical line that changes color as an ongoing process, such as loading an app or submitting a form, completes.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that arranges its children sequentially along a given axis, forcing them to the dimension of the parent in the other axis.
![](/assets/images/docs/widget-catalog/material-3-list.png)
A single fixed-height row that typically contains some text as well as a leading or trailing icon.
![](/assets/images/docs/widget-catalog/material-list-tile.png)
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....
![](/assets/images/docs/catalog-widget-placeholder.png)
Makes its child draggable starting from long press.
![](https://storage.googleapis.com/material-design/publish/material_v_11/assets/0Bx4BSt6jniD7Y1huOXVQdlFPMmM/materialdesign_introduction.png)
A convenience widget that wraps a number of widgets that are commonly required for applications implementing Material Design.
![](/assets/images/docs/catalog-widget-placeholder.png)
Establishes a subtree in which media queries resolve to the given data.
![](/assets/images/docs/widget-catalog/material-3-menu.png)
Container that displays a list of choices on a temporary surface.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that merges the semantics of its descendants.
![](/assets/images/docs/widget-catalog/material-3-navigation-rail.png)
Persistent container on the leading edge of tablet and desktop screens to navigate to parts of an app.
![](/assets/images/docs/widget-catalog/material-3-navigation-bar.png)
Persistent container that enables switching between primary destinations in an app.
![](/assets/images/docs/widget-catalog/material-3-navigation-drawer.png)
Container that slides from the leading edge of the app to navigate to other sections in an app.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
A scrolling view inside of which can be nested other scrolling views, with their scroll positions being intrinsically linked.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that listens for Notifications bubbling up the tree.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
A widget that makes its child partially transparent.
![](/assets/images/docs/widget-catalog/material-outlined-button.png)
A Material Design outlined button, essentially a TextButton with an outlined border.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent.
A widget that insets its child by the given padding.
![](/assets/images/docs/catalog-widget-placeholder.png)
A scrollable list that works page by page.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that draws a box that represents where other widgets will one day be added.
![](/assets/images/docs/widget-catalog/material-popup-menu-button.png)
Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/widget-catalog/material-3-radio-button.png)
Form control that app users can set or clear to select only one option from a set.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that displays a dart:ui.Image directly.
![](https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B7WCemMG6e0VS2kzSmZwNnNKQVk/patterns-swipe-to-refresh.png)
A Material Design pull-to-refresh wrapper for scrollables.
![](/assets/images/docs/catalog-widget-placeholder.png)
A list whose items the user can interactively reorder by dragging.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that rotates its child by a integral number of quarter turns.
![](/assets/images/docs/catalog-widget-placeholder.png)
Animates the rotation of a widget.
Layout a list of child widgets in the horizontal direction.
![](https://storage.googleapis.com/material-design/publish/material_v_11/assets/0Bx4BSt6jniD7T0hfM01sSmRyTG8/layout_structure_regions_mobile.png)
Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.
![](/assets/images/docs/catalog-widget-placeholder.png)
Animates the scale of transformed widget.
![](/assets/images/docs/catalog-widget-placeholder.png)
Controls how Scrollable widgets behave in a subtree.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
A Material Design scrollbar. A scrollbar indicates which portion of a Scrollable widget is actually visible.
![](/assets/images/docs/widget-catalog/material-3-segmented-button.png)
Single or multiple selected clickable blocks to help people select options, switch views, or sort elements.
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VVGNnN3NvMGdoQTg/components_dialogs.png)
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
Animates its own size and clips and aligns the child.
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...
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that is a specific size but passes its original constraints through to its child, which will probably overflow.
![](/assets/images/docs/catalog-widget-placeholder.png)
Animates the position of a widget relative to its normal position.
![](/assets/images/docs/widget-catalog/material-3-slider.png)
Form control that enables selecting a range of values.
![](/assets/images/docs/widget-catalog/material-app-bar.png)
A material design app bar that integrates with a CustomScrollView.
![](/assets/images/docs/catalog-widget-placeholder.png)
A delegate that supplies children for slivers using a builder callback.
![](/assets/images/docs/catalog-widget-placeholder.png)
A delegate that supplies children for slivers using an explicit list.
![](/assets/images/docs/catalog-widget-placeholder.png)
A sliver that places multiple box children with the same main axis extent in a linear array.
![](/assets/images/docs/catalog-widget-placeholder.png)
A sliver that places multiple box children in a two dimensional arrangement.
![](/assets/images/docs/catalog-widget-placeholder.png)
A sliver that places multiple box children in a linear array along the main axis.
![](/assets/images/docs/catalog-widget-placeholder.png)
A sliver that applies padding on each side of another sliver.
![](/assets/images/docs/catalog-widget-placeholder.png)
A sliver whose size varies when the sliver is scrolled to the edge of the viewport opposite the sliver's GrowthDirection.
![](/assets/images/docs/catalog-widget-placeholder.png)
A sliver that contains a single box widget.
![](/assets/images/docs/widget-catalog/material-3-snackbar.png)
Brief messages about app processes that display at the bottom of the screen.
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...
![](https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VTndyUnNCR2tQREE/components_steppers.png)
A Material Design stepper widget that displays progress through a sequence of steps.
![](/assets/images/docs/catalog-widget-placeholder.png)
Widget that builds itself based on the latest snapshot of interaction with a Stream.
![](/assets/images/docs/widget-catalog/material-3-switch.png)
Toggle control that changes the state of a single item to on or off.
![](/assets/images/docs/widget-catalog/material-3-tab-bar.png)
Layered containers that organize content across different screens, data sets, and other interactions.
![](/assets/images/docs/widget-catalog/material-tab-bar.png)
A page view that displays the widget which corresponds to the currently selected tab. Typically used in conjunction with a TabBar.
![](/assets/images/docs/widget-catalog/material-tab-bar.png)
Coordinates tab selection between a TabBar and a TabBarView.
![](/assets/images/docs/widget-catalog/material-tab-bar.png)
Displays a row of small circular indicators, one per tab. The selected tab's indicator is highlighted. Often used in conjunction with a TabBarView.
![](/assets/images/docs/catalog-widget-placeholder.png)
Displays child widgets in rows and columns.
A run of text with a single style.
![](https://material-design.storage.googleapis.com/publish/material_v_9/0B7WCemMG6e0VNDg3V3ZjU2hsNGc/components_buttons_usage3.png)
A Material Design text button. A simple flat button without a border outline.
![](/assets/images/docs/widget-catalog/material-3-text-field.png)
Box into which app users can enter text. They appear in forms and dialogs.
![](/assets/images/docs/catalog-widget-placeholder.png)
Applies a theme to descendant widgets. A theme describes the colors and typographic choices of an application.
![](/assets/images/docs/widget-catalog/material-3-time-picker.png)
Clock interface used to select and set a specific time.
![](/assets/images/docs/widget-catalog/material-tooltip.png)
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...
A widget that applies a transformation before painting its child.
![](/assets/images/docs/widget-catalog/material-widgets-app.png)
A convenience class that wraps a number of widgets that are commonly required for an application.
![](/assets/images/docs/catalog-widget-placeholder.png)
A widget that displays its children in multiple horizontal or vertical runs.