Flutter code samples and snippets

While a drag is underway, the widget returned by the [proxyDecorator] serves as a "proxy" (a substitute) for the item in the list. The proxy is created with the original list item as its child. The [proxyDecorator] in this example is similar to the default one except that it changes the proxy item's background color.

This sample demonstrates how to create a restorable Material date picker. This is accomplished by enabling state restoration by specifying [MaterialApp.restorationScopeId] and using [Navigator.restorablePush] to push [DatePickerDialog] when the button is tapped.

This example shows how [Tooltip] can be shown manually with [TooltipTriggerMode.manual] by calling the [TooltipState.ensureTooltipVisible] function.

Here is an example of Radio widgets wrapped in ListTiles, which is similar to what you could get with the RadioListTile widget. The currently selected character is passed into `groupValue`, which is maintained by the example's `State`. In this case, the first `Radio` will start off selected because `_character` is initialized to `SingingCharacter.lafayette`. If the second radio button is pressed, the example's state is updated with `setState`, updating `_character` to `SingingCharacter.jefferson`. This causes the buttons to rebuild with the updated `groupValue`, and therefore the selection of the second button. Requires one of its ancestors to be a [Material] widget.

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

This example shows how the prefix icon alignment can be changed using [Align] with a fixed `widthFactor` and `heightFactor`.

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.

The following example creates a widget that changes the status bar color to a random value on Android.

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.

This example shows how to move the focus to the next field when the user presses the SPACE key.

Typical usage is as follows:

This sample shows two ways to open [AboutDialog]. The first one uses an [AboutListTile], and the second uses the [showAboutDialog] function.

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

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.

This sample shows how to use a [CupertinoAlertDialog]. The [CupertinoAlertDialog] shows an alert with a set of two choices when [CupertinoButton] is pressed.

This example shows how [RefreshIndicator] can be triggered in different ways.

This example shows a [Scaffold] with an [AppBar], a [BottomAppBar] and a [FloatingActionButton]. The [body] is a [Text] placed in a [Center] in order to center the text within the [Scaffold]. The [FloatingActionButton] is centered and docked within the [BottomAppBar] using [FloatingActionButtonLocation.centerDocked]. The [FloatingActionButton] is connected to a callback that increments a counter. 

In this sample the icon button's background color is defined with an [Ink] widget whose child is an [IconButton]. The icon button's filled background is a light shade of blue, it's a filled circle, and it's as big as the button is. 

This sample shows how to style a `TextField` with a prefixIcon that changes color based on the `MaterialState`. The color defaults to gray, be blue while focused and red if in an error state.

Here is an example that demonstrates the effect of not using the resolver versus using it. When this example is set to _not_ use the resolver, then triggering the mouse wheel over the outer box will cause only the outer box to change color, but triggering the mouse wheel over the inner box will cause _both_ the outer and the inner boxes to change color (because they're both receiving the event). When this example is set to _use_ the resolver, then only the box located directly under the cursor will change color when the mouse wheel is triggered.

When the user scrolls past [refreshTriggerPullDistance], this sample shows the default iOS pull to refresh indicator for 1 second and adds a new item to the top of the list view.

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.

This sample shows a [SliverAppBar] and it's behavior when using the [pinned], [snap] and [floating] parameters.

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

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

This sample shows creation of a [Card] widget that shows album information and two actions.

This sample demonstrates how to use [showDialog] to display a dialog box.

When the [Scaffold] is actually created in the same `build` function, the `context` argument to the `build` function can't be used to find the [Scaffold] (since it's "above" the widget being returned in the widget tree). In such cases, the following technique with a [Builder] can be used to provide a new scope with a [BuildContext] that is "under" the [Scaffold]:

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

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.

This example defines a subclass of [RoundedRectangleBorder] and an implementation of [MaterialStateOutlinedBorder], that resolves to [RoundedRectangleBorder] when its widget is selected.

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. 

This example shows a [LinearProgressIndicator] with a changing value.

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

This sample shows creation of [Card] widgets for elevated, filled and outlined types, as described in: https://m3.material.io/components/cards/overview

This demo shows a [TextButton] which when pressed, calls [showDialog]. When called, this method displays a Material dialog above the current contents of the app and returns a [Future] that completes when the dialog is dismissed.

