Awesome Flutter

Flutter widget catalog

Every widget in the official catalog, by category.

Accessibility widgets

  • ExcludeSemantics
    A widget that drops all the semantics of its descendants. This can be used to hide subwidgets that would otherwise be…
  • MergeSemantics
    A widget that merges the semantics of its descendants.
  • Semantics
    A widget that annotates the widget tree with a description of the meaning of the widgets. Used by accessibility tools…

Animation and motion widgets

  • AlignTransition
    Animated version of an Align that animates its Align.alignment property.
  • 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…
  • 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…
  • 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…
  • AnimatedPhysicalModel
    Animated version of PhysicalModel.
  • AnimatedPositioned
    Animated version of Positioned which automatically transitions the child's position over a given duration whenever the…
  • AnimatedScale
    Animated version of Transform.scale that automatically transitions the child's scale over a given duration whenever…
  • 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.
  • DecoratedBoxTransition
    Animated version of a DecoratedBox that animates the different properties of its Decoration.
  • DefaultTextStyleTransition
    Animated version of a DefaultTextStyle that animates the different properties of its TextStyle.
  • FadeTransition
    Animates the opacity of a widget.
  • Hero
    A widget that marks its child as being a candidate for hero animations.
  • ImplicitlyAnimatedWidget
    An abstract class for building widgets that animate changes to their properties.
  • MatrixTransition
    Animates the Matrix4 of a transformed widget.
  • PositionedTransition
    Animated version of Positioned which takes a specific Animation to transition the child's position from a start…
  • RelativePositionedTransition
    Animated version of Positioned which transitions the child's position based on the value of rect relative to a…
  • RepeatingAnimationBuilder
    A widget that animates an Animatable value and repeats indefinitely.
  • RotationTransition
    Animates the rotation of a widget.
  • ScaleTransition
    Animates the scale of transformed widget.
  • SizeTransition
    Animates its own size and clips and aligns the child.
  • SlideTransition
    Animates the position of a widget relative to its normal position.
  • SliverFadeTransition
    Animates the opacity of a sliver widget.

Assets, images, and icon widgets

  • AssetBundle
    Asset bundles contain resources, such as images and strings, that can be used by an application. Access to these…
  • Icon
    A Material Design icon.
  • Image
    A widget that displays an image.
  • RawImage
    A widget that displays a dart:ui.Image directly.

Async widgets

  • FutureBuilder Video
    Widget that builds itself based on the latest snapshot of interaction with a Future.
  • StreamBuilder
    Widget that builds itself based on the latest snapshot of interaction with a Stream.

Basic widgets

  • Column
    Layout a list of child widgets in the vertical direction.
  • Container
    A convenience widget that combines common painting, positioning, and sizing widgets.
  • ElevatedButton
    A Material Design elevated button. A filled button whose material elevates when pressed.
  • FlutterLogo Video
    The Flutter logo, in widget form. This widget respects the IconTheme.
  • Placeholder
    A widget that draws a box that represents where other widgets will one day be added.
  • Row
    Layout a list of child widgets in the horizontal direction.
  • Scaffold
    Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack…
  • Text
    A run of text with a single style.

Cupertino widgets

Input widgets

  • Autocomplete Video
    A widget for helping the user make a selection by entering some text and choosing from among a list of options.
  • 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…
  • KeyboardListener
    A widget that calls a callback whenever the user presses or releases a key on a keyboard.

Interaction model widgets

  • AbsorbPointer
    A widget that absorbs pointers during hit testing. When absorbing is true, this widget prevents its subtree from…
  • Dismissible
    A widget that can be dismissed by dragging in the indicated direction. Dragging or flinging this widget in the…
  • Draggable Video
    A widget that can be dragged from to a DragTarget. When a draggable widget recognizes the start of a drag gesture, it…
  • DraggableScrollableSheet
    A container for a Scrollable that responds to drag gestures by resizing the scrollable until a limit is reached, and…
  • DragTarget
    A widget that receives data when a Draggable widget is dropped. When a draggable is dragged on top of a drag target…
  • GestureDetector Video
    A widget that detects gestures. Attempts to recognize gestures that correspond to its non-null callbacks. If this…
  • IgnorePointer
    A widget that is invisible during hit testing. When ignoring is true, this widget (and its subtree) is invisible to…
  • InteractiveViewer Video
    A widget that enables pan and zoom interactions with its child.
  • LongPressDraggable
    Makes its child draggable starting from long press.
  • Navigator
    A widget that manages a set of child widgets with a stack discipline. Many apps have a navigator near the top of their…
  • Scrollable
    Scrollable implements the interaction model for a scrollable widget, including gesture recognition, but does not have…

Layout widgets

  • Align
    A widget that aligns its child within itself and optionally sizes itself based on the child's size.
  • AspectRatio
    A widget that attempts to size the child to a specific aspect ratio.
  • Baseline Video
    Container that positions its child according to the child's baseline.
  • CarouselView Video
    A Material carousel widget that presents a scrollable list of items, each of which can dynamically change size based…
  • Center
    Alignment block that centers its child within itself.
  • ConstrainedBox
    A widget that imposes additional constraints on its child.
  • CustomMultiChildLayout
    A widget that uses a delegate to size and position multiple children.
  • CustomScrollView
    A ScrollView that creates custom scroll effects using slivers.
  • CustomSingleChildLayout
    A widget that defers the layout of its single child to a delegate.
  • Expanded
    A widget that expands a child of a Row, Column, or Flex.
  • FittedBox
    Scales and positions its child within itself according to fit.
  • Flow Video
    A widget that implements the flow layout algorithm.
  • FractionallySizedBox
    A widget that sizes its child to a fraction of the total available space. For more details about the layout algorithm…
  • GridView Video
    A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout. The GridView widget…
  • IndexedStack
    A Stack that shows a single child from a list of children.
  • 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.
  • 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.
  • ListBody
    A widget that arranges its children sequentially along a given axis, forcing them to the dimension of the parent in…
  • ListView
    A scrollable, linear list of widgets. ListView is the most commonly used scrolling widget. It displays its children…
  • Offstage
    A widget that lays the child out as if it was in the tree, but without painting anything, without making the child…
  • OverflowBar
    A widget that lays out its children in a row unless they "overflow" the available horizontal space, in which case it…
  • OverflowBox
    A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to…
  • Padding
    A widget that insets its child by the given padding.
  • SizedBox
    A box with a specified size. If given a child, this widget forces its child to have a specific width and/or height…
  • SizedOverflowBox
    A widget that is a specific size but passes its original constraints through to its child, which will probably overflow.
  • SliverAppBar Video
    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.
  • SliverFillRemaining Video
    A sliver that contains a single box child that fills the remaining space in the viewport.
  • 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…
  • SliverToBoxAdapter Video
    A sliver that contains a single box widget.
  • Stack
    This class is useful if you want to overlap several children in a simple way, for example having some text and an…
  • Table
    Displays child widgets in rows and columns.
  • Transform
    A widget that applies a transformation before painting its child.
  • Wrap
    A widget that displays its children in multiple horizontal or vertical runs.

Material component widgets

  • AlertDialog
    Hovering containers that prompt app users to provide more data or make a decision.
  • AppBar
    Container that displays content and actions at the top of a screen.
  • Badge
    Icon-like block that conveys dynamic content such as counts or status. It can include labels or numbers.
  • Bottom app bar
    Container that displays navigation and key actions at the bottom of a screen.
  • Bottom sheet
    Containers that anchor supplementary content to the bottom of the screen.
  • Card
    Container for short, related pieces of content displayed in a box with rounded corners and a drop shadow.
  • Checkbox
    Form control that app users can set or clear to select one or more options from a set.
  • Chip
    Small blocks that simplify entering information, making selections, filtering content, or triggering actions.
  • Common buttons
    Clickable blocks that start an action, such as sending an email, sharing a document, or liking a comment.
  • DatePicker
    Calendar interface used to select a date or a range of dates.
  • Divider
    Thin line that groups content in lists and containers.
  • Extended FloatingActionButton
    Clickable block that triggers an action. These wider blocks can fit a text label and provide a larger target area.
  • FloatingActionButton
    Clickable block containing an icon that keeps a key action always in reach.
  • IconButton
    Clickable icons to prompt app users to take supplementary actions.
  • LinearProgressIndicator
    Vertical line that changes color as an ongoing process, such as loading an app or submitting a form, completes.
  • ListTile
    A single fixed-height row that typically contains some text as well as a leading or trailing icon.
  • Menu
    Container that displays a list of choices on a temporary surface.
  • Navigation rail
    Persistent container on the leading edge of tablet and desktop screens to navigate to parts of an app.
  • NavigationBar Video
    Persistent container that enables switching between primary destinations in an app.
  • NavigationDrawer
    Container that slides from the leading edge of the app to navigate to other sections in an app.
  • Radio
    Form control that app users can set or clear to select only one option from a set.
  • SegmentedButton Video
    Single or multiple selected clickable blocks to help people select options, switch views, or sort elements.
  • Slider
    Form control that enables selecting a range of values.
  • SnackBar
    Brief messages about app processes that display at the bottom of the screen.
  • Switch
    Toggle control that changes the state of a single item to on or off.
  • TabBar
    Layered containers that organize content across different screens, data sets, and other interactions.
  • TextField
    Box into which app users can enter text. They appear in forms and dialogs.
  • TimePicker
    Clock interface used to select and set a specific time.

Painting and effect widgets

  • BackdropFilter
    A widget that applies a filter to the existing painted content and then paints a child. This effect is relatively…
  • 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.
  • CustomPaint
    A widget that provides a canvas on which to draw during the paint phase.
  • DecoratedBox
    A widget that paints a Decoration either before or after its child paints.
  • FractionalTranslation
    A widget that applies a translation expressed as a fraction of the box's size before painting its child.
  • Opacity
    A widget that makes its child partially transparent.
  • RotatedBox Video
    A widget that rotates its child by a integral number of quarter turns.

Scrolling widgets

  • NestedScrollView Video
    A scrolling view inside of which can be nested other scrolling views, with their scroll positions being intrinsically…
  • NotificationListener
    A widget that listens for Notifications bubbling up the tree.
  • PageView
    A scrollable list that works page by page.
  • RefreshIndicator Video
    A Material Design pull-to-refresh wrapper for scrollables.
  • ReorderableListView
    A list whose items the user can interactively reorder by dragging.
  • Scrollbar Video
    A Material Design scrollbar. A scrollbar indicates which portion of a Scrollable widget is actually visible.
  • ScrollConfiguration
    Controls how Scrollable widgets behave in a subtree.
  • 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…

Styling widgets

  • MediaQuery
    Establishes a subtree in which media queries resolve to the given data.
  • Theme
    Applies a theme to descendant widgets. A theme describes the colors and typographic choices of an application.

Text widgets

  • DefaultTextStyle
    The text style to apply to descendant Text widgets without explicit style.
  • RichText
    The RichText widget displays text that uses multiple different styles. The text to display is described using a tree…