development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-08-25 11:07:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update samples to work with Dartpad, and convert all that make… (#50377)

Browse source 
This PR modifies the existing API docs samples to use DartPad so that all of the samples are now interactive apps on the API docs site.

It also removes the restriction for the max width of the description area so that the dartpad region can expand horizontally.

I updated the first paragraph on the API docs to indicate that Flutter is more than just mobile now (same text as the README.md at the top level).

I modified a few of the examples so that they looked nicer, and fit better on the page.

I added the sample description text above each DartPad instance, since that often defines the context of the example.

I removed animations and images when they were redundant with the sample content. There were a few that made sense to keep, so I did.
This commit is contained in:
Greg Spencer 2020-02-10 10:00:20 -08:00 committed by GitHub
parent 2a6bc617b8
commit 9fb781a54a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
45 changed files with 363 additions and 331 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
dev/docs/assets/overrides.css
View file

@ -97,6 +97,10 @@ code {
padding-right: 0;
}
.markdown.desc {
max-width: inherit;
}
#search-box {
color: #555;
background-color: #fff;

6
dev/docs/lib/opensearch.xml
View file

@ -3,8 +3,10 @@
<Description>
Welcome to the Flutter API reference documentation search.
Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time.
Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.
Flutter is Google's SDK for crafting beautiful, fast user experiences for
mobile, web and desktop from a single codebase. Flutter works with existing
code, is used by developers and organizations around the world, and is free and
open source.
The API reference herein covers all libraries that are exported by the Flutter SDK.
</Description>

4
dev/snippets/config/skeletons/dartpad-sample.html
View file

@ -22,7 +22,11 @@
</div>
<div class="snippet-container">
<div class="snippet" id="longSnippet{{serial}}">
{{description}}
<iframe class="snippet-dartpad" src="https://dartpad.dev/embed-flutter.html?split=60&run=true&sample_id={{id}}&sample_channel={{channel}}"></iframe>
<div class="snippet-description">To create a local project with this code sample, run:<br/>
<span class="snippet-create-command">flutter create --sample={{id}} mysample</span>
</div>
</div>
<div class="snippet" id="shortSnippet{{serial}}" hidden>
{{description}}

2
dev/snippets/config/skeletons/sample.html
View file

@ -28,7 +28,7 @@
</div>
</div>
<div class="snippet" id="longSnippet{{serial}}" hidden>
<div class="snippet-description">To create a sample project with this code snippet, run:<br/>
<div class="snippet-description">To create a local project with this code sample, run:<br/>
<span class="snippet-create-command">flutter create --sample={{id}} mysample</span>
</div>
<div class="copyable-container">

2
packages/flutter/lib/src/animation/curves.dart
View file

@ -318,7 +318,7 @@ class Cubic extends Curve {
/// part of the curve, or hardly at all in another part of the curve, depending
/// on the definition of the curve.
///
/// {@tool sample --template=stateless_widget_material}
/// {@tool dartpad --template=stateless_widget_material}
/// This example shows how to use a [Curve2D] to modify the position of a widget
/// so that it can follow an arbitrary path.
///

2
packages/flutter/lib/src/material/about.dart
View file

@ -33,7 +33,7 @@ import 'theme.dart';
///
/// If your application does not have a [Drawer], you should provide an
/// affordance to call [showAboutDialog] or (at least) [showLicensePage].
/// {@tool sample --template=stateless_widget_material}
/// {@tool dartpad --template=stateless_widget_material}
///
/// This sample shows two ways to open [AboutDialog]. The first one
/// uses an [AboutListTile], and the second uses the [showAboutDialog] function.

2
packages/flutter/lib/src/material/bottom_navigation_bar.dart
View file

@ -62,7 +62,7 @@ enum BottomNavigationBarType {
/// case it's assumed that each item will have a different background color
/// and that background color will contrast well with white.
///
/// {@tool sample --template=stateful_widget_material}
/// {@tool dartpad --template=stateful_widget_material}
/// This example shows a [BottomNavigationBar] as it is used within a [Scaffold]
/// widget. The [BottomNavigationBar] has three [BottomNavigationBarItem]
/// widgets and the [currentIndex] is set to index 0. The selected item is

4
packages/flutter/lib/src/material/bottom_sheet.dart
View file

@ -455,9 +455,7 @@ class _ModalBottomSheetRoute<T> extends PopupRoute<T> {
/// Returns a `Future` that resolves to the value (if any) that was passed to
/// [Navigator.pop] when the modal bottom sheet was closed.
///
/// {@animation 350 622 https://flutter.github.io/assets-for-api-docs/assets/material/show_modal_bottom_sheet.mp4}
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// This example demonstrates how to use `showModalBottomSheet` to display a
/// bottom sheet that obscures the content behind it when a user taps a button.

4
packages/flutter/lib/src/material/card.dart
View file

@ -19,7 +19,7 @@ import 'theme.dart';
/// some text describing a musical, and the other with buttons for buying
/// tickets or listening to the show.](https://flutter.github.io/assets-for-api-docs/assets/material/card.png)
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// This sample shows creation of a [Card] widget that shows album information
/// and two actions.
@ -59,7 +59,7 @@ import 'theme.dart';
/// Sometimes the primary action area of a card is the card itself. Cards can be
/// one large touch target that shows a detail screen when tapped.
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// 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

4
packages/flutter/lib/src/material/checkbox_list_tile.dart
View file

@ -37,7 +37,7 @@ import 'theme_data.dart';
/// To show the [CheckboxListTile] as disabled, pass null as the [onChanged]
/// callback.
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
///
/// ![CheckboxListTile sample](https://flutter.github.io/assets-for-api-docs/assets/material/checkbox_list_tile.png)
///
@ -166,7 +166,7 @@ import 'theme_data.dart';
/// combining [Checkbox] with other widgets, such as [Text], [Padding] and
/// [InkWell].
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
///
/// ![Custom checkbox list tile sample](https://flutter.github.io/assets-for-api-docs/assets/material/checkbox_list_tile_custom.png)
///

2
packages/flutter/lib/src/material/chip.dart
View file

@ -192,7 +192,7 @@ abstract class DeletableChipAttributes {
/// that the user tapped the delete button. In order to delete the chip, you
/// have to do something similar to the following sample:
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
///
/// This sample shows how to use [onDeleted] to remove an entry when the
/// delete button is tapped.

2
packages/flutter/lib/src/material/data_table.dart
View file

@ -225,7 +225,7 @@ class DataCell {
/// [PaginatedDataTable] which automatically splits the data into
/// multiple pages.
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// 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

2
packages/flutter/lib/src/material/divider.dart
View file

@ -22,7 +22,7 @@ import 'theme.dart';
/// The box's total height is controlled by [height]. The appropriate
/// padding is automatically computed from the height.
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// 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

6
packages/flutter/lib/src/material/dropdown.dart
View file

@ -707,7 +707,7 @@ class DropdownButtonHideUnderline extends InheritedWidget {
/// dropdown's value. It should also call [State.setState] to rebuild the
/// dropdown with the new value.
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
///
/// This sample shows a `DropdownButton` with a large arrow icon,
/// purple text style, and bold purple underline, whose value is one of "One",
@ -865,7 +865,7 @@ class DropdownButton<T> extends StatefulWidget {
/// from the list corresponds to the [DropdownMenuItem] of the same index
/// in [items].
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
///
/// This sample shows a `DropdownButton` with a button with [Text] that
/// corresponds to but is unique from [DropdownMenuItem].
@ -916,7 +916,7 @@ class DropdownButton<T> extends StatefulWidget {
/// To use a separate text style for selected item when it's displayed within
/// the dropdown button,, consider using [selectedItemBuilder].
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
///
/// This sample shows a `DropdownButton` with a dropdown button text style
/// that is different than its menu items.

4
packages/flutter/lib/src/material/expansion_panel.dart
View file

@ -140,7 +140,7 @@ class ExpansionPanelRadio extends ExpansionPanel {
/// Note that [expansionCallback] behaves differently for [ExpansionPanelList]
/// and [ExpansionPanelList.radio].
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
///
/// Here is a simple example of how to implement ExpansionPanelList.
///
@ -242,7 +242,7 @@ class ExpansionPanelList extends StatefulWidget {
/// arguments must not be null. The [children] objects must be instances
/// of [ExpansionPanelRadio].
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
///
/// Here is a simple example of how to implement ExpansionPanelList.radio.
///

2
packages/flutter/lib/src/material/flexible_space_bar.dart
View file

@ -50,7 +50,7 @@ enum StretchMode {
/// [FlexibleSpaceBar.createSettings], to convey sizing information down to the
/// [FlexibleSpaceBar].
///
/// {@tool sample --template=freeform}
/// {@tool dartpad --template=freeform}
/// 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

4
packages/flutter/lib/src/material/floating_action_button.dart
View file

@ -58,7 +58,7 @@ class _DefaultHeroTag {
/// disabled. Consider changing the [backgroundColor] if disabling the floating
/// action button.
///
/// {@tool sample --template=stateless_widget_material}
/// {@tool dartpad --template=stateless_widget_material}
/// This example shows how to display a [FloatingActionButton] in a
/// [Scaffold], with a pink [backgroundColor] and a thumbs up [Icon].
///
@ -85,7 +85,7 @@ class _DefaultHeroTag {
/// ```
/// {@end-tool}
///
/// {@tool sample --template=stateless_widget_material}
/// {@tool dartpad --template=stateless_widget_material}
/// 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".

4
packages/flutter/lib/src/material/icon_button.dart
View file

@ -39,7 +39,7 @@ const double _kMinButtonSize = kMinInteractiveDimension;
/// requirements in the Material Design specification. The [alignment] controls
/// how the icon itself is positioned within the hit region.
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
///
/// This sample shows an `IconButton` that uses the Material icon "volume_up" to
/// increase the volume.
@ -83,7 +83,7 @@ const double _kMinButtonSize = kMinInteractiveDimension;
/// the underlying [Material] along with the splash and highlight
/// [InkResponse] contributed by descendant widgets.
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// 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

2
packages/flutter/lib/src/material/ink_well.dart
View file

@ -921,7 +921,7 @@ class _InkResponseState<T extends InkResponse> extends State<T> with AutomaticKe
///
/// An example of this situation is as follows:
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
///
/// 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.

8
packages/flutter/lib/src/material/input_decorator.dart
View file

@ -2329,7 +2329,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
/// to describe their decoration. (In fact, this class is merely the
/// configuration of an [InputDecorator], which does all the heavy lifting.)
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// 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,
@ -2354,7 +2354,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
/// ```
/// {@end-tool}
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// This sample shows how to style a "collapsed" `TextField` using an
/// `InputDecorator`. The collapsed `TextField` surrounds the hint text and
@ -2374,7 +2374,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
/// ```
/// {@end-tool}
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// 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
@ -2395,7 +2395,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
/// ```
/// {@end-tool}
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// 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

8
packages/flutter/lib/src/material/list_tile.dart
View file

@ -317,7 +317,7 @@ enum ListTileControlAffinity {
/// you're looking for, it's easy to create custom list items with a
/// combination of other widgets, such as [Row]s and [Column]s.
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// Here is an example of a custom list item that resembles a Youtube related
/// video list item created with [Expanded] and [Container] widgets.
@ -438,7 +438,7 @@ enum ListTileControlAffinity {
/// ```
/// {@end-tool}
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// 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
@ -469,7 +469,7 @@ enum ListTileControlAffinity {
/// crossAxisAlignment: CrossAxisAlignment.start,
/// children: <Widget>[
/// Expanded(
/// flex: 2,
/// flex: 1,
/// child: Column(
/// crossAxisAlignment: CrossAxisAlignment.start,
/// children: <Widget>[
@ -508,7 +508,7 @@ enum ListTileControlAffinity {
/// ),
/// ),
/// Text(
/// '$publishDate · $readDuration ★',
/// '$publishDate - $readDuration',
/// style: const TextStyle(
/// fontSize: 12.0,
/// color: Colors.black54,

2
packages/flutter/lib/src/material/radio.dart
View file

@ -29,7 +29,7 @@ const double _kInnerRadius = 4.5;
/// will respond to [onChanged] by calling [State.setState] to update the
/// radio button's [groupValue].
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
///
/// Here is an example of Radio widgets wrapped in ListTiles, which is similar
/// to what you could get with the RadioListTile widget.

6
packages/flutter/lib/src/material/radio_list_tile.dart
View file

@ -40,7 +40,7 @@ import 'theme_data.dart';
/// To show the [RadioListTile] as disabled, pass null as the [onChanged]
/// callback.
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
///
/// ![RadioListTile sample](https://flutter.github.io/assets-for-api-docs/assets/material/radio_list_tile.png)
///
@ -92,7 +92,7 @@ import 'theme_data.dart';
/// into one. Therefore, it may be necessary to create a custom radio tile
/// widget to accommodate similar use cases.
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
///
/// ![Radio list tile semantics sample](https://flutter.github.io/assets-for-api-docs/assets/material/radio_list_tile_semantics.png)
///
@ -196,7 +196,7 @@ import 'theme_data.dart';
/// combining [Radio] with other widgets, such as [Text], [Padding] and
/// [InkWell].
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
///
/// ![Custom radio list tile sample](https://flutter.github.io/assets-for-api-docs/assets/material/radio_list_tile_custom.png)
///

2
packages/flutter/lib/src/material/raised_button.dart
View file

@ -31,7 +31,7 @@ import 'theme_data.dart';
/// Raised buttons have a minimum size of 88.0 by 36.0 which can be overridden
/// with [ButtonTheme].
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// This sample shows how to render a disabled RaisedButton, an enabled RaisedButton
/// and lastly a RaisedButton with gradient background.

74
packages/flutter/lib/src/material/scaffold.dart
View file

@ -807,7 +807,7 @@ class _FloatingActionButtonTransitionState extends State<_FloatingActionButtonTr
/// [ScaffoldState] for the current [BuildContext] via [Scaffold.of] and use the
/// [ScaffoldState.showSnackBar] and [ScaffoldState.showBottomSheet] functions.
///
/// {@tool sample --template=stateful_widget_material}
/// {@tool dartpad --template=stateful_widget_material}
/// 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
@ -836,7 +836,7 @@ class _FloatingActionButtonTransitionState extends State<_FloatingActionButtonTr
/// ```
/// {@end-tool}
///
/// {@tool sample --template=stateful_widget_material}
/// {@tool dartpad --template=stateful_widget_material}
/// 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]
@ -866,7 +866,7 @@ class _FloatingActionButtonTransitionState extends State<_FloatingActionButtonTr
/// ```
/// {@end-tool}
///
/// {@tool sample --template=stateful_widget_material}
/// {@tool dartpad --template=stateful_widget_material}
/// 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
@ -1098,12 +1098,14 @@ class Scaffold extends StatefulWidget {
///
/// Typically a [Drawer].
///
/// To open the drawer programmatically, use the [ScaffoldState.openDrawer]
/// function.
/// To open the drawer, use the [ScaffoldState.openDrawer] function.
///
/// {@tool sample --template=stateful_widget_material}
/// To disable the drawer edge swipe, set the [Scaffold.drawerEdgeWidth]
/// to 0. Then, use [ScaffoldState.openDrawer] to open the drawer.
/// To close the drawer, use [Navigator.pop].
///
/// {@tool dartpad --template=stateful_widget_material}
/// To disable the drawer edge swipe, set the [Scaffold.drawerEdgeWidth] to 0.
/// Then, use [ScaffoldState.openDrawer] to open the drawer and
/// [Navigator.pop] to close it.
///
/// ```dart
/// final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@ -1112,19 +1114,34 @@ class Scaffold extends StatefulWidget {
/// _scaffoldKey.currentState.openDrawer();
/// }
///
/// void _closeDrawer() {
/// Navigator.of(context).pop();
/// }
///
/// @override
/// Widget build(BuildContext context) {
/// return Scaffold(
/// key: _scaffoldKey,
/// appBar: AppBar(title: Text('Drawer Demo')),
/// appBar: AppBar(title: const Text('Drawer Demo')),
/// body: Center(
/// child: RaisedButton(
/// onPressed: _openDrawer,
/// child: Text('Open Drawer'),
/// child: const Text('Open Drawer'),
/// ),
/// ),
/// drawer: Drawer(
/// child: Center(child: Text('This is the Drawer')),
/// child: Center(
/// child: Column(
/// mainAxisAlignment: MainAxisAlignment.center,
/// children: <Widget>[
/// const Text('This is the Drawer'),
/// RaisedButton(
/// onPressed: _closeDrawer,
/// child: const Text('Close Drawer'),
/// ),
/// ],
/// ),
/// ),
/// ),
/// drawerEdgeDragWidth: 0.0, // Disable opening the drawer with a swipe gesture.
/// );
@ -1139,12 +1156,14 @@ class Scaffold extends StatefulWidget {
///
/// Typically a [Drawer].
///
/// To open the drawer programmatically, use the [ScaffoldState.openEndDrawer]
/// function.
/// To open the drawer, use the [ScaffoldState.openEndDrawer] function.
///
/// {@tool sample --template=stateful_widget_material}
/// To close the drawer, use [Navigator.pop].
///
/// {@tool dartpad --template=stateful_widget_material}
/// To disable the drawer edge swipe, set the [Scaffold.drawerEdgeWidth]
/// to 0. Then, use [ScaffoldState.openEndDrawer] to open the drawer.
/// to 0. Then, use [ScaffoldState.openEndDrawer] to open the drawer and
/// [Navigator.pop] to close it.
///
/// ```dart
/// final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@ -1153,6 +1172,10 @@ class Scaffold extends StatefulWidget {
/// _scaffoldKey.currentState.openEndDrawer();
/// }
///
/// void _closeEndDrawer() {
/// Navigator.of(context).pop();
/// }
///
/// @override
/// Widget build(BuildContext context) {
/// return Scaffold(
@ -1165,7 +1188,18 @@ class Scaffold extends StatefulWidget {
/// ),
/// ),
/// endDrawer: Drawer(
/// child: Center(child: Text('This is the Drawer')),
/// child: Center(
/// child: Column(
/// mainAxisAlignment: MainAxisAlignment.center,
/// children: <Widget>[
/// const Text('This is the Drawer'),
/// RaisedButton(
/// onPressed: _closeEndDrawer,
/// child: const Text('Close Drawer'),
/// ),
/// ],
/// ),
/// ),
/// ),
/// drawerEdgeDragWidth: 0.0, // Disable opening the drawer with a swipe gesture.
/// );
@ -1271,7 +1305,7 @@ class Scaffold extends StatefulWidget {
/// The state from the closest instance of this class that encloses the given context.
///
/// {@tool sample --template=freeform}
/// {@tool dartpad --template=freeform}
/// Typical usage of the [Scaffold.of] function is to call it from within the
/// `build` method of a child of a [Scaffold].
///
@ -1324,7 +1358,7 @@ class Scaffold extends StatefulWidget {
/// ```
/// {@end-tool}
///
/// {@tool sample --template=stateless_widget_material}
/// {@tool dartpad --template=stateless_widget_material}
/// 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
@ -1879,9 +1913,7 @@ class ScaffoldState extends State<Scaffold> with TickerProviderStateMixin {
/// of the app. Modal bottom sheets can be created and displayed with the
/// [showModalBottomSheet] function.
///
/// {@animation 350 622 https://flutter.github.io/assets-for-api-docs/assets/material/show_bottom_sheet.mp4}
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// This example demonstrates how to use `showBottomSheet` to display a
/// bottom sheet when a user taps a button. It also demonstrates how to

4
packages/flutter/lib/src/material/stepper.dart
View file

@ -192,7 +192,7 @@ class Stepper extends StatefulWidget {
/// This callback which takes in a context and two functions,[onStepContinue]
/// and [onStepCancel]. These can be used to control the stepper.
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
/// Creates a stepper control with custom buttons.
///
/// ```dart
@ -204,7 +204,7 @@ class Stepper extends StatefulWidget {
/// children: <Widget>[
/// FlatButton(
/// onPressed: onStepContinue,
/// child: const Text('CONTINUE'),
/// child: const Text('NEXT'),
/// ),
/// FlatButton(
/// onPressed: onStepCancel,

6
packages/flutter/lib/src/material/switch_list_tile.dart
View file

@ -46,7 +46,7 @@ enum _SwitchListTileType { material, adaptive }
/// To show the [SwitchListTile] as disabled, pass null as the [onChanged]
/// callback.
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
///
/// ![SwitchListTile sample](https://flutter.github.io/assets-for-api-docs/assets/material/switch_list_tile.png)
///
@ -85,7 +85,7 @@ enum _SwitchListTileType { material, adaptive }
/// into one. Therefore, it may be necessary to create a custom radio tile
/// widget to accommodate similar use cases.
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
///
/// ![Switch list tile semantics sample](https://flutter.github.io/assets-for-api-docs/assets/material/switch_list_tile_semantics.png)
///
@ -169,7 +169,7 @@ enum _SwitchListTileType { material, adaptive }
/// combining [Switch] with other widgets, such as [Text], [Padding] and
/// [InkWell].
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
///
/// ![Custom switch list tile sample](https://flutter.github.io/assets-for-api-docs/assets/material/switch_list_tile_custom.png)
///

4
packages/flutter/lib/src/services/keyboard_key.dart
View file

@ -45,7 +45,7 @@ abstract class KeyboardKey extends Diagnosticable {
/// look at the physical key to make sure that regardless of the character the
/// key produces, you got the key that is in that location on the keyboard.
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
/// This example shows how to detect if the user has selected the logical "Q"
/// key.
///
@ -1960,7 +1960,7 @@ class LogicalKeyboardKey extends KeyboardKey {
/// looking for "the key next next to the TAB key", since on a French keyboard,
/// the key next to the TAB key has an "A" on it.
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
/// This example shows how to detect if the user has selected the physical key
/// to the right of the CAPS LOCK key.
///

2
packages/flutter/lib/src/widgets/actions.dart
View file

@ -371,7 +371,7 @@ class Actions extends InheritedWidget {
/// widget, and the new control should be enabled for keyboard traversal and
/// activation.
///
/// {@tool sample --template=stateful_widget_material}
/// {@tool dartpad --template=stateful_widget_material}
/// 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.

14
packages/flutter/lib/src/widgets/animated_list.dart
View file

@ -48,7 +48,7 @@ class _ActiveItem implements Comparable<_ActiveItem> {
///
/// {@youtube 560 315 https://www.youtube.com/watch?v=ZtfItHwFlZ8}
///
/// {@tool sample --template=freeform}
/// {@tool dartpad --template=freeform}
/// This sample application uses an [AnimatedList] to create an effect when
/// items are removed or added to the list.
///
@ -241,7 +241,7 @@ class _ActiveItem implements Comparable<_ActiveItem> {
/// behavior: HitTestBehavior.opaque,
/// onTap: onTap,
/// child: SizedBox(
/// height: 128.0,
/// height: 80.0,
/// child: Card(
/// color: Colors.primaries[item % Colors.primaries.length],
/// child: Center(
@ -490,7 +490,7 @@ class AnimatedListState extends State<AnimatedList> with TickerProviderStateMixi
/// [GlobalKey] or use the static [SliverAnimatedList.of] method from an item's
/// input callback.
///
/// {@tool sample --template=freeform}
/// {@tool dartpad --template=freeform}
/// This sample application uses a [SliverAnimatedList] to create an animated
/// effect when items are removed or added to the list.
///
@ -588,21 +588,21 @@ class AnimatedListState extends State<AnimatedList> with TickerProviderStateMixi
/// 'SliverAnimatedList',
/// style: TextStyle(fontSize: 30),
/// ),
/// expandedHeight: 100,
/// expandedHeight: 60,
/// centerTitle: true,
/// backgroundColor: Colors.amber[900],
/// leading: IconButton(
/// icon: const Icon(Icons.add_circle),
/// onPressed: _insert,
/// tooltip: 'Insert a new item.',
/// iconSize: 48,
/// iconSize: 32,
/// ),
/// actions: [
/// IconButton(
/// icon: const Icon(Icons.remove_circle),
/// onPressed: _remove,
/// tooltip: 'Remove the selected item.',
/// iconSize: 48,
/// iconSize: 32,
/// ),
/// ],
/// ),
@ -704,7 +704,7 @@ class AnimatedListState extends State<AnimatedList> with TickerProviderStateMixi
/// child: GestureDetector(
/// onTap: onTap,
/// child: SizedBox(
/// height: 120.0,
/// height: 80.0,
/// child: Card(
/// color: selected
/// ? Colors.black12

278
packages/flutter/lib/src/widgets/async.dart
View file

@ -339,11 +339,7 @@ typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnaps
/// as the builder will always be called before the stream listener has a chance
/// to be processed.
///
/// {@animation 200 150 https://flutter.github.io/assets-for-api-docs/assets/widgets/stream_builder.mp4}
///
/// {@animation 200 150 https://flutter.github.io/assets-for-api-docs/assets/widgets/stream_builder_error.mp4}
///
/// {@tool sample --template=stateful_widget_material}
/// {@tool dartpad --template=stateful_widget_material}
///
/// 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,
@ -359,89 +355,92 @@ typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnaps
/// })();
///
/// Widget build(BuildContext context) {
/// return Container(
/// alignment: FractionalOffset.center,
/// color: Colors.white,
/// child: StreamBuilder<int>(
/// stream: _bids,
/// builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
/// List<Widget> children;
///
/// if (snapshot.hasError) {
/// children = <Widget>[
/// Icon(
/// Icons.error_outline,
/// color: Colors.red,
/// size: 60,
/// ),
/// Padding(
/// padding: const EdgeInsets.only(top: 16),
/// child: Text('Error: ${snapshot.error}'),
/// )
/// ];
/// } else {
/// switch (snapshot.connectionState) {
/// case ConnectionState.none:
/// children = <Widget>[
/// Icon(
/// Icons.info,
/// color: Colors.blue,
/// size: 60,
/// ),
/// const Padding(
/// padding: EdgeInsets.only(top: 16),
/// child: Text('Select a lot'),
/// )
/// ];
/// break;
/// case ConnectionState.waiting:
/// children = <Widget>[
/// SizedBox(
/// child: const CircularProgressIndicator(),
/// width: 60,
/// height: 60,
/// ),
/// const Padding(
/// padding: EdgeInsets.only(top: 16),
/// child: Text('Awaiting bids...'),
/// )
/// ];
/// break;
/// case ConnectionState.active:
/// children = <Widget>[
/// Icon(
/// Icons.check_circle_outline,
/// color: Colors.green,
/// size: 60,
/// ),
/// Padding(
/// padding: const EdgeInsets.only(top: 16),
/// child: Text('\$${snapshot.data}'),
/// )
/// ];
/// break;
/// case ConnectionState.done:
/// children = <Widget>[
/// Icon(
/// Icons.info,
/// color: Colors.blue,
/// size: 60,
/// ),
/// Padding(
/// padding: const EdgeInsets.only(top: 16),
/// child: Text('\$${snapshot.data} (closed)'),
/// )
/// ];
/// break;
/// return DefaultTextStyle(
/// style: Theme.of(context).textTheme.headline2,
/// textAlign: TextAlign.center,
/// child: Container(
/// alignment: FractionalOffset.center,
/// color: Colors.white,
/// child: StreamBuilder<int>(
/// stream: _bids,
/// builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
/// List<Widget> children;
/// if (snapshot.hasError) {
/// children = <Widget>[
/// Icon(
/// Icons.error_outline,
/// color: Colors.red,
/// size: 60,
/// ),
/// Padding(
/// padding: const EdgeInsets.only(top: 16),
/// child: Text('Error: ${snapshot.error}'),
/// )
/// ];
/// } else {
/// switch (snapshot.connectionState) {
/// case ConnectionState.none:
/// children = <Widget>[
/// Icon(
/// Icons.info,
/// color: Colors.blue,
/// size: 60,
/// ),
/// const Padding(
/// padding: EdgeInsets.only(top: 16),
/// child: Text('Select a lot'),
/// )
/// ];
/// break;
/// case ConnectionState.waiting:
/// children = <Widget>[
/// SizedBox(
/// child: const CircularProgressIndicator(),
/// width: 60,
/// height: 60,
/// ),
/// const Padding(
/// padding: EdgeInsets.only(top: 16),
/// child: Text('Awaiting bids...'),
/// )
/// ];
/// break;
/// case ConnectionState.active:
/// children = <Widget>[
/// Icon(
/// Icons.check_circle_outline,
/// color: Colors.green,
/// size: 60,
/// ),
/// Padding(
/// padding: const EdgeInsets.only(top: 16),
/// child: Text('\$${snapshot.data}'),
/// )
/// ];
/// break;
/// case ConnectionState.done:
/// children = <Widget>[
/// Icon(
/// Icons.info,
/// color: Colors.blue,
/// size: 60,
/// ),
/// Padding(
/// padding: const EdgeInsets.only(top: 16),
/// child: Text('\$${snapshot.data} (closed)'),
/// )
/// ];
/// break;
/// }
/// }
/// }
///
/// return Column(
/// mainAxisAlignment: MainAxisAlignment.center,
/// crossAxisAlignment: CrossAxisAlignment.center,
/// children: children,
/// );
/// },
/// return Column(
/// mainAxisAlignment: MainAxisAlignment.center,
/// crossAxisAlignment: CrossAxisAlignment.center,
/// children: children,
/// );
/// },
/// ),
/// ),
/// );
/// }
@ -574,11 +573,7 @@ class StreamBuilder<T> extends StreamBuilderBase<T, AsyncSnapshot<T>> {
/// `future?.asStream()`, except that snapshots with `ConnectionState.active`
/// may appear for the latter, depending on how the stream is implemented.
///
/// {@animation 200 150 https://flutter.github.io/assets-for-api-docs/assets/widgets/future_builder.mp4}
///
/// {@animation 200 150 https://flutter.github.io/assets-for-api-docs/assets/widgets/future_builder_error.mp4}
///
/// {@tool sample --template=stateful_widget_material}
/// {@tool dartpad --template=stateful_widget_material}
///
/// 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
@ -593,56 +588,59 @@ class StreamBuilder<T> extends StreamBuilderBase<T, AsyncSnapshot<T>> {
/// );
///
/// Widget build(BuildContext context) {
/// return FutureBuilder<String>(
/// future: _calculation, // a previously-obtained Future<String> or null
/// builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
/// List<Widget> children;
///
/// if (snapshot.hasData) {
/// children = <Widget>[
/// Icon(
/// Icons.check_circle_outline,
/// color: Colors.green,
/// size: 60,
/// return DefaultTextStyle(
/// style: Theme.of(context).textTheme.headline2,
/// textAlign: TextAlign.center,
/// child: FutureBuilder<String>(
/// future: _calculation, // a previously-obtained Future<String> or null
/// builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
/// List<Widget> children;
/// if (snapshot.hasData) {
/// children = <Widget>[
/// Icon(
/// Icons.check_circle_outline,
/// color: Colors.green,
/// size: 60,
/// ),
/// Padding(
/// padding: const EdgeInsets.only(top: 16),
/// child: Text('Result: ${snapshot.data}'),
/// )
/// ];
/// } else if (snapshot.hasError) {
/// children = <Widget>[
/// Icon(
/// Icons.error_outline,
/// color: Colors.red,
/// size: 60,
/// ),
/// Padding(
/// padding: const EdgeInsets.only(top: 16),
/// child: Text('Error: ${snapshot.error}'),
/// )
/// ];
/// } else {
/// children = <Widget>[
/// SizedBox(
/// child: CircularProgressIndicator(),
/// width: 60,
/// height: 60,
/// ),
/// const Padding(
/// padding: EdgeInsets.only(top: 16),
/// child: Text('Awaiting result...'),
/// )
/// ];
/// }
/// return Center(
/// child: Column(
/// mainAxisAlignment: MainAxisAlignment.center,
/// crossAxisAlignment: CrossAxisAlignment.center,
/// children: children,
/// ),
/// Padding(
/// padding: const EdgeInsets.only(top: 16),
/// child: Text('Result: ${snapshot.data}'),
/// )
/// ];
/// } else if (snapshot.hasError) {
/// children = <Widget>[
/// Icon(
/// Icons.error_outline,
/// color: Colors.red,
/// size: 60,
/// ),
/// Padding(
/// padding: const EdgeInsets.only(top: 16),
/// child: Text('Error: ${snapshot.error}'),
/// )
/// ];
/// } else {
/// children = <Widget>[
/// SizedBox(
/// child: CircularProgressIndicator(),
/// width: 60,
/// height: 60,
/// ),
/// const Padding(
/// padding: EdgeInsets.only(top: 16),
/// child: Text('Awaiting result...'),
/// )
/// ];
/// }
/// return Center(
/// child: Column(
/// mainAxisAlignment: MainAxisAlignment.center,
/// crossAxisAlignment: CrossAxisAlignment.center,
/// children: children,
/// ),
/// );
/// },
/// );
/// },
/// ),
/// );
/// }
/// ```

16
packages/flutter/lib/src/widgets/basic.dart
View file

@ -4444,7 +4444,7 @@ class Flexible extends ParentDataWidget<FlexParentData> {
///
/// {@youtube 560 315 https://www.youtube.com/watch?v=_rnZaagadyo}
///
/// {@tool sample --template=stateless_widget_material}
/// {@tool dartpad --template=stateless_widget_material}
/// This example shows how to use an [Expanded] widget in a [Column] so that
/// it's middle child, a [Container] here, expands to fill the space.
///
@ -4483,7 +4483,7 @@ class Flexible extends ParentDataWidget<FlexParentData> {
/// ```
/// {@end-tool}
///
/// {@tool sample --template=stateless_widget_material}
/// {@tool dartpad --template=stateless_widget_material}
/// This example shows how to use an [Expanded] widget in a [Row] with multiple
/// children expanded, utilizing the [flex] factor to prioritize available space.
///
@ -4826,9 +4826,7 @@ class Wrap extends MultiChildRenderObjectWidget {
/// * The [catalog of layout widgets](https://flutter.dev/widgets/layout/).
///
///
/// {@animation 450 100 https://flutter.github.io/assets-for-api-docs/assets/widgets/flow_menu.mp4}
///
/// {@tool sample --template=freeform}
/// {@tool dartpad --template=freeform}
///
/// 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
@ -5542,7 +5540,7 @@ class WidgetToRenderBoxAdapter extends LeafRenderObjectWidget {
/// If it has a child, this widget defers to the child for sizing behavior. If
/// it does not have a child, it grows to fit the parent instead.
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
/// This example makes a [Container] react to being touched, showing a count of
/// the number of pointer downs and ups.
///
@ -5795,7 +5793,7 @@ class _PointerListener extends SingleChildRenderObjectWidget {
/// If it has a child, this widget defers to the child for sizing behavior. If
/// it does not have a child, it grows to fit the parent instead.
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
/// This example makes a [Container] react to being entered by a mouse
/// pointer, showing a count of the number of entries and exits.
///
@ -5949,7 +5947,7 @@ class MouseRegion extends StatefulWidget {
/// override [State.dispose] and call [onExit], or create your own widget
/// using [RenderMouseRegion].
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
/// 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
@ -5977,7 +5975,7 @@ class MouseRegion extends StatefulWidget {
/// ```
/// {@end-tool}
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
/// The following example shows a widget that hides its content one second
/// after behing hovered, and also exposes the enter and exit callbacks.
/// Because the widget conditionally creates the `MouseRegion`, and leaks the

4
packages/flutter/lib/src/widgets/editable_text.dart
View file

@ -70,7 +70,7 @@ const int _kObscureShowLatestCharCursorTicks = 3;
///
/// Remember to [dispose] of the [TextEditingController] when it is no longer needed.
/// This will ensure we discard any resources used by the object.
/// {@tool sample --template=stateful_widget_material}
/// {@tool dartpad --template=stateful_widget_material}
/// This example creates a [TextField] with a [TextEditingController] whose
/// change listener forces the entered text to be lower case and keeps the
/// cursor at the end of the input.
@ -872,7 +872,7 @@ class EditableText extends StatefulWidget {
/// field.
/// {@endtemplate}
///
/// {@tool sample --template=stateful_widget_material}
/// {@tool dartpad --template=stateful_widget_material}
/// When a non-completion action is pressed, such as "next" or "previous", it
/// is often desirable to move the focus to the next or previous field. To do
/// this, handle it as in this example, by calling [FocusNode.focusNext] in

2
packages/flutter/lib/src/widgets/focus_manager.dart
View file

@ -239,7 +239,7 @@ class FocusAttachment {
/// [ReadingOrderTraversalPolicy], and [DirectionalFocusTraversalPolicyMixin],
/// but custom policies can be built based upon these policies.
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
/// This example shows how a FocusNode should be managed if not using the
/// [Focus] or [FocusScope] widgets. See the [Focus] widget for a similar
/// example using [Focus] and [FocusScope] widgets.

2
packages/flutter/lib/src/widgets/focus_scope.dart
View file

@ -38,7 +38,7 @@ import 'inherited_notifier.dart';
///
/// To collect a sub-tree of nodes into a group, use a [FocusScope].
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
/// This example shows how to manage focus using the [Focus] and [FocusScope]
/// widgets. See [FocusNode] for a similar example that doesn't use [Focus] or
/// [FocusScope].

2
packages/flutter/lib/src/widgets/form.dart
View file

@ -16,7 +16,7 @@ import 'will_pop_scope.dart';
/// with a context whose ancestor is the [Form], or pass a [GlobalKey] to the
/// [Form] constructor and call [GlobalKey.currentState].
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
/// This example shows a [Form] with one [TextFormField] to enter an email
/// address and a [RaisedButton] to submit the form. A [GlobalKey] is used here
/// to identify the [Form] and validate input.

17
packages/flutter/lib/src/widgets/image.dart
View file

@ -688,7 +688,7 @@ class Image extends StatefulWidget {
/// ```
/// {@endtemplate}
///
/// {@tool sample --template=stateless_widget_material}
/// {@tool dartpad --template=stateless_widget_material}
///
/// The following sample demonstrates how to use this builder to implement an
/// image that fades in once it's been loaded.
@ -706,7 +706,7 @@ class Image extends StatefulWidget {
/// borderRadius: BorderRadius.circular(20),
/// ),
/// child: Image.network(
/// 'https://example.com/image.jpg',
/// 'https://flutter.github.io/assets-for-api-docs/assets/widgets/puffin.jpg',
/// frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
/// if (wasSynchronouslyLoaded) {
/// return child;
@ -723,11 +723,6 @@ class Image extends StatefulWidget {
/// }
/// ```
/// {@end-tool}
///
/// Run against a real-world image, the previous example renders the following
/// image.
///
/// {@animation 400 400 https://flutter.github.io/assets-for-api-docs/assets/widgets/frame_builder_image.mp4}
final ImageFrameBuilder frameBuilder;
/// A builder that specifies the widget to display to the user while an image
@ -759,7 +754,7 @@ class Image extends StatefulWidget {
///
/// {@macro flutter.widgets.image.chainedBuildersExample}
///
/// {@tool sample --template=stateless_widget_material}
/// {@tool dartpad --template=stateless_widget_material}
///
/// The following sample uses [loadingBuilder] to show a
/// [CircularProgressIndicator] while an image loads over the network.
@ -791,9 +786,9 @@ class Image extends StatefulWidget {
/// ```
/// {@end-tool}
///
/// Run against a real-world image, the previous example renders the following
/// loading progress indicator while the image loads before rendering the
/// completed image.
/// Run against a real-world image on a slow network, the previous example
/// renders the following loading progress indicator while the image loads
/// before rendering the completed image.
///
/// {@animation 400 400 https://flutter.github.io/assets-for-api-docs/assets/widgets/loading_progress_image.mp4}
final ImageLoadingBuilder loadingBuilder;

10
packages/flutter/lib/src/widgets/implicit_animations.dart
View file

@ -574,11 +574,7 @@ abstract class AnimatedWidgetBaseState<T extends ImplicitlyAnimatedWidget> exten
///
/// {@youtube 560 315 https://www.youtube.com/watch?v=yI-8QHpGIP4}
///
/// Here's an illustration (implemented below) of what using this widget looks
/// like, using a [curve] of [Curves.fastOutSlowIn].
/// {@animation 250 266 https://flutter.github.io/assets-for-api-docs/assets/widgets/animated_container.mp4}
///
/// {@tool sample --template=stateful_widget_scaffold}
/// {@tool dartpad --template=stateful_widget_scaffold}
///
/// The following example (depicted above) transitions an AnimatedContainer
/// between two states. It adjusts the [height], [width], [color], and
@ -1378,9 +1374,7 @@ class _AnimatedOpacityState extends ImplicitlyAnimatedWidgetState<AnimatedOpacit
/// Here's an illustration of what using this widget looks like, using a [curve]
/// of [Curves.fastOutSlowIn].
///
/// {@animation 250 266 https://flutter.github.io/assets-for-api-docs/assets/widgets/animated_opacity.mp4}
///
/// {@tool sample --template=stateful_widget_scaffold_center_freeform_state}
/// {@tool dartpad --template=stateful_widget_scaffold_center_freeform_state}
/// Creates a [CustomScrollView] with a [SliverFixedExtentList] and a
/// [FloatingActionButton]. Pressing the button animates the lists' opacity.
///

2
packages/flutter/lib/src/widgets/inherited_theme.dart
View file

@ -19,7 +19,7 @@ import 'framework.dart';
/// be able to depend on inherited widget ancestors of the context
/// it's built in.
///
/// {@tool sample --template=freeform}
/// {@tool dartpad --template=freeform}
/// This example demonstrates how `InheritedTheme.captureAll()` can be used
/// to wrap the contents of a new route with the inherited themes that
/// are present when the route is built - but are not present when route

2
packages/flutter/lib/src/widgets/media_query.dart
View file

@ -234,7 +234,7 @@ class MediaQueryData {
/// This property is currently only expected to be set to a non-default value
/// on Android starting with version Q.
///
/// {@tool sample --template=stateful_widget_material}
/// {@tool dartpad --template=stateful_widget_material}
///
/// For apps that might be deployed on Android Q devices with full gesture
/// navigation enabled, use [MediaQuery.systemGestureInsets] with [Padding]

2
packages/flutter/lib/src/widgets/nested_scroll_view.dart
View file

@ -303,7 +303,7 @@ class NestedScrollView extends StatefulWidget {
/// [NestedScrollView], you can get its [NestedScrollViewState] by supplying a
/// `GlobalKey<NestedScrollViewState>` to the [NestedScrollView.key] parameter).
///
/// {@tool sample --template=stateless_widget_material}
/// {@tool dartpad --template=stateless_widget_material}
/// [NestedScrollViewState] can be obtained using a [GlobalKey].
/// Using the following setup, you can access the inner scroll controller
/// using `globalKey.currentState.innerController`.

144
packages/flutter/lib/src/widgets/single_child_scroll_view.dart
View file

@ -80,7 +80,7 @@ import 'scrollable.dart';
/// with some remaining space to allocate as specified by its
/// [Column.mainAxisAlignment] argument.
///
/// {@tool sample --template=stateless_widget}
/// {@tool dartpad --template=stateless_widget_material}
/// In this example, the children are spaced out equally, unless there's no more
/// room, in which case they stack vertically and scroll.
///
@ -88,38 +88,43 @@ import 'scrollable.dart';
/// 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.
///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/widgets/single_child_scroll_view_fixed.png)
///
/// ```dart
/// Widget build(BuildContext context) {
/// return LayoutBuilder(
/// builder: (BuildContext context, BoxConstraints viewportConstraints) {
/// return SingleChildScrollView(
/// child: ConstrainedBox(
/// constraints: BoxConstraints(
/// minHeight: viewportConstraints.maxHeight,
/// ),
/// child: Column(
/// mainAxisSize: MainAxisSize.min,
/// mainAxisAlignment: MainAxisAlignment.spaceAround,
/// children: <Widget>[
/// Container(
/// // A fixed-height child.
/// color: const Color(0xff808000), // Yellow
/// height: 120.0,
/// ),
/// Container(
/// // Another fixed-height child.
/// color: const Color(0xff008000), // Green
/// height: 120.0,
/// ),
/// ],
/// ),
/// ),
/// );
/// },
/// );
/// }
/// Widget build(BuildContext context) {
/// return DefaultTextStyle(
/// style: Theme.of(context).textTheme.bodyText2,
/// child: LayoutBuilder(
/// builder: (BuildContext context, BoxConstraints viewportConstraints) {
/// return SingleChildScrollView(
/// child: ConstrainedBox(
/// constraints: BoxConstraints(
/// minHeight: viewportConstraints.maxHeight,
/// ),
/// child: Column(
/// mainAxisSize: MainAxisSize.min,
/// mainAxisAlignment: MainAxisAlignment.spaceAround,
/// children: <Widget>[
/// Container(
/// // A fixed-height child.
/// color: const Color(0xffeeee00), // Yellow
/// height: 120.0,
/// alignment: Alignment.center,
/// child: const Text('Fixed Height Content'),
/// ),
/// Container(
/// // Another fixed-height child.
/// color: const Color(0xff008000), // Green
/// height: 120.0,
/// alignment: Alignment.center,
/// child: const Text('Fixed Height Content'),
/// ),
/// ],
/// ),
/// ),
/// );
/// },
/// ),
/// );
/// }
/// ```
/// {@end-tool}
///
@ -149,45 +154,50 @@ import 'scrollable.dart';
/// so that the intrinsic sizing algorithm can short-circuit the computation when it
/// reaches those parts of the subtree.
///
/// {@tool sample --template=stateless_widget}
/// {@tool dartpad --template=stateless_widget_material}
/// In this example, the column becomes either as big as viewport, or as big as
/// the contents, whichever is biggest.
///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/widgets/single_child_scroll_view_expanded.png)
///
/// ```dart
/// Widget build(BuildContext context) {
/// return LayoutBuilder(
/// builder: (BuildContext context, BoxConstraints viewportConstraints) {
/// return SingleChildScrollView(
/// child: ConstrainedBox(
/// constraints: BoxConstraints(
/// minHeight: viewportConstraints.maxHeight,
/// ),
/// child: IntrinsicHeight(
/// child: Column(
/// children: <Widget>[
/// Container(
/// // A fixed-height child.
/// color: const Color(0xff808000), // Yellow
/// height: 120.0,
/// ),
/// Expanded(
/// // A flexible child that will grow to fit the viewport but
/// // still be at least as big as necessary to fit its contents.
/// child: Container(
/// color: const Color(0xff800000), // Red
/// height: 120.0,
/// ),
/// ),
/// ],
/// ),
/// ),
/// ),
/// );
/// },
/// );
/// }
/// Widget build(BuildContext context) {
/// return DefaultTextStyle(
/// style: Theme.of(context).textTheme.bodyText2,
/// child: LayoutBuilder(
/// builder: (BuildContext context, BoxConstraints viewportConstraints) {
/// return SingleChildScrollView(
/// child: ConstrainedBox(
/// constraints: BoxConstraints(
/// minHeight: viewportConstraints.maxHeight,
/// ),
/// child: IntrinsicHeight(
/// child: Column(
/// children: <Widget>[
/// Container(
/// // A fixed-height child.
/// color: const Color(0xffeeee00), // Yellow
/// height: 120.0,
/// alignment: Alignment.center,
/// child: const Text('Fixed Height Content'),
/// ),
/// Expanded(
/// // A flexible child that will grow to fit the viewport but
/// // still be at least as big as necessary to fit its contents.
/// child: Container(
/// color: const Color(0xffee0000), // Red
/// height: 120.0,
/// alignment: Alignment.center,
/// child: const Text('Flexible Content'),
/// ),
/// ),
/// ],
/// ),
/// ),
/// ),
/// );
/// },
/// ),
/// );
/// }
/// ```
/// {@end-tool}
///

15
packages/flutter/lib/src/widgets/sliver_fill.dart
View file

@ -196,9 +196,7 @@ class _RenderSliverFractionalPadding extends RenderSliverEdgeInsetsPadding {
/// the amount of space that has been scrolled beforehand has not exceeded the
/// main axis extent of the viewport.
///
/// {@animation 250 500 https://flutter.github.io/assets-for-api-docs/assets/widgets/sliver_fill_remaining_sizes_child.mp4}
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// In this sample the [SliverFillRemaining] sizes its [child] to fill the
/// remaining extent of the viewport in both axes. The icon is centered in the
@ -234,9 +232,7 @@ class _RenderSliverFractionalPadding extends RenderSliverEdgeInsetsPadding {
/// [SliverFillRemaining] will defer to the size of its [child] if the
/// child's size exceeds the remaining space in the viewport.
///
/// {@animation 250 500 https://flutter.github.io/assets-for-api-docs/assets/widgets/sliver_fill_remaining_defers_to_child.mp4}
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// In this sample the [SliverFillRemaining] defers to the size of its [child]
/// because the child's extent exceeds that of the remaining extent of the
@ -278,9 +274,7 @@ class _RenderSliverFractionalPadding extends RenderSliverEdgeInsetsPadding {
/// [SliverFillRemaining] will defer to the size of its [child] if the
/// [precedingScrollExtent] exceeded the length of the viewport's main axis.
///
/// {@animation 250 500 https://flutter.github.io/assets-for-api-docs/assets/widgets/sliver_fill_remaining_scrolled_beyond.mp4}
///
/// {@tool sample --template=stateless_widget_scaffold}
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// In this sample the [SliverFillRemaining] defers to the size of its [child]
/// because the [precedingScrollExtent] of the [SliverConstraints] has gone
@ -336,6 +330,9 @@ class _RenderSliverFractionalPadding extends RenderSliverEdgeInsetsPadding {
/// button that is pinned to the bottom of the sliver, regardless of size or
/// overscroll behavior. Try switching [fillOverscroll] to see the difference.
///
/// This sample only shows the overscroll behavior on devices that support
/// overscroll.
///
/// ```dart
/// Widget build(BuildContext context) {
/// return CustomScrollView(

4
packages/flutter/lib/src/widgets/transitions.dart
View file

@ -194,7 +194,7 @@ class _AnimatedState extends State<AnimatedWidget> {
/// animated by a [CurvedAnimation] set to [Curves.elasticIn]:
/// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/slide_transition.mp4}
///
/// {@tool sample --template=stateful_widget_scaffold_center_freeform_state}
/// {@tool dartpad --template=stateful_widget_scaffold_center_freeform_state}
/// The following code implements the [SlideTransition] as seen in the video
/// above:
///
@ -583,7 +583,7 @@ class FadeTransition extends SingleChildRenderObjectWidget {
/// Animates the opacity of a sliver widget.
///
/// {@tool sample --template=stateful_widget_scaffold_center_freeform_state}
/// {@tool dartpad --template=stateful_widget_scaffold_center_freeform_state}
/// Creates a [CustomScrollView] with a [SliverFixedExtentList] that uses a
/// [SliverFadeTransition] to fade the list in and out.
///

2
packages/flutter/lib/src/widgets/tween_animation_builder.dart
View file

@ -59,7 +59,7 @@ import 'value_listenable_builder.dart';
///
/// ## Example Code
///
/// {@tool sample --template=stateful_widget_scaffold_center}
/// {@tool dartpad --template=stateful_widget_scaffold_center}
/// 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