This example shows a [NavigationRail] used within a Scaffold with 3 [NavigationRailDestination]s. The main content is separated by a divider (although elevation on the navigation rail can be used instead). The `_selectedIndex` is updated by the `onDestinationSelected` callback.

This example shows how to move the focus to the next field when the user presses the SPACE key.

 Here is an example of a custom labeled checkbox widget, called LinkedLabelCheckbox, that includes an interactive [RichText] widget that handles tap gestures.

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

This example shows how to use a [Curve2D] to modify the position of a widget so that it can follow an arbitrary path.

This sample shows how to style a `TextField` using an `InputDecorator`. The TextField displays a "send message" icon to the left of the input area, which is surrounded by a border an all sides. It displays the `hintText` inside the input area to help the user understand what input is required. It displays the `helperText` and `counterText` below the input area. 

Here is an example of a basic [OutlinedButton].

This example shows how to create an Autocomplete widget with a custom type. Try searching with text from the name or email field.

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.

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

 This widget shows a checkbox that, when checked, slows down all animations (including the animation of the checkbox itself getting checked!). This sample requires that you also import 'package:flutter/scheduler.dart', so that you can reference [timeDilation].

This sample shows how to create each of the Material 3 button types with Flutter.

This sample shows how to implement CupertinoDatePicker with different picker modes. We can provide intiial dateTime value for the picker to display. When user changes the drag the date or time wheels, the picker will call onDateTimeChanged callback. CupertinoDatePicker can be displayed directly on a screen or in a popup.

Here is an example of using a [StatefulWidget] to keep track of the selected index, and using that to set the `selected` property on the corresponding [ListTile].

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

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.

This example shows a [NavigationBar] as it is used within a [Scaffold] widget. The [NavigationBar] has three [NavigationDestination] widgets and the [selectedIndex] is set to index 0. The `onDestinationSelected` callback changes the selected item's index and displays a corresponding widget in the body of the [Scaffold].

This example shows a [CupertinoNavigationBar] placed in a [CupertinoPageScaffold]. Since [backgroundColor]'s opacity is not 1.0, there is a blur effect and content slides underneath.

Typical usage of the [ScaffoldMessenger.of] function is to call it in response to a user gesture or an application state change.

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

Typical usage is as follows:

This sample application demonstrates the different features of the [FlexibleSpaceBar] when used in a [SliverAppBar]. This app bar is configured to stretch into the overscroll space, and uses the [FlexibleSpaceBar.stretchModes] to apply `fadeTitle`, `blurBackground` and `zoomBackground`. The app bar also makes use of [CollapseMode.parallax] by default.

This sample shows how to create and use a subclass of [ThemeExtension] that defines two colors.

Here is an example of showing a [SnackBar] when the user presses a button.

This example shows how to enable deselecting a radio button by setting the [toggleable] attribute.

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.

Typical usage is as follows:

 This widget shows a switch that, when toggled, changes the state of a [bool] member field called `_lights`.

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

Typical usage of the [Scaffold.of] function is to call it from within the `build` method of a child of a [Scaffold].

This sample shows how to render a disabled TextButton, an enabled TextButton and lastly a TextButton with gradient background.

This sample demonstrates how to create a restorable Material date range picker. This is accomplished by enabling state restoration by specifying [MaterialApp.restorationScopeId] and using [Navigator.restorablePush] to push [DateRangePickerDialog] when the button is tapped.

This example demonstrates different configurations of ExpansionTile.

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].

An example the shows how to use the [Stepper], and the [Stepper] UI appearance.

This sample creates a rectangular region that is wrapped by a [MouseRegion] with a system mouse cursor. The mouse pointer becomes an I-beam when hovering over the region.

 Here is an example of a custom LabeledSwitch widget, but you can easily make your own configurable widget.

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

This sample shows the creation of [NavigationRail] widget used within a Scaffold with 3 [NavigationRailDestination]s, as described in: https://m3.material.io/components/navigation-rail/overview

This sample shows how to display a Divider between an orange and blue box inside a column. The Divider is 20 logical pixels in height and contains a vertically centered black line that is 5 logical pixels thick. The black line is indented by 20 logical pixels. 

