- 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.
Widgets:Transitions
The following code implements the [ScaleTransition] as seen in the video
above:
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: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:ImplicitAnimations
The following example (depicted above) transitions an AnimatedContainer
between two states. It adjusts the `height`, `width`, `color`, and
[alignment] properties when tapped.
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: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:Transitions
The following code implements the [FadeTransition] using
the Flutter logo:
Widgets:SingleChildScrollView
In this example, the column becomes either as big as viewport, or as big as
the contents, whichever is biggest.
Widgets:Basic
In this example, the image is stretched to fill the entire [Container], which would
not happen normally without using FittedBox.
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: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.
Widgets:Transitions
The following code implements the [RotationTransition] as seen in the video
above:
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
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
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
The following code implements the [AlignTransition] as seen in the video
above:
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:Transitions
The following code implements the [PositionedTransition] as seen in the video
above:
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:Transitions
Creates a [CustomScrollView] with a [SliverFixedExtentList] that uses a
[SliverFadeTransition] to fade the list in and out.
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:ImplicitAnimations
Creates a [CustomScrollView] with a [SliverFixedExtentList] and a
[FloatingActionButton]. Pressing the button animates the lists' opacity.
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: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: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:ImplicitAnimations
The following code implements the [AnimatedPadding] widget, using a [curve] of
[Curves.easeInOut].
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.
Widgets:Transitions
The following code implements the [SlideTransition] as seen in the video
above:
Widgets:ImplicitAnimations
The following code implements the [AnimatedAlign] widget, using a [curve] of
[Curves.fastOutSlowIn].
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: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: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: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: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:Image
The following sample uses [loadingBuilder] to show a
[CircularProgressIndicator] while an image loads over the network.
Widgets:Actions
This example shows how ActionListener handles adding and removing of
the [listener] in the widget lifecycle.
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:Transitions
The following code implements the [DecoratedBoxTransition] as seen in the video
above:
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: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: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:NestedScrollView
[NestedScrollViewState] can be obtained using a [GlobalKey].
Using the following setup, you can access the inner scroll controller
using `globalKey.currentState.innerController`.
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
This example makes a [Container] react to being touched, showing a count of
the number of pointer downs and ups.
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: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:Transitions
The following code implements the [RelativePositionedTransition] as seen in the video
above:
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: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: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: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:Transitions
This code defines a widget called `Spinner` that spins a green square
continually. It is built with an [AnimatedWidget].
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.
Widgets:RestorationProperties
A [StatefulWidget] that has a restorable [int] property.
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:ImplicitAnimations
The following example transitions an AnimatedPositioned
between two states. It adjusts the `height`, `width`, and
[Positioned] properties when tapped.
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:Transitions
The following code implements the [DefaultTextStyleTransition] that shows
a transition between thick blue font and thin red font.
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.