- 03 October, 2023
- FlutterHQ.com
106 Flutter code samples, examples and snippets for the widgets-library
Get a better understanding on how to user the widgets-library with our list of code-samples, examples and snippets.
Latest samples and snippets for widgets
Widgets:Transitions
sample.packages.flutter.lib.src.widgets.transitions.233
-
sample.packages.flutter.lib.src.widgets.transitions.233
The following code implements the [ScaleTransition] as seen in the video
above:
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.5358
-
sample.packages.flutter.lib.src.widgets.basic.5358
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:Actions
sample.packages.flutter.lib.src.widgets.actions.584
-
sample.packages.flutter.lib.src.widgets.actions.584
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:Navigator
sample.packages.flutter.lib.src.widgets.navigator.2116
-
sample.packages.flutter.lib.src.widgets.navigator.2116
Typical usage is as follows:
Widgets:ImplicitAnimations
sample.packages.flutter.lib.src.widgets.implicit_animations.580
-
sample.packages.flutter.lib.src.widgets.implicit_animations.580
The following example (depicted above) transitions an AnimatedContainer
between two states. It adjusts the `height`, `width`, `color`, and
[alignment] properties when tapped.
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.6578
-
sample.packages.flutter.lib.src.widgets.basic.6578
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:ScrollController
snippet.packages.flutter.lib.src.widgets.scroll_controller.277
-
snippet.packages.flutter.lib.src.widgets.scroll_controller.277
Widgets:Image
sample.packages.flutter.lib.src.widgets.image.762
-
sample.packages.flutter.lib.src.widgets.image.762
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:Transitions
sample.packages.flutter.lib.src.widgets.transitions.510
-
sample.packages.flutter.lib.src.widgets.transitions.510
The following code implements the [FadeTransition] using
the Flutter logo:
Widgets:SingleChildScrollView
sample.packages.flutter.lib.src.widgets.single_child_scroll_view.126
-
sample.packages.flutter.lib.src.widgets.single_child_scroll_view.126
In this example, the column becomes either as big as viewport, or as big as
the contents, whichever is biggest.
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.1615
-
sample.packages.flutter.lib.src.widgets.basic.1615
In this example, the image is stretched to fill the entire [Container], which would
not happen normally without using FittedBox.
Widgets:Transitions
sample.packages.flutter.lib.src.widgets.transitions.414
-
sample.packages.flutter.lib.src.widgets.transitions.414
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:Form
sample.packages.flutter.lib.src.widgets.form.22
-
sample.packages.flutter.lib.src.widgets.form.22
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.