When [thumbVisibility] is true, the scrollbar thumb will remain visible without the fade animation. This requires that a [ScrollController] is provided to controller, or that the [PrimaryScrollController] is available. When a [ScrollView.scrollDirection] is [Axis.horizontal], it is recommended that the [Scrollbar] is always visible, since scrolling in the horizontal axis is less discoverable.

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.

This example showcase [ToggleButtons] in various configurations.

 Here is an example of a custom labeled radio widget, called LinkedLabelRadio, that includes an interactive [RichText] widget that handles tap gestures.

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

This example shows a [CupertinoTimerPicker] that returns a countdown duration.

This example shows how to enable deselecting a radio button by setting the [toggleable] attribute.

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.

This example show a basic [Tooltip] which has a [Text] as child. [message] contains your label to be shown by the tooltip when the child that Tooltip wraps is hovered over on web or desktop. On mobile, the tooltip is shown when the widget is long pressed.

This example shows how you can override the default theme of of a [Checkbox] with a [MaterialStateProperty]. In this example, the checkbox's color will be `Colors.blue` when the [Checkbox] is being pressed, hovered, or focused. Otherwise, the checkbox's color will be `Colors.red`.

This example shows a rich [Tooltip] that specifies the [richMessage] parameter instead of the [message] parameter (only one of these may be non-null. Any [InlineSpan] can be specified for the [richMessage] attribute, including [WidgetSpan].

This sample shows a `DropdownButton` with a large arrow icon, purple text style, and bold purple underline, whose value is one of "One", "Two", "Free", or "Four". 

This example defines a subclass of [MaterialStateBorderSide], that resolves to a red border side when its widget is selected.

This sample shows how to use a [CupertinoActionSheet]. The [CupertinoActionSheet] shows a modal popup that slides in from the bottom when [CupertinoButton] is pressed.

Sometimes [SnackBar]s are produced by code that doesn't have ready access to a valid [BuildContext]. One such example of this is when you show a SnackBar from a method outside of the `build` function. In these cases, you can assign a [GlobalKey] to the [ScaffoldMessenger]. This example shows a key being used to obtain the [ScaffoldMessengerState] provided by the [MaterialApp].

This example shows a [Scaffold] with a blueGrey [backgroundColor], [body] and [FloatingActionButton]. The [body] is a [Text] placed in a [Center] in order to center the text within the [Scaffold]. The [FloatingActionButton] is connected to a callback that increments a counter. 

This example shows a [CupertinoPageScaffold] with a [ListView] as a [child]. The [CupertinoButton] is connected to a callback that increments a counter. The [backgroundColor] can be changed.

Typical usage is as follows:

 Here is an example of a custom LabeledCheckbox widget, but you can easily make your own configurable widget.

 This range values are in intervals of 20 because the Range Slider has 5 divisions, from 0 to 100. This means are values are split between 0, 20, 40, 60, 80, and 100. The range values are initialized with 40 and 80 in this demo.

This example shows a [CupertinoTabBar] placed in a [CupertinoTabScaffold].

To disable the drawer edge swipe, set the [Scaffold.endDrawerEnableOpenDragGesture] to false. Then, use [ScaffoldState.openEndDrawer] to open the drawer and [Navigator.pop] to close it.

 This widget shows a pair of radio buttons that control the `_character` field. The field is of the type `SingingCharacter`, an enum.

This sample shows creation of a [Card] widget that can be tapped. When tapped this [Card]'s [InkWell] displays an "ink splash" that fills the entire card.

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.

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.

This example shows how to listen to page updates in [TabBar] and [TabBarView] when using [DefaultTabController].

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

This sample demonstrates how to create a restorable Cupertino dialog. This is accomplished by enabling state restoration by specifying [CupertinoApp.restorationScopeId] and using [Navigator.restorablePush] to push [CupertinoDialogRoute] when the [CupertinoButton] is tapped. {@macro flutter.widgets.RestorationManager}

This sample shows the creation of [FloatingActionButton] widget in the typical location in a Scaffold, as described in: https://m3.material.io/components/floating-action-button/overview

This sample shows an [AppBar] with two simple actions. The first action opens a [SnackBar], while the second action navigates to a new page.

Here is an example using the [mainAxisExtent] property. On a device with a screen width of 800.0, it creates a GridView with each tile with a width of 200.0 and a height of 150.0.

To disable the drawer edge swipe, set the [Scaffold.drawerEnableOpenDragGesture] to false. Then, use [ScaffoldState.openDrawer] to open the drawer and [Navigator.pop] to close it.

This sample shows the creation of [AlertDialog], as described in: https://m3.material.io/components/dialogs/overview

This example shows [CupertinoSliverNavigationBar] in action inside a [CustomScrollView].

This example shows how to use an [Expanded] widget in a [Row] with multiple children expanded, utilizing the [flex] factor to prioritize available space. 

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

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

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.

Banners placed directly into the widget tree are static.

Here is an example of showing a [MaterialBanner] when the user presses a button.

This sample shows how to create and use a subclass of [ThemeExtension] that defines two colors.

When [thumbVisibility] is true, the scrollbar thumb will remain visible without the fade animation. This requires that a [ScrollController] is provided to controller, or that the [PrimaryScrollController] is available. [isAlwaysShown] is deprecated in favor of `thumbVisibility`.

This sample shows the creation of all the variants of [FloatingActionButton] widget as described in: https://m3.material.io/components/floating-action-button/overview

This sample produces an enabled and a disabled ElevatedButton.

This sample shows how to style a `TextField` with a prefixIcon that changes color based on the `MaterialState` through the use of `ThemeData`. The color defaults to gray, be blue while focused and red if in an error state.

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.

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.

This example shows how to display a [FloatingActionButton] in a [Scaffold], with a pink [backgroundColor] and a thumbs up [Icon]. 

This sample shows produces an enabled and disabled [CupertinoButton] and [CupertinoButton.filled].

It's possible to override the label style for just the error state, or just the default state, or both. In this example the [labelStyle] is specified with a [MaterialStateProperty] which resolves to a text style whose color depends on the decorator's error state.

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.

This example shows a [BottomNavigationBar] as it is used within a [Scaffold] widget. The [BottomNavigationBar] has three [BottomNavigationBarItem] widgets, which means it defaults to [BottomNavigationBarType.fixed], and the [currentIndex] is set to index 0. The selected item is amber. The `_onItemTapped` function changes the selected item's index and displays a corresponding message in the center of the [Scaffold].

This example shows the differences between two `TextField` widgets when [prefixIconConstraints] is set to the default value and when one is not. Note that [isDense] must be set to true to be able to set the constraints smaller than 48px. If null, [BoxConstraints] with a minimum width and height of 48px is used.

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].

