Latest samples and snippets for widgets

Widgets:Transitions

The following code implements the [ScaleTransition] as seen in the video above:
WIDGETS TRANSITIONS

Widgets:WidgetSpan

WIDGETS WIDGETSPAN

Widgets:Basic

This example uses the [Flow] widget to create a menu that opens and closes as it is interacted with, shown above. The color of the button in the menu changes to indicate which one has been selected.
WIDGETS BASIC

Widgets:Actions

This example creates a custom [Action] subclass `ModifyAction` for modifying a model, and another, `SaveAction` for saving it. This example demonstrates passing arguments to the [Intent] to be carried to the [Action]. Actions can get data either from their own construction (like the `model` in this example), or from the intent passed to them when invoked (like the increment `amount` in this example). This example also demonstrates how to use Intents to limit a widget's dependencies on its surroundings. The `SaveButton` widget defined in this example can invoke actions defined in its ancestor widgets, which can be customized to match the part of the widget tree that it is in. It doesn't need to know about the `SaveAction` class, only the `SaveIntent`, and it only needs to know about a value notifier, not the entire model.
WIDGETS ACTIONS

Widgets:PageView

WIDGETS PAGEVIEW

Widgets:Navigator

Typical usage is as follows:
WIDGETS NAVIGATOR

Widgets:ImplicitAnimations

The following example (depicted above) transitions an AnimatedContainer between two states. It adjusts the `height`, `width`, `color`, and [alignment] properties when tapped.
WIDGETS IMPLICITANIMATIONS

Widgets:Basic

The following sample has an [AbsorbPointer] widget wrapping the button on top of the stack, which absorbs pointer events, preventing its child button __and__ the button below it in the stack from receiving the pointer events.
WIDGETS BASIC

Widgets:ScrollView

WIDGETS SCROLLVIEW

Widgets:ScrollController

WIDGETS SCROLLCONTROLLER

Widgets:Image

The following sample demonstrates how to use this builder to implement an image that fades in once it's been loaded. This sample contains a limited subset of the functionality that the [FadeInImage] widget provides out of the box.
WIDGETS IMAGE

Widgets:Transitions

The following code implements the [FadeTransition] using the Flutter logo:
WIDGETS TRANSITIONS

Widgets:SingleChildScrollView

In this example, the column becomes either as big as viewport, or as big as the contents, whichever is biggest.
WIDGETS SINGLECHILDSCROLLVIEW

Widgets:Container

WIDGETS CONTAINER

Widgets:Basic

In this example, the image is stretched to fill the entire [Container], which would not happen normally without using FittedBox.
WIDGETS BASIC

Widgets:Transitions

This code defines a widget that uses [SizeTransition] to change the size of [FlutterLogo] continually. It is built with a [Scaffold] where the internal widget has space to change its size.
WIDGETS TRANSITIONS

Widgets:Form

This example shows a [Form] with one [TextFormField] to enter an email address and an [ElevatedButton] to submit the form. A [GlobalKey] is used here to identify the [Form] and validate input. ![](https://flutter.github.io/assets-for-api-docs/assets/widgets/form.png)
WIDGETS FORM

Widgets:Transitions

The following code implements the [RotationTransition] as seen in the video above:
WIDGETS TRANSITIONS

Widgets:GestureDetector

WIDGETS GESTUREDETECTOR

Widgets:Image

WIDGETS IMAGE

Widgets:Basic

This example shows a [CustomMultiChildLayout] widget being used to lay out colored blocks from start to finish in a cascade that has some overlap. It responds to changes in [Directionality] by re-laying out its children.
WIDGETS BASIC

Widgets:Basic

This example shows a [ClipRRect] that adds round corners to an image.
WIDGETS BASIC

Widgets:ValueListenableBuilder

WIDGETS VALUELISTENABLEBUILDER

Widgets:Basic

This example makes a [Container] react to being entered by a mouse pointer, showing a count of the number of entries and exits.
WIDGETS BASIC

Widgets:TweenAnimationBuilder

This example shows an [IconButton] that "zooms" in when the widget first builds (its size smoothly increases from 0 to 24) and whenever the button is pressed, it smoothly changes its size to the new target value of either 48 or 24.
WIDGETS TWEENANIMATIONBUILDER

Widgets:Transitions

The following code implements the [AlignTransition] as seen in the video above:
WIDGETS TRANSITIONS

Widgets:ScrollPhysics

WIDGETS SCROLLPHYSICS

Widgets:Basic

WIDGETS BASIC

Widgets:Navigator

Typical usage is as follows:
WIDGETS NAVIGATOR

Widgets:Routes

WIDGETS ROUTES

Widgets:DefaultTextEditingShortcuts

WIDGETS DEFAULTTEXTEDITINGSHORTCUTS

Widgets:Basic

This example shows how to use a [PhysicalShape] on a centered [SizedBox] to clip it to a rounded rectangle using a [ShapeBorderClipper] and give it an orange color along with a shadow.
WIDGETS BASIC

Widgets:Navigator

Typical usage is as follows:
WIDGETS NAVIGATOR

Widgets:Transitions

The following code implements the [PositionedTransition] as seen in the video above:
WIDGETS TRANSITIONS

Widgets:DefaultTextEditingShortcuts

WIDGETS DEFAULTTEXTEDITINGSHORTCUTS

Widgets:Basic

This example shows a [FlutterLogo] widget when the `_offstage` member field is false, and hides it without any room in the parent when it is true. When offstage, this app displays a button to get the logo size, which will be displayed in a [SnackBar].
WIDGETS BASIC

Widgets:Transitions

Creates a [CustomScrollView] with a [SliverFixedExtentList] that uses a [SliverFadeTransition] to fade the list in and out.
WIDGETS TRANSITIONS

Widgets:Async

This sample shows a [FutureBuilder] that displays a loading spinner while it loads data. It displays a success icon and text if the [Future] completes with a result, or an error icon and text if the [Future] completes with an error. Assume the `_calculation` field is set by pressing a button elsewhere in the UI.
WIDGETS ASYNC

Widgets:Basic

WIDGETS BASIC

Widgets:ImplicitAnimations

Creates a [CustomScrollView] with a [SliverFixedExtentList] and a [FloatingActionButton]. Pressing the button animates the lists' opacity.
WIDGETS IMPLICITANIMATIONS

Widgets:Basic

This sample shows a [FractionallySizedBox] whose one child is 50% of the box's size per the width and height factor parameters, and centered within that box by the alignment parameter.
WIDGETS BASIC

Widgets:AnimatedCrossFade

WIDGETS ANIMATEDCROSSFADE

Widgets:Navigator

Typical usage is as follows:
WIDGETS NAVIGATOR

Widgets:Framework

WIDGETS FRAMEWORK

Widgets:Navigator

The following example demonstrates how a nested [Navigator] can be used to present a standalone user registration journey. Even though this example uses two [Navigator]s to demonstrate nested [Navigator]s, a similar result is possible using only a single [Navigator]. Run this example with `flutter run --route=/signup` to start it with the signup flow instead of on the home page.
WIDGETS NAVIGATOR

Widgets:NestedScrollView

This simple example shows a [NestedScrollView] whose header contains a floating [SliverAppBar]. By using the [floatHeaderSlivers] property, the floating behavior is coordinated between the outer and inner [Scrollable]s, so it behaves as it would in a single scrollable.
WIDGETS NESTEDSCROLLVIEW

Widgets:Image

WIDGETS IMAGE

Widgets:ImplicitAnimations

WIDGETS IMPLICITANIMATIONS

Widgets:ImplicitAnimations

The following code implements the [AnimatedPadding] widget, using a [curve] of [Curves.easeInOut].
WIDGETS IMPLICITANIMATIONS

Widgets:Binding

WIDGETS BINDING

Widgets:Actions

WIDGETS ACTIONS

Widgets:PageView

WIDGETS PAGEVIEW

Widgets:Scrollbar

WIDGETS SCROLLBAR

Widgets:Basic

This example shows how to use an [Expanded] widget in a [Row] with multiple children expanded, utilizing the [flex] factor to prioritize available space. ![This results in a wide amber box, followed by a thin blue box, with a medium width amber box at the end.](https://flutter.github.io/assets-for-api-docs/assets/widgets/expanded_row.png)
WIDGETS BASIC

Widgets:Transitions

The following code implements the [SlideTransition] as seen in the video above:
WIDGETS TRANSITIONS

Widgets:ImplicitAnimations

The following code implements the [AnimatedAlign] widget, using a [curve] of [Curves.fastOutSlowIn].
WIDGETS IMPLICITANIMATIONS

Widgets:SingleChildScrollView

In this example, the children are spaced out equally, unless there's no more room, in which case they stack vertically and scroll. When using this technique, [Expanded] and [Flexible] are not useful, because in both cases the "available space" is infinite (since this is in a viewport). The next section describes a technique for providing a maximum height constraint.
WIDGETS SINGLECHILDSCROLLVIEW

Widgets:RestorationProperties

WIDGETS RESTORATIONPROPERTIES

Widgets:Navigator

WIDGETS NAVIGATOR

Widgets:NestedScrollView

This example shows a [NestedScrollView] whose header is the combination of a [TabBar] in a [SliverAppBar] and whose body is a [TabBarView]. It uses a [SliverOverlapAbsorber]/[SliverOverlapInjector] pair to make the inner lists align correctly, and it uses [SafeArea] to avoid any horizontal disturbances (e.g. the "notch" on iOS when the phone is horizontal). In addition, [PageStorageKey]s are used to remember the scroll position of each tab's list.
WIDGETS NESTEDSCROLLVIEW

Widgets:Actions

This sample implements a custom text input field that handles the [DeleteCharacterIntent] intent, as well as a US telephone number input widget that consists of multiple text fields for area code, prefix and line number. When the backspace key is pressed, the phone number input widget sends the focus to the preceding text field when the currently focused field becomes empty.
WIDGETS ACTIONS

Widgets:Basic

WIDGETS BASIC

Widgets:Transitions

This code defines a widget that spins a green square continually. It is built with an [AnimatedBuilder] and makes use of the [child] feature to avoid having to rebuild the [Container] each time.
WIDGETS TRANSITIONS

Widgets:PageStorage

This sample shows how to explicitly use a [PageStorage] to store the states of its children pages. Each page includes a scrollable list, whose position is preserved when switching between the tabs thanks to the help of [PageStorageKey].
WIDGETS PAGESTORAGE

Widgets:App

WIDGETS APP

Widgets:Image

The following sample uses [loadingBuilder] to show a [CircularProgressIndicator] while an image loads over the network.
WIDGETS IMAGE

Widgets:Actions

This example shows how ActionListener handles adding and removing of the [listener] in the widget lifecycle.
WIDGETS ACTIONS

Widgets:Basic

The following example shows a widget that hides its content one second after being hovered, and also exposes the enter and exit callbacks. Because the widget conditionally creates the `MouseRegion`, and leaks the hover state, it needs to take the restriction into consideration. In this case, since it has access to the event that triggers the disappearance of the `MouseRegion`, it simply trigger the exit callback during that event as well.
WIDGETS BASIC

Widgets:Transitions

The following code implements the [DecoratedBoxTransition] as seen in the video above:
WIDGETS TRANSITIONS

Widgets:Transitions

The following example implements a simple counter that utilizes an [AnimatedBuilder] to limit rebuilds to only the [Text] widget. The current count is stored in a [ValueNotifier], which rebuilds the [AnimatedBuilder]'s contents when its value is changed.
WIDGETS TRANSITIONS

Widgets:Image

The following sample uses [errorBuilder] to show a '😢' in place of the image that fails to load, and prints the error to the console.
WIDGETS IMAGE

Widgets:Sliver

WIDGETS SLIVER

Widgets:Scrollbar

WIDGETS SCROLLBAR

Widgets:Navigator

Typical usage is as follows:
WIDGETS NAVIGATOR

Widgets:Basic

The following sample has an [IgnorePointer] widget wrapping the `Column` which contains a button. When [ignoring] is set to `true` anything inside the `Column` can not be tapped. When [ignoring] is set to `false` anything inside the `Column` can be tapped.
WIDGETS BASIC

Widgets:NestedScrollView

[NestedScrollViewState] can be obtained using a [GlobalKey]. Using the following setup, you can access the inner scroll controller using `globalKey.currentState.innerController`.
WIDGETS NESTEDSCROLLVIEW

Widgets:Basic

This examples shows how AspectRatio sets width when its parent's width constraint is infinite. Since its parent's allowed height is a fixed value, the actual width is determined via the given AspectRatio. Since the height is fixed at 100.0 in this example and the aspect ratio is set to 16 / 9, the width should then be 100.0 / 9 * 16.
WIDGETS BASIC

Widgets:Basic

This example makes a [Container] react to being touched, showing a count of the number of pointer downs and ups.
WIDGETS BASIC

Widgets:Icon

WIDGETS ICON

Widgets:GestureDetector

This example uses a [Container] that wraps a [GestureDetector] widget which detects a tap. Since the [GestureDetector] does not have a child, it takes on the size of its parent, making the entire area of the surrounding [Container] clickable. When tapped, the [Container] turns yellow by setting the `_color` field. When tapped again, it goes back to white.
WIDGETS GESTUREDETECTOR

Widgets:ReorderableList

WIDGETS REORDERABLELIST

Widgets:Scrollbar

WIDGETS SCROLLBAR

Widgets:Actions

This example shows how keyboard interaction can be added to a custom control that changes color when hovered and focused, and can toggle a light when activated, either by touch or by hitting the `X` key on the keyboard when the "And Me" button has the keyboard focus (be sure to use TAB to move the focus to the "And Me" button before trying it out). This example defines its own key binding for the `X` key, but in this case, there is also a default key binding for [ActivateAction] in the default key bindings created by [WidgetsApp] (the parent for [MaterialApp], and [CupertinoApp]), so the `ENTER` key will also activate the buttons.
WIDGETS ACTIONS

Widgets:Transitions

The following code implements the [RelativePositionedTransition] as seen in the video above:
WIDGETS TRANSITIONS

Widgets:Basic

This example shows various [ClipRRect]s applied to containers.
WIDGETS BASIC

Widgets:Icon

WIDGETS ICON

Widgets:SlottedRenderObjectWidget

This example uses the [SlottedMultiChildRenderObjectWidgetMixin] in combination with the [SlottedContainerRenderObjectMixin] to implement a widget that provides two slots: topLeft and bottomRight. The widget arranges the children in those slots diagonally.
WIDGETS SLOTTEDRENDEROBJECTWIDGET

Widgets:FadeInImage

WIDGETS FADEINIMAGE

Widgets:Spacer

WIDGETS SPACER

Widgets:Basic

The following example shows a blue rectangular that turns yellow when hovered. Since the hover state is completely contained within a widget that unconditionally creates the `MouseRegion`, you can ignore the aforementioned restriction.
WIDGETS BASIC

Widgets:Routes

This sample demonstrates how to create a restorable dialog. This is accomplished by enabling state restoration by specifying [WidgetsApp.restorationScopeId] and using [Navigator.restorablePush] to push [RawDialogRoute] when the button is tapped. {@macro flutter.widgets.RestorationManager}
WIDGETS ROUTES

Widgets:GestureDetector

This example contains a black light bulb wrapped in a [GestureDetector]. It turns the light bulb yellow when the "TURN LIGHT ON" button is tapped by setting the `_lights` field, and off again when "TURN LIGHT OFF" is tapped.
WIDGETS GESTUREDETECTOR

Widgets:Transitions

This code defines a widget called `Spinner` that spins a green square continually. It is built with an [AnimatedWidget].
WIDGETS TRANSITIONS

Widgets:Basic

This example shows how to use an [Expanded] widget in a [Column] so that its middle child, a [Container] here, expands to fill the space. ![This results in two thin blue boxes with a larger amber box in between.](https://flutter.github.io/assets-for-api-docs/assets/widgets/expanded_column.png)
WIDGETS BASIC

Widgets:Text

WIDGETS TEXT

Widgets:RestorationProperties

A [StatefulWidget] that has a restorable [int] property.
WIDGETS RESTORATIONPROPERTIES

Widgets:NestedScrollView

This simple example shows a [NestedScrollView] whose header contains a snapping, floating [SliverAppBar]. _Without_ setting any additional flags, e.g [NestedScrollView.floatHeaderSlivers], the [SliverAppBar] will animate in and out without floating. The [SliverOverlapAbsorber] and [SliverOverlapInjector] maintain the proper alignment between the two separate scroll views.
WIDGETS NESTEDSCROLLVIEW

Widgets:ImplicitAnimations

The following example transitions an AnimatedPositioned between two states. It adjusts the `height`, `width`, and [Positioned] properties when tapped.
WIDGETS IMPLICITANIMATIONS

Widgets:App

WIDGETS APP

Widgets:DraggableScrollableSheet

WIDGETS DRAGGABLESCROLLABLESHEET

Widgets:Image

WIDGETS IMAGE

Widgets:Async

This sample shows a [StreamBuilder] that listens to a Stream that emits bids for an auction. Every time the StreamBuilder receives a bid from the Stream, it will display the price of the bid below an icon. If the Stream emits an error, the error is displayed below an error icon. When the Stream finishes emitting bids, the final price is displayed.
WIDGETS ASYNC

Widgets:Localizations

WIDGETS LOCALIZATIONS

Widgets:Transitions

The following code implements the [DefaultTextStyleTransition] that shows a transition between thick blue font and thin red font.
WIDGETS TRANSITIONS

Widgets:ImplicitAnimations

This code defines a widget that uses [AnimatedSlide] to translate a [FlutterLogo] up or down by the amount of it's height with each press of the corresponding button.
WIDGETS IMPLICITANIMATIONS

Widgets:Binding

WIDGETS BINDING