Widgets:Transitions
sample.packages.flutter.lib.src.widgets.transitions.320
-
sample.packages.flutter.lib.src.widgets.transitions.320
The following code implements the [RotationTransition] as seen in the video
above:
Widgets:GestureDetector
snippet.packages.flutter.lib.src.widgets.gesture_detector.52
-
snippet.packages.flutter.lib.src.widgets.gesture_detector.52
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.2205
-
sample.packages.flutter.lib.src.widgets.basic.2205
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
sample.packages.flutter.lib.src.widgets.basic.781
-
sample.packages.flutter.lib.src.widgets.basic.781
This example shows a [ClipRRect] that adds round corners to an image.
Widgets:ValueListenableBuilder
snippet.packages.flutter.lib.src.widgets.value_listenable_builder.49
-
snippet.packages.flutter.lib.src.widgets.value_listenable_builder.49
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.6196
-
sample.packages.flutter.lib.src.widgets.basic.6196
This example makes a [Container] react to being entered by a mouse
pointer, showing a count of the number of entries and exits.
Widgets:TweenAnimationBuilder
sample.packages.flutter.lib.src.widgets.tween_animation_builder.65
-
sample.packages.flutter.lib.src.widgets.tween_animation_builder.65
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:Transitions
sample.packages.flutter.lib.src.widgets.transitions.868
-
sample.packages.flutter.lib.src.widgets.transitions.868
The following code implements the [AlignTransition] as seen in the video
above:
Widgets:ScrollPhysics
snippet.packages.flutter.lib.src.widgets.scroll_physics.20
-
snippet.packages.flutter.lib.src.widgets.scroll_physics.20
Widgets:Navigator
sample.packages.flutter.lib.src.widgets.navigator.2038
-
sample.packages.flutter.lib.src.widgets.navigator.2038
Typical usage is as follows:
Widgets:DefaultTextEditingShortcuts
snippet.packages.flutter.lib.src.widgets.default_text_editing_shortcuts.67
-
snippet.packages.flutter.lib.src.widgets.default_text_editing_shortcuts.67
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.1130
-
sample.packages.flutter.lib.src.widgets.basic.1130
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:Navigator
sample.packages.flutter.lib.src.widgets.navigator.4420
-
sample.packages.flutter.lib.src.widgets.navigator.4420
Typical usage is as follows:
Widgets:Transitions
sample.packages.flutter.lib.src.widgets.transitions.673
-
sample.packages.flutter.lib.src.widgets.transitions.673
The following code implements the [PositionedTransition] as seen in the video
above:
Widgets:DefaultTextEditingShortcuts
snippet.packages.flutter.lib.src.widgets.default_text_editing_shortcuts.26
-
snippet.packages.flutter.lib.src.widgets.default_text_editing_shortcuts.26
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.3121
-
sample.packages.flutter.lib.src.widgets.basic.3121
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:Transitions
sample.packages.flutter.lib.src.widgets.transitions.576
-
sample.packages.flutter.lib.src.widgets.transitions.576
Creates a [CustomScrollView] with a [SliverFixedExtentList] that uses a
[SliverFadeTransition] to fade the list in and out.
Widgets:Async
sample.packages.flutter.lib.src.widgets.async.509
-
sample.packages.flutter.lib.src.widgets.async.509
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:ImplicitAnimations
sample.packages.flutter.lib.src.widgets.implicit_animations.1770
-
sample.packages.flutter.lib.src.widgets.implicit_animations.1770
Creates a [CustomScrollView] with a [SliverFixedExtentList] and a
[FloatingActionButton]. Pressing the button animates the lists' opacity.
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.2770
-
sample.packages.flutter.lib.src.widgets.basic.2770
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:AnimatedCrossFade
snippet.packages.flutter.lib.src.widgets.animated_cross_fade.15
-
snippet.packages.flutter.lib.src.widgets.animated_cross_fade.15
Widgets:Navigator
sample.packages.flutter.lib.src.widgets.navigator.4544
-
sample.packages.flutter.lib.src.widgets.navigator.4544
Typical usage is as follows:
Widgets:Navigator
sample.packages.flutter.lib.src.widgets.navigator.1290
-
sample.packages.flutter.lib.src.widgets.navigator.1290
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:NestedScrollView
sample.packages.flutter.lib.src.widgets.nested_scroll_view.114
-
sample.packages.flutter.lib.src.widgets.nested_scroll_view.114
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:ImplicitAnimations
snippet.packages.flutter.lib.src.widgets.implicit_animations.20
-
snippet.packages.flutter.lib.src.widgets.implicit_animations.20
Widgets:ImplicitAnimations
sample.packages.flutter.lib.src.widgets.implicit_animations.793
-
sample.packages.flutter.lib.src.widgets.implicit_animations.793
The following code implements the [AnimatedPadding] widget, using a [curve] of
[Curves.easeInOut].
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.5038
-
sample.packages.flutter.lib.src.widgets.basic.5038
This example shows how to use an [Expanded] widget in a [Row] with multiple
children expanded, utilizing the [flex] factor to prioritize available space.

Widgets:Transitions
sample.packages.flutter.lib.src.widgets.transitions.153
-
sample.packages.flutter.lib.src.widgets.transitions.153
The following code implements the [SlideTransition] as seen in the video
above:
Widgets:ImplicitAnimations
sample.packages.flutter.lib.src.widgets.implicit_animations.879
-
sample.packages.flutter.lib.src.widgets.implicit_animations.879
The following code implements the [AnimatedAlign] widget, using a [curve] of
[Curves.fastOutSlowIn].
Widgets:SingleChildScrollView
sample.packages.flutter.lib.src.widgets.single_child_scroll_view.89
-
sample.packages.flutter.lib.src.widgets.single_child_scroll_view.89
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:RestorationProperties
snippet.packages.flutter.lib.src.widgets.restoration_properties.35
-
snippet.packages.flutter.lib.src.widgets.restoration_properties.35
Widgets:NestedScrollView
sample.packages.flutter.lib.src.widgets.nested_scroll_view.59
-
sample.packages.flutter.lib.src.widgets.nested_scroll_view.59
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:Actions
sample.packages.flutter.lib.src.widgets.actions.144
-
sample.packages.flutter.lib.src.widgets.actions.144
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:Transitions
sample.packages.flutter.lib.src.widgets.transitions.1022
-
sample.packages.flutter.lib.src.widgets.transitions.1022
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:PageStorage
sample.packages.flutter.lib.src.widgets.page_storage.140
-
sample.packages.flutter.lib.src.widgets.page_storage.140
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:Image
sample.packages.flutter.lib.src.widgets.image.802
-
sample.packages.flutter.lib.src.widgets.image.802
The following sample uses [loadingBuilder] to show a
[CircularProgressIndicator] while an image loads over the network.
Widgets:Actions
sample.packages.flutter.lib.src.widgets.actions.391
-
sample.packages.flutter.lib.src.widgets.actions.391
This example shows how ActionListener handles adding and removing of
the [listener] in the widget lifecycle.
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.6320
-
sample.packages.flutter.lib.src.widgets.basic.6320
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:Transitions
sample.packages.flutter.lib.src.widgets.transitions.806
-
sample.packages.flutter.lib.src.widgets.transitions.806
The following code implements the [DecoratedBoxTransition] as seen in the video
above:
Widgets:Transitions
sample.packages.flutter.lib.src.widgets.transitions.1039
-
sample.packages.flutter.lib.src.widgets.transitions.1039
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:Image
sample.packages.flutter.lib.src.widgets.image.822
-
sample.packages.flutter.lib.src.widgets.image.822
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:Navigator
sample.packages.flutter.lib.src.widgets.navigator.2200
-
sample.packages.flutter.lib.src.widgets.navigator.2200
Typical usage is as follows:
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.6506
-
sample.packages.flutter.lib.src.widgets.basic.6506
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:NestedScrollView
sample.packages.flutter.lib.src.widgets.nested_scroll_view.338
-
sample.packages.flutter.lib.src.widgets.nested_scroll_view.338
[NestedScrollViewState] can be obtained using a [GlobalKey].
Using the following setup, you can access the inner scroll controller
using `globalKey.currentState.innerController`.
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.3196
-
sample.packages.flutter.lib.src.widgets.basic.3196
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
sample.packages.flutter.lib.src.widgets.basic.6059
-
sample.packages.flutter.lib.src.widgets.basic.6059
This example makes a [Container] react to being touched, showing a count of
the number of pointer downs and ups.
Widgets:GestureDetector
sample.packages.flutter.lib.src.widgets.gesture_detector.142
-
sample.packages.flutter.lib.src.widgets.gesture_detector.142
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:ReorderableList
snippet.packages.flutter.lib.src.widgets.reorderable_list.27
-
snippet.packages.flutter.lib.src.widgets.reorderable_list.27
Widgets:Actions
sample.packages.flutter.lib.src.widgets.actions.1035
-
sample.packages.flutter.lib.src.widgets.actions.1035
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:Transitions
sample.packages.flutter.lib.src.widgets.transitions.732
-
sample.packages.flutter.lib.src.widgets.transitions.732
The following code implements the [RelativePositionedTransition] as seen in the video
above:
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.766
-
sample.packages.flutter.lib.src.widgets.basic.766
This example shows various [ClipRRect]s applied to containers.
Widgets:SlottedRenderObjectWidget
sample.packages.flutter.lib.src.widgets.slotted_render_object_widget.30
-
sample.packages.flutter.lib.src.widgets.slotted_render_object_widget.30
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:Basic
sample.packages.flutter.lib.src.widgets.basic.6311
-
sample.packages.flutter.lib.src.widgets.basic.6311
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:Routes
sample.packages.flutter.lib.src.widgets.routes.2015
-
sample.packages.flutter.lib.src.widgets.routes.2015
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:GestureDetector
sample.packages.flutter.lib.src.widgets.gesture_detector.134
-
sample.packages.flutter.lib.src.widgets.gesture_detector.134
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:Transitions
sample.packages.flutter.lib.src.widgets.transitions.28
-
sample.packages.flutter.lib.src.widgets.transitions.28
This code defines a widget called `Spinner` that spins a green square
continually. It is built with an [AnimatedWidget].
Widgets:Basic
sample.packages.flutter.lib.src.widgets.basic.5029
-
sample.packages.flutter.lib.src.widgets.basic.5029
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.

Widgets:RestorationProperties
sample.packages.flutter.lib.src.widgets.restoration_properties.23
-
sample.packages.flutter.lib.src.widgets.restoration_properties.23
A [StatefulWidget] that has a restorable [int] property.
Widgets:NestedScrollView
sample.packages.flutter.lib.src.widgets.nested_scroll_view.144
-
sample.packages.flutter.lib.src.widgets.nested_scroll_view.144
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:ImplicitAnimations
sample.packages.flutter.lib.src.widgets.implicit_animations.1017
-
sample.packages.flutter.lib.src.widgets.implicit_animations.1017
The following example transitions an AnimatedPositioned
between two states. It adjusts the `height`, `width`, and
[Positioned] properties when tapped.
Widgets:DraggableScrollableSheet
snippet.packages.flutter.lib.src.widgets.draggable_scrollable_sheet.249
-
snippet.packages.flutter.lib.src.widgets.draggable_scrollable_sheet.249
Widgets:Async
sample.packages.flutter.lib.src.widgets.async.370
-
sample.packages.flutter.lib.src.widgets.async.370
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:Localizations
snippet.packages.flutter.lib.src.widgets.localizations.14
-
snippet.packages.flutter.lib.src.widgets.localizations.14
Widgets:Transitions
sample.packages.flutter.lib.src.widgets.transitions.932
-
sample.packages.flutter.lib.src.widgets.transitions.932
The following code implements the [DefaultTextStyleTransition] that shows
a transition between thick blue font and thin red font.
Widgets:ImplicitAnimations
sample.packages.flutter.lib.src.widgets.implicit_animations.1559
-
sample.packages.flutter.lib.src.widgets.implicit_animations.1559
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.