Here is an example of a custom list item that resembles a YouTube-related video list item created with [Expanded] and [Container] widgets. 

 The Sliders value is part of the Stateful widget subclass to change the value setState was called.

This example shows how the suffix icon alignment can be changed using [Align] with a fixed `widthFactor` and `heightFactor`.

 Here is an example of a custom labeled radio widget, called LinkedLabelRadio, that includes an interactive [RichText] widget that handles tap gestures.

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

This example shows how to set the initial value of the `CupertinoTextField` using a [controller] that already contains some text.

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

Here is an example of showing a [SnackBar] when the user presses a button.

This sample shows how to style a `TextField` with a round border and additional text before and after the input area. It displays "Prefix" before the input area, and "Suffix" after the input area. 

This example shows how to create a very basic Autocomplete widget using the default UI.

[TabBar] can also be implemented by using a [TabController] which provides more options to control the behavior of the [TabBar] and [TabBarView]. This can be used instead of a [DefaultTabController], demonstrated below.

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.

This sample shows a `DropdownButton` with a button with [Text] that corresponds to but is unique from [DropdownMenuItem].

Tap the container to cause it to grow. Then, tap it again and hold before the widget reaches its maximum size to observe the clipped ink splash.

This example shows a [BottomNavigationBar] as it is used within a [Scaffold] widget. The [BottomNavigationBar] has four [BottomNavigationBarItem] widgets, which means it defaults to [BottomNavigationBarType.shifting], and the [currentIndex] is set to index 0. The selected item is amber in color. With each [BottomNavigationBarItem] widget, backgroundColor property is also defined, which changes the background color of [BottomNavigationBar], when that item is selected. The `_onItemTapped` function changes the selected item's index and displays a corresponding message in the center of the [Scaffold].

This sample shows how to display a [VerticalDivider] between a purple and orange box inside a [Row]. The [VerticalDivider] is 20 logical pixels in width and contains a horizontally centered black line that is 1 logical pixels thick. The grey line is indented by 20 logical pixels.

Here is a simple example of how to implement ExpansionPanelList.radio.

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

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.

This is an example of a user-defined [FloatingActionButtonLocation]. The example shows a [Scaffold] with an [AppBar], a [BottomAppBar], and a [FloatingActionButton] using a custom [FloatingActionButtonLocation]. The new [FloatingActionButtonLocation] is defined by extending [StandardFabLocation] with two mixins, [FabEndOffsetX] and [FabFloatOffsetY], and overriding the [getOffsetX] method to adjust the FAB's x-coordinate, creating a [FloatingActionButtonLocation] slightly different from [FloatingActionButtonLocation.endFloat].

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

This sample shows how to style a "collapsed" `TextField` using an `InputDecorator`. The collapsed `TextField` surrounds the hint text and input area with a border, but does not add padding around them. 

This example shows a [CupertinoSegmentedControl] with an enum type. The callback provided to [onValueChanged] should update the state of the parent [StatefulWidget] using the [State.setState] method, so that the parent gets rebuilt; for example:

Wrapping the [Ink] in a clipping widget directly will not work since the [Material] it will be printed on is responsible for clipping. In this example the image is not being clipped as expected. This is because it is being rendered onto the Scaffold body Material, which isn't wrapped in the [ClipRRect].

Here is an example of a customized [SnackBar]. It utilizes [behavior], [shape], [padding], [width], and [duration] to customize the location, appearance, and the duration for which the [SnackBar] is visible.

Typical usage is as follows:

 Here is an example of a custom LabeledRadio widget, but you can easily make your own configurable widget.

This example shows the differences between two `TextField` widgets when [suffixIconConstraints] is set to the default value and when one is not. Note that [isDense] must be set to true to be able to set the constraints smaller than 48px. If null, [BoxConstraints] with a minimum width and height of 48px is used.

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.

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

This sample shows how to get a value from a TextField via the [onSubmitted] callback.

This example shows how to detect if the user has selected the logical "Q" key and handle the key if they have.

This example shows how to make an extended [FloatingActionButton] in a [Scaffold], with a pink [backgroundColor], a thumbs up [Icon] and a [Text] label that reads "Approve". 

Here is a simple example of how to implement ExpansionPanelList.

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.

This example shows how you can override the default text and icon color (the "foreground color") of a [TextButton] with a [MaterialStateProperty]. In this example, the button's text color will be `Colors.blue` when the button is being pressed, hovered, or focused. Otherwise, the text color will be `Colors.red`.

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

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.

This example shows how to show the current slider value as it changes.

This example shows a [CupertinoPicker] that displays a list of fruits on a wheel for selection.

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.

This sample shows a [CupertinoScrollbar] that fades in and out of view as scrolling occurs. The scrollbar will fade into view as the user scrolls, and fade out when scrolling stops. The `thickness` of the scrollbar will animate from 6 pixels to the `thicknessWhileDragging` of 10 when it is dragged by the user. The `radius` of the scrollbar thumb corners will animate from 34 to the `radiusWhileDragging` of 0 when the scrollbar is being dragged by the user.

Creates a stepper control with custom buttons.

One solution would be to deliberately wrap the [Ink.image] in a [Material]. This makes sure the Material that the image is painted on is also responsible for clipping said content.

Here is an example of an article list item with multiline titles and subtitles. It utilizes [Row]s and [Column]s, as well as [Expanded] and [AspectRatio] widgets to organize its layout. 

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

This example shows the [BottomAppBar], which can be configured to have a notch using the [BottomAppBar.shape] property. This also includes an optional [FloatingActionButton], which illustrates the [FloatingActionButtonLocation]s in relation to the [BottomAppBar].

This sample shows a [Scrollbar] that executes a fade animation as scrolling occurs. The Scrollbar will fade into view as the user scrolls, and fade out when scrolling stops.

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

This example shows a [CircularProgressIndicator] with a changing value.

This sample shows the implementation of [TabBar] and [TabBarView] using a [DefaultTabController]. Each [Tab] corresponds to a child of the [TabBarView] in the order they are written.

This sample shows how to use [onDeleted] to remove an entry when the delete button is tapped.

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.

MaterialBanner's can also be presented through a [ScaffoldMessenger]. Here is an example where ScaffoldMessengerState.showMaterialBanner() is used to show the MaterialBanner.

Here is an example of a [SnackBar] with an [action] button implemented using [SnackBarAction].

This example shows a [Scaffold] with a [body] and [FloatingActionButton]. The [body] is a [Text] placed in a [Center] in order to center the text within the [Scaffold]. The [FloatingActionButton] is connected to a callback that increments a counter. 

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.

This sample shows an `IconButton` that uses the Material icon "volume_up" to increase the volume. 

This example demonstrates how to use `showModalBottomSheet` to display a bottom sheet that obscures the content behind it when a user taps a button. It also demonstrates how to close the bottom sheet using the [Navigator] when a user taps on a button inside the bottom sheet.

This example shows how to use this animation to create a [FloatingActionButton] that animates itself between the normal and extended states of the [NavigationRail]. An instance of `MyNavigationRailFab` is created for [NavigationRail.leading]. Pressing the FAB button toggles the "extended" state of the [NavigationRail].

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}

This sample shows a `DropdownButton` with a dropdown button text style that is different than its menu items.

Here is an example using the [childAspectRatio] property. On a device with a screen width of 800.0, it creates a GridView with each tile with a width of 200.0 and a height of 100.0.

This example shows a menu with four items, selecting between an enum's values and setting a `_selectedMenu` field based on the selection

This sample demonstrates how to create a restorable Cupertino modal route. This is accomplished by enabling state restoration by specifying [CupertinoApp.restorationScopeId] and using [Navigator.restorablePush] to push [CupertinoModalPopupRoute] when the [CupertinoButton] is tapped. {@macro flutter.widgets.RestorationManager}

This sample shows the creation of [showDialog], as described in: https://m3.material.io/components/dialogs/overview

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.

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

This example shows a [CupertinoSlidingSegmentedControl] with an enum type. The callback provided to [onValueChanged] should update the state of the parent [StatefulWidget] using the [State.setState] method, so that the parent gets rebuilt; for example:

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 example covers most of the attributes available in Tooltip. `decoration` has been used to give a gradient and borderRadius to Tooltip. `height` has been used to set a specific height of the Tooltip. `preferBelow` is false, the tooltip will prefer showing above [Tooltip]'s child widget. However, it may show the tooltip below if there's not enough space above the widget. `textStyle` has been used to set the font size of the 'message'. `showDuration` accepts a Duration to continue showing the message after the long press has been released or the mouse pointer exits the child widget. `waitDuration` accepts a Duration for which a mouse pointer has to hover over the child widget before the tooltip is shown.

This example demonstrates how to use `showBottomSheet` to display a bottom sheet when a user taps a button. It also demonstrates how to close a bottom sheet using the Navigator.

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

This example defines a mouse cursor that resolves to [SystemMouseCursors.forbidden] when its widget is disabled.

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.

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

This sample shows how to display a [DataTable] with three columns: name, age, and role. The columns are defined by three [DataColumn] objects. The table contains three rows of data for three example users, the data for which is defined by three [DataRow] objects. 

This example shows how to detect if the user has selected the physical key to the right of the CAPS LOCK key.

This example shows a `TextField` with a [Text.rich] widget as the [label]. The widget contains multiple [Text] widgets with different [TextStyle]'s.

This sample shows a very simple CupertinoContextMenu for an empty red 100x100 Container. Simply long press on it to open.

This sample shows how to display a [DataTable] with alternate colors per row, and a custom color for when the row is selected.

It's possible to override the label style for just the error state, or just the default state, or both. In this example the [floatingLabelStyle] is specified with a [MaterialStateProperty] which resolves to a text style whose color depends on the decorator's error state.

This sample draws a picture with a gradient sweeping through different colors, by having a [Container] display a [BoxDecoration] with a [LinearGradient].

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.

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

This sample shows how to create a `TextField` with hint text, a red border on all sides, and an error message. To display a red border and error message, provide `errorText` to the `InputDecoration` constructor. 

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.