Extract Sample code into examples/api (#87280)
This extracts the sample code out from the API doc comments, and places them in separate files on disk, allowing running of the examples locally, testing them, and building of slightly larger examples.
diff --git a/examples/api/lib/widgets/actions/action.action_overridable.0.dart b/examples/api/lib/widgets/actions/action.action_overridable.0.dart
new file mode 100644
index 0000000..0f35817
--- /dev/null
+++ b/examples/api/lib/widgets/actions/action.action_overridable.0.dart
@@ -0,0 +1,201 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Action.Action.overridable
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample implements a custom text input field that handles the
+// [DeleteTextIntent] 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+void main() {
+ runApp(
+ const MaterialApp(
+ home: Scaffold(
+ body: Center(child: SimpleUSPhoneNumberEntry()),
+ ),
+ ),
+ );
+}
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
+
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This implements a custom phone number input field that handles the
+// [DeleteTextIntent] intent.
+class DigitInput extends StatefulWidget {
+ const DigitInput({
+ Key? key,
+ required this.controller,
+ required this.focusNode,
+ this.maxLength,
+ this.textInputAction = TextInputAction.next,
+ }) : super(key: key);
+
+ final int? maxLength;
+ final TextEditingController controller;
+ final TextInputAction textInputAction;
+ final FocusNode focusNode;
+
+ @override
+ DigitInputState createState() => DigitInputState();
+}
+
+class DigitInputState extends State<DigitInput> {
+ late final Action<DeleteTextIntent> _deleteTextAction =
+ CallbackAction<DeleteTextIntent>(
+ onInvoke: (DeleteTextIntent intent) {
+ // For simplicity we delete everything in the section.
+ widget.controller.clear();
+ },
+ );
+
+ @override
+ Widget build(BuildContext context) {
+ return Actions(
+ actions: <Type, Action<Intent>>{
+ // Make the default `DeleteTextIntent` handler overridable.
+ DeleteTextIntent: Action<DeleteTextIntent>.overridable(
+ defaultAction: _deleteTextAction, context: context),
+ },
+ child: TextField(
+ controller: widget.controller,
+ textInputAction: TextInputAction.next,
+ keyboardType: TextInputType.phone,
+ focusNode: widget.focusNode,
+ decoration: const InputDecoration(
+ border: OutlineInputBorder(),
+ ),
+ inputFormatters: <TextInputFormatter>[
+ FilteringTextInputFormatter.digitsOnly,
+ LengthLimitingTextInputFormatter(widget.maxLength),
+ ],
+ ),
+ );
+ }
+}
+
+class SimpleUSPhoneNumberEntry extends StatefulWidget {
+ const SimpleUSPhoneNumberEntry({Key? key}) : super(key: key);
+
+ @override
+ State<SimpleUSPhoneNumberEntry> createState() =>
+ _SimpleUSPhoneNumberEntryState();
+}
+
+class _DeleteDigit extends Action<DeleteTextIntent> {
+ _DeleteDigit(this.state);
+
+ final _SimpleUSPhoneNumberEntryState state;
+ @override
+ Object? invoke(DeleteTextIntent intent) {
+ assert(callingAction != null);
+ callingAction?.invoke(intent);
+
+ if (state.lineNumberController.text.isEmpty &&
+ state.lineNumberFocusNode.hasFocus) {
+ state.prefixFocusNode.requestFocus();
+ }
+
+ if (state.prefixController.text.isEmpty && state.prefixFocusNode.hasFocus) {
+ state.areaCodeFocusNode.requestFocus();
+ }
+ }
+
+ // This action is only enabled when the `callingAction` exists and is
+ // enabled.
+ @override
+ bool get isActionEnabled => callingAction?.isActionEnabled ?? false;
+}
+
+class _SimpleUSPhoneNumberEntryState extends State<SimpleUSPhoneNumberEntry> {
+ final FocusNode areaCodeFocusNode = FocusNode();
+ final TextEditingController areaCodeController = TextEditingController();
+ final FocusNode prefixFocusNode = FocusNode();
+ final TextEditingController prefixController = TextEditingController();
+ final FocusNode lineNumberFocusNode = FocusNode();
+ final TextEditingController lineNumberController = TextEditingController();
+
+ @override
+ Widget build(BuildContext context) {
+ return Actions(
+ actions: <Type, Action<Intent>>{
+ DeleteTextIntent: _DeleteDigit(this),
+ },
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: <Widget>[
+ const Expanded(
+ child: Text(
+ '(',
+ textAlign: TextAlign.center,
+ ),
+ flex: 1),
+ Expanded(
+ child: DigitInput(
+ focusNode: areaCodeFocusNode,
+ controller: areaCodeController,
+ maxLength: 3),
+ flex: 3),
+ const Expanded(
+ child: Text(
+ ')',
+ textAlign: TextAlign.center,
+ ),
+ flex: 1),
+ Expanded(
+ child: DigitInput(
+ focusNode: prefixFocusNode,
+ controller: prefixController,
+ maxLength: 3),
+ flex: 3),
+ const Expanded(
+ child: Text(
+ '-',
+ textAlign: TextAlign.center,
+ ),
+ flex: 1),
+ Expanded(
+ child: DigitInput(
+ focusNode: lineNumberFocusNode,
+ controller: lineNumberController,
+ textInputAction: TextInputAction.done,
+ maxLength: 4),
+ flex: 4),
+ ],
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/actions/action_listener.0.dart b/examples/api/lib/widgets/actions/action_listener.0.dart
new file mode 100644
index 0000000..0a1a43b
--- /dev/null
+++ b/examples/api/lib/widgets/actions/action_listener.0.dart
@@ -0,0 +1,156 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for ActionListener
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows how ActionListener handles adding and removing of
+// the [listener] in the widget lifecycle.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class ActionListenerExample extends StatefulWidget {
+ const ActionListenerExample({Key? key}) : super(key: key);
+
+ @override
+ State<ActionListenerExample> createState() => _ActionListenerExampleState();
+}
+
+class _ActionListenerExampleState extends State<ActionListenerExample> {
+ bool _on = false;
+ late final MyAction _myAction;
+
+ @override
+ void initState() {
+ super.initState();
+ _myAction = MyAction();
+ }
+
+ void _toggleState() {
+ setState(() {
+ _on = !_on;
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Row(
+ crossAxisAlignment: CrossAxisAlignment.center,
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: OutlinedButton(
+ onPressed: _toggleState,
+ child: Text(_on ? 'Disable' : 'Enable'),
+ ),
+ ),
+ if (_on)
+ Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: ActionListener(
+ listener: (Action<Intent> action) {
+ if (action.intentType == MyIntent) {
+ ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
+ content: Text('Action Listener Called'),
+ ));
+ }
+ },
+ action: _myAction,
+ child: ElevatedButton(
+ onPressed: () => const ActionDispatcher()
+ .invokeAction(_myAction, const MyIntent()),
+ child: const Text('Call Action Listener'),
+ ),
+ ),
+ ),
+ if (!_on) Container(),
+ ],
+ );
+ }
+}
+
+class MyAction extends Action<MyIntent> {
+ @override
+ void addActionListener(ActionListenerCallback listener) {
+ super.addActionListener(listener);
+ print('Action Listener was added');
+ }
+
+ @override
+ void removeActionListener(ActionListenerCallback listener) {
+ super.removeActionListener(listener);
+ print('Action Listener was removed');
+ }
+
+ @override
+ void invoke(covariant MyIntent intent) {
+ notifyActionListeners();
+ }
+}
+
+class MyIntent extends Intent {
+ const MyIntent();
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ @override
+ Widget build(BuildContext context) {
+ return const ActionListenerExample();
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/actions/actions.0.dart b/examples/api/lib/widgets/actions/actions.0.dart
new file mode 100644
index 0000000..2a7c3a7
--- /dev/null
+++ b/examples/api/lib/widgets/actions/actions.0.dart
@@ -0,0 +1,219 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Actions
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// A simple model class that notifies listeners when it changes.
+class Model {
+ ValueNotifier<bool> isDirty = ValueNotifier<bool>(false);
+ ValueNotifier<int> data = ValueNotifier<int>(0);
+
+ int save() {
+ if (isDirty.value) {
+ print('Saved Data: ${data.value}');
+ isDirty.value = false;
+ }
+ return data.value;
+ }
+
+ void setValue(int newValue) {
+ isDirty.value = data.value != newValue;
+ data.value = newValue;
+ }
+}
+
+class ModifyIntent extends Intent {
+ const ModifyIntent(this.value);
+
+ final int value;
+}
+
+// An Action that modifies the model by setting it to the value that it gets
+// from the Intent passed to it when invoked.
+class ModifyAction extends Action<ModifyIntent> {
+ ModifyAction(this.model);
+
+ final Model model;
+
+ @override
+ void invoke(covariant ModifyIntent intent) {
+ model.setValue(intent.value);
+ }
+}
+
+// An intent for saving data.
+class SaveIntent extends Intent {
+ const SaveIntent();
+}
+
+// An Action that saves the data in the model it is created with.
+class SaveAction extends Action<SaveIntent> {
+ SaveAction(this.model);
+
+ final Model model;
+
+ @override
+ int invoke(covariant SaveIntent intent) => model.save();
+}
+
+class SaveButton extends StatefulWidget {
+ const SaveButton(this.valueNotifier, {Key? key}) : super(key: key);
+
+ final ValueNotifier<bool> valueNotifier;
+
+ @override
+ State<SaveButton> createState() => _SaveButtonState();
+}
+
+class _SaveButtonState extends State<SaveButton> {
+ int savedValue = 0;
+
+ @override
+ Widget build(BuildContext context) {
+ return AnimatedBuilder(
+ animation: widget.valueNotifier,
+ builder: (BuildContext context, Widget? child) {
+ return TextButton.icon(
+ icon: const Icon(Icons.save),
+ label: Text('$savedValue'),
+ style: ButtonStyle(
+ foregroundColor: MaterialStateProperty.all<Color>(
+ widget.valueNotifier.value ? Colors.red : Colors.green,
+ ),
+ ),
+ onPressed: () {
+ setState(() {
+ savedValue = Actions.invoke(context, const SaveIntent())! as int;
+ });
+ },
+ );
+ },
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Model model = Model();
+ int count = 0;
+
+ @override
+ Widget build(BuildContext context) {
+ return Actions(
+ actions: <Type, Action<Intent>>{
+ ModifyIntent: ModifyAction(model),
+ SaveIntent: SaveAction(model),
+ },
+ child: Builder(
+ builder: (BuildContext context) {
+ return Row(
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ children: <Widget>[
+ const Spacer(),
+ Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ IconButton(
+ icon: const Icon(Icons.exposure_plus_1),
+ onPressed: () {
+ Actions.invoke(context, ModifyIntent(++count));
+ },
+ ),
+ AnimatedBuilder(
+ animation: model.data,
+ builder: (BuildContext context, Widget? child) {
+ return Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: Text('${model.data.value}',
+ style: Theme.of(context).textTheme.headline4),
+ );
+ }),
+ IconButton(
+ icon: const Icon(Icons.exposure_minus_1),
+ onPressed: () {
+ Actions.invoke(context, ModifyIntent(--count));
+ },
+ ),
+ ],
+ ),
+ SaveButton(model.isDirty),
+ const Spacer(),
+ ],
+ );
+ },
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/actions/focusable_action_detector.0.dart b/examples/api/lib/widgets/actions/focusable_action_detector.0.dart
new file mode 100644
index 0000000..b650993
--- /dev/null
+++ b/examples/api/lib/widgets/actions/focusable_action_detector.0.dart
@@ -0,0 +1,194 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for FocusableActionDetector
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/services.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class FadButton extends StatefulWidget {
+ const FadButton({
+ Key? key,
+ required this.onPressed,
+ required this.child,
+ }) : super(key: key);
+
+ final VoidCallback onPressed;
+ final Widget child;
+
+ @override
+ State<FadButton> createState() => _FadButtonState();
+}
+
+class _FadButtonState extends State<FadButton> {
+ bool _focused = false;
+ bool _hovering = false;
+ bool _on = false;
+ late final Map<Type, Action<Intent>> _actionMap;
+ final Map<ShortcutActivator, Intent> _shortcutMap =
+ const <ShortcutActivator, Intent>{
+ SingleActivator(LogicalKeyboardKey.keyX): ActivateIntent(),
+ };
+
+ @override
+ void initState() {
+ super.initState();
+ _actionMap = <Type, Action<Intent>>{
+ ActivateIntent: CallbackAction<Intent>(
+ onInvoke: (Intent intent) => _toggleState(),
+ ),
+ };
+ }
+
+ Color get color {
+ Color baseColor = Colors.lightBlue;
+ if (_focused) {
+ baseColor = Color.alphaBlend(Colors.black.withOpacity(0.25), baseColor);
+ }
+ if (_hovering) {
+ baseColor = Color.alphaBlend(Colors.black.withOpacity(0.1), baseColor);
+ }
+ return baseColor;
+ }
+
+ void _toggleState() {
+ setState(() {
+ _on = !_on;
+ });
+ }
+
+ void _handleFocusHighlight(bool value) {
+ setState(() {
+ _focused = value;
+ });
+ }
+
+ void _handleHoveHighlight(bool value) {
+ setState(() {
+ _hovering = value;
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return GestureDetector(
+ onTap: _toggleState,
+ child: FocusableActionDetector(
+ actions: _actionMap,
+ shortcuts: _shortcutMap,
+ onShowFocusHighlight: _handleFocusHighlight,
+ onShowHoverHighlight: _handleHoveHighlight,
+ child: Row(
+ children: <Widget>[
+ Container(
+ padding: const EdgeInsets.all(10.0),
+ color: color,
+ child: widget.child,
+ ),
+ Container(
+ width: 30,
+ height: 30,
+ margin: const EdgeInsets.all(10.0),
+ color: _on ? Colors.red : Colors.transparent,
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('FocusableActionDetector Example'),
+ ),
+ body: Center(
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ Padding(
+ padding: const EdgeInsets.all(8.0),
+ child:
+ TextButton(onPressed: () {}, child: const Text('Press Me')),
+ ),
+ Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: FadButton(onPressed: () {}, child: const Text('And Me')),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/animated_list/animated_list.0.dart b/examples/api/lib/widgets/animated_list/animated_list.0.dart
new file mode 100644
index 0000000..6dcb51c
--- /dev/null
+++ b/examples/api/lib/widgets/animated_list/animated_list.0.dart
@@ -0,0 +1,243 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AnimatedList
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample application uses an [AnimatedList] to create an effect when
+// items are removed or added to the list.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+void main() {
+ runApp(const AnimatedListSample());
+}
+
+class AnimatedListSample extends StatefulWidget {
+ const AnimatedListSample({Key? key}) : super(key: key);
+
+ @override
+ State<AnimatedListSample> createState() => _AnimatedListSampleState();
+}
+
+class _AnimatedListSampleState extends State<AnimatedListSample> {
+ final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
+ late ListModel<int> _list;
+ int? _selectedItem;
+ late int
+ _nextItem; // The next item inserted when the user presses the '+' button.
+
+ @override
+ void initState() {
+ super.initState();
+ _list = ListModel<int>(
+ listKey: _listKey,
+ initialItems: <int>[0, 1, 2],
+ removedItemBuilder: _buildRemovedItem,
+ );
+ _nextItem = 3;
+ }
+
+ // Used to build list items that haven't been removed.
+ Widget _buildItem(
+ BuildContext context, int index, Animation<double> animation) {
+ return CardItem(
+ animation: animation,
+ item: _list[index],
+ selected: _selectedItem == _list[index],
+ onTap: () {
+ setState(() {
+ _selectedItem = _selectedItem == _list[index] ? null : _list[index];
+ });
+ },
+ );
+ }
+
+ // Used to build an item after it has been removed from the list. This
+ // method is needed because a removed item remains visible until its
+ // animation has completed (even though it's gone as far this ListModel is
+ // concerned). The widget will be used by the
+ // [AnimatedListState.removeItem] method's
+ // [AnimatedListRemovedItemBuilder] parameter.
+ Widget _buildRemovedItem(
+ int item, BuildContext context, Animation<double> animation) {
+ return CardItem(
+ animation: animation,
+ item: item,
+ selected: false,
+ // No gesture detector here: we don't want removed items to be interactive.
+ );
+ }
+
+ // Insert the "next item" into the list model.
+ void _insert() {
+ final int index =
+ _selectedItem == null ? _list.length : _list.indexOf(_selectedItem!);
+ _list.insert(index, _nextItem++);
+ }
+
+ // Remove the selected item from the list model.
+ void _remove() {
+ if (_selectedItem != null) {
+ _list.removeAt(_list.indexOf(_selectedItem!));
+ setState(() {
+ _selectedItem = null;
+ });
+ }
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: Scaffold(
+ appBar: AppBar(
+ title: const Text('AnimatedList'),
+ actions: <Widget>[
+ IconButton(
+ icon: const Icon(Icons.add_circle),
+ onPressed: _insert,
+ tooltip: 'insert a new item',
+ ),
+ IconButton(
+ icon: const Icon(Icons.remove_circle),
+ onPressed: _remove,
+ tooltip: 'remove the selected item',
+ ),
+ ],
+ ),
+ body: Padding(
+ padding: const EdgeInsets.all(16.0),
+ child: AnimatedList(
+ key: _listKey,
+ initialItemCount: _list.length,
+ itemBuilder: _buildItem,
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+typedef RemovedItemBuilder<T> = Widget Function(
+ T item, BuildContext context, Animation<double> animation);
+
+/// Keeps a Dart [List] in sync with an [AnimatedList].
+///
+/// The [insert] and [removeAt] methods apply to both the internal list and
+/// the animated list that belongs to [listKey].
+///
+/// This class only exposes as much of the Dart List API as is needed by the
+/// sample app. More list methods are easily added, however methods that
+/// mutate the list must make the same changes to the animated list in terms
+/// of [AnimatedListState.insertItem] and [AnimatedList.removeItem].
+class ListModel<E> {
+ ListModel({
+ required this.listKey,
+ required this.removedItemBuilder,
+ Iterable<E>? initialItems,
+ }) : _items = List<E>.from(initialItems ?? <E>[]);
+
+ final GlobalKey<AnimatedListState> listKey;
+ final RemovedItemBuilder<E> removedItemBuilder;
+ final List<E> _items;
+
+ AnimatedListState? get _animatedList => listKey.currentState;
+
+ void insert(int index, E item) {
+ _items.insert(index, item);
+ _animatedList!.insertItem(index);
+ }
+
+ E removeAt(int index) {
+ final E removedItem = _items.removeAt(index);
+ if (removedItem != null) {
+ _animatedList!.removeItem(
+ index,
+ (BuildContext context, Animation<double> animation) {
+ return removedItemBuilder(removedItem, context, animation);
+ },
+ );
+ }
+ return removedItem;
+ }
+
+ int get length => _items.length;
+
+ E operator [](int index) => _items[index];
+
+ int indexOf(E item) => _items.indexOf(item);
+}
+
+/// Displays its integer item as 'item N' on a Card whose color is based on
+/// the item's value.
+///
+/// The text is displayed in bright green if [selected] is
+/// true. This widget's height is based on the [animation] parameter, it
+/// varies from 0 to 128 as the animation varies from 0.0 to 1.0.
+class CardItem extends StatelessWidget {
+ const CardItem({
+ Key? key,
+ this.onTap,
+ this.selected = false,
+ required this.animation,
+ required this.item,
+ }) : assert(item >= 0),
+ super(key: key);
+
+ final Animation<double> animation;
+ final VoidCallback? onTap;
+ final int item;
+ final bool selected;
+
+ @override
+ Widget build(BuildContext context) {
+ TextStyle textStyle = Theme.of(context).textTheme.headline4!;
+ if (selected) {
+ textStyle = textStyle.copyWith(color: Colors.lightGreenAccent[400]);
+ }
+ return Padding(
+ padding: const EdgeInsets.all(2.0),
+ child: SizeTransition(
+ axis: Axis.vertical,
+ sizeFactor: animation,
+ child: GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTap: onTap,
+ child: SizedBox(
+ height: 80.0,
+ child: Card(
+ color: Colors.primaries[item % Colors.primaries.length],
+ child: Center(
+ child: Text('Item $item', style: textStyle),
+ ),
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/animated_list/sliver_animated_list.0.dart b/examples/api/lib/widgets/animated_list/sliver_animated_list.0.dart
new file mode 100644
index 0000000..1e809e6
--- /dev/null
+++ b/examples/api/lib/widgets/animated_list/sliver_animated_list.0.dart
@@ -0,0 +1,267 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SliverAnimatedList
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample application uses a [SliverAnimatedList] to create an animated
+// effect when items are removed or added to the list.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+void main() => runApp(const SliverAnimatedListSample());
+
+class SliverAnimatedListSample extends StatefulWidget {
+ const SliverAnimatedListSample({Key? key}) : super(key: key);
+
+ @override
+ State<SliverAnimatedListSample> createState() =>
+ _SliverAnimatedListSampleState();
+}
+
+class _SliverAnimatedListSampleState extends State<SliverAnimatedListSample> {
+ final GlobalKey<SliverAnimatedListState> _listKey =
+ GlobalKey<SliverAnimatedListState>();
+ final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
+ final GlobalKey<ScaffoldMessengerState> _scaffoldMessengerKey =
+ GlobalKey<ScaffoldMessengerState>();
+ late ListModel<int> _list;
+ int? _selectedItem;
+ late int
+ _nextItem; // The next item inserted when the user presses the '+' button.
+
+ @override
+ void initState() {
+ super.initState();
+ _list = ListModel<int>(
+ listKey: _listKey,
+ initialItems: <int>[0, 1, 2],
+ removedItemBuilder: _buildRemovedItem,
+ );
+ _nextItem = 3;
+ }
+
+ // Used to build list items that haven't been removed.
+ Widget _buildItem(
+ BuildContext context, int index, Animation<double> animation) {
+ return CardItem(
+ animation: animation,
+ item: _list[index],
+ selected: _selectedItem == _list[index],
+ onTap: () {
+ setState(() {
+ _selectedItem = _selectedItem == _list[index] ? null : _list[index];
+ });
+ },
+ );
+ }
+
+ // Used to build an item after it has been removed from the list. This
+ // method is needed because a removed item remains visible until its
+ // animation has completed (even though it's gone as far this ListModel is
+ // concerned). The widget will be used by the
+ // [AnimatedListState.removeItem] method's
+ // [AnimatedListRemovedItemBuilder] parameter.
+ Widget _buildRemovedItem(
+ int item, BuildContext context, Animation<double> animation) {
+ return CardItem(
+ animation: animation,
+ item: item,
+ selected: false,
+ );
+ }
+
+ // Insert the "next item" into the list model.
+ void _insert() {
+ final int index =
+ _selectedItem == null ? _list.length : _list.indexOf(_selectedItem!);
+ _list.insert(index, _nextItem++);
+ }
+
+ // Remove the selected item from the list model.
+ void _remove() {
+ if (_selectedItem != null) {
+ _list.removeAt(_list.indexOf(_selectedItem!));
+ setState(() {
+ _selectedItem = null;
+ });
+ } else {
+ _scaffoldMessengerKey.currentState!.showSnackBar(const SnackBar(
+ content: Text(
+ 'Select an item to remove from the list.',
+ style: TextStyle(fontSize: 20),
+ ),
+ ));
+ }
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ scaffoldMessengerKey: _scaffoldMessengerKey,
+ home: Scaffold(
+ key: _scaffoldKey,
+ body: CustomScrollView(
+ slivers: <Widget>[
+ SliverAppBar(
+ title: const Text(
+ 'SliverAnimatedList',
+ style: TextStyle(fontSize: 30),
+ ),
+ expandedHeight: 60,
+ centerTitle: true,
+ backgroundColor: Colors.amber[900],
+ leading: IconButton(
+ icon: const Icon(Icons.add_circle),
+ onPressed: _insert,
+ tooltip: 'Insert a new item.',
+ iconSize: 32,
+ ),
+ actions: <Widget>[
+ IconButton(
+ icon: const Icon(Icons.remove_circle),
+ onPressed: _remove,
+ tooltip: 'Remove the selected item.',
+ iconSize: 32,
+ ),
+ ],
+ ),
+ SliverAnimatedList(
+ key: _listKey,
+ initialItemCount: _list.length,
+ itemBuilder: _buildItem,
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+typedef RemovedItemBuilder = Widget Function(
+ int item, BuildContext context, Animation<double> animation);
+
+// Keeps a Dart [List] in sync with an [AnimatedList].
+//
+// The [insert] and [removeAt] methods apply to both the internal list and
+// the animated list that belongs to [listKey].
+//
+// This class only exposes as much of the Dart List API as is needed by the
+// sample app. More list methods are easily added, however methods that
+// mutate the list must make the same changes to the animated list in terms
+// of [AnimatedListState.insertItem] and [AnimatedList.removeItem].
+class ListModel<E> {
+ ListModel({
+ required this.listKey,
+ required this.removedItemBuilder,
+ Iterable<E>? initialItems,
+ }) : _items = List<E>.from(initialItems ?? <E>[]);
+
+ final GlobalKey<SliverAnimatedListState> listKey;
+ final RemovedItemBuilder removedItemBuilder;
+ final List<E> _items;
+
+ SliverAnimatedListState get _animatedList => listKey.currentState!;
+
+ void insert(int index, E item) {
+ _items.insert(index, item);
+ _animatedList.insertItem(index);
+ }
+
+ E removeAt(int index) {
+ final E removedItem = _items.removeAt(index);
+ if (removedItem != null) {
+ _animatedList.removeItem(
+ index,
+ (BuildContext context, Animation<double> animation) =>
+ removedItemBuilder(index, context, animation),
+ );
+ }
+ return removedItem;
+ }
+
+ int get length => _items.length;
+
+ E operator [](int index) => _items[index];
+
+ int indexOf(E item) => _items.indexOf(item);
+}
+
+// Displays its integer item as 'Item N' on a Card whose color is based on
+// the item's value.
+//
+// The card turns gray when [selected] is true. This widget's height
+// is based on the [animation] parameter. It varies as the animation value
+// transitions from 0.0 to 1.0.
+class CardItem extends StatelessWidget {
+ const CardItem({
+ Key? key,
+ this.onTap,
+ this.selected = false,
+ required this.animation,
+ required this.item,
+ }) : assert(item >= 0),
+ super(key: key);
+
+ final Animation<double> animation;
+ final VoidCallback? onTap;
+ final int item;
+ final bool selected;
+
+ @override
+ Widget build(BuildContext context) {
+ return Padding(
+ padding: const EdgeInsets.only(
+ left: 2.0,
+ right: 2.0,
+ top: 2.0,
+ bottom: 0.0,
+ ),
+ child: SizeTransition(
+ axis: Axis.vertical,
+ sizeFactor: animation,
+ child: GestureDetector(
+ onTap: onTap,
+ child: SizedBox(
+ height: 80.0,
+ child: Card(
+ color: selected
+ ? Colors.black12
+ : Colors.primaries[item % Colors.primaries.length],
+ child: Center(
+ child: Text(
+ 'Item $item',
+ style: Theme.of(context).textTheme.headline4,
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/animated_size/animated_size.0.dart b/examples/api/lib/widgets/animated_size/animated_size.0.dart
new file mode 100644
index 0000000..1512250
--- /dev/null
+++ b/examples/api/lib/widgets/animated_size/animated_size.0.dart
@@ -0,0 +1,85 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center_freeform_state.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AnimatedSize
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example makes a [Container] react to being touched, causing the child
+// of the [AnimatedSize] widget, here a [FlutterLogo], to animate.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+ double _size = 50.0;
+ bool _large = false;
+
+ void _updateSize() {
+ setState(() {
+ _size = _large ? 250.0 : 100.0;
+ _large = !_large;
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return GestureDetector(
+ onTap: () => _updateSize(),
+ child: Container(
+ color: Colors.amberAccent,
+ child: AnimatedSize(
+ curve: Curves.easeIn,
+ duration: const Duration(seconds: 1),
+ child: FlutterLogo(size: _size),
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/animated_switcher/animated_switcher.0.dart b/examples/api/lib/widgets/animated_switcher/animated_switcher.0.dart
new file mode 100644
index 0000000..15622a4
--- /dev/null
+++ b/examples/api/lib/widgets/animated_switcher/animated_switcher.0.dart
@@ -0,0 +1,92 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AnimatedSwitcher
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample shows a counter that animates the scale of a text widget
+// whenever the value changes.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ int _count = 0;
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ color: Colors.white,
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ AnimatedSwitcher(
+ duration: const Duration(milliseconds: 500),
+ transitionBuilder: (Widget child, Animation<double> animation) {
+ return ScaleTransition(child: child, scale: animation);
+ },
+ child: Text(
+ '$_count',
+ // This key causes the AnimatedSwitcher to interpret this as a "new"
+ // child each time the count changes, so that it will begin its animation
+ // when the count changes.
+ key: ValueKey<int>(_count),
+ style: Theme.of(context).textTheme.headline4,
+ ),
+ ),
+ ElevatedButton(
+ child: const Text('Increment'),
+ onPressed: () {
+ setState(() {
+ _count += 1;
+ });
+ },
+ ),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/async/future_builder.0.dart b/examples/api/lib/widgets/async/future_builder.0.dart
new file mode 100644
index 0000000..8d684d6
--- /dev/null
+++ b/examples/api/lib/widgets/async/future_builder.0.dart
@@ -0,0 +1,122 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for FutureBuilder
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ final Future<String> _calculation = Future<String>.delayed(
+ const Duration(seconds: 2),
+ () => 'Data Loaded',
+ );
+
+ @override
+ Widget build(BuildContext context) {
+ 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>[
+ const 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>[
+ const Icon(
+ Icons.error_outline,
+ color: Colors.red,
+ size: 60,
+ ),
+ Padding(
+ padding: const EdgeInsets.only(top: 16),
+ child: Text('Error: ${snapshot.error}'),
+ )
+ ];
+ } else {
+ children = const <Widget>[
+ SizedBox(
+ child: CircularProgressIndicator(),
+ width: 60,
+ height: 60,
+ ),
+ Padding(
+ padding: EdgeInsets.only(top: 16),
+ child: Text('Awaiting result...'),
+ )
+ ];
+ }
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ crossAxisAlignment: CrossAxisAlignment.center,
+ children: children,
+ ),
+ );
+ },
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/async/stream_builder.0.dart b/examples/api/lib/widgets/async/stream_builder.0.dart
new file mode 100644
index 0000000..b25bdc9
--- /dev/null
+++ b/examples/api/lib/widgets/async/stream_builder.0.dart
@@ -0,0 +1,161 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for StreamBuilder
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ final Stream<int> _bids = (() async* {
+ await Future<void>.delayed(const Duration(seconds: 1));
+ yield 1;
+ await Future<void>.delayed(const Duration(seconds: 1));
+ })();
+
+ @override
+ Widget build(BuildContext context) {
+ 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>[
+ const Icon(
+ Icons.error_outline,
+ color: Colors.red,
+ size: 60,
+ ),
+ Padding(
+ padding: const EdgeInsets.only(top: 16),
+ child: Text('Error: ${snapshot.error}'),
+ ),
+ Padding(
+ padding: const EdgeInsets.only(top: 8),
+ child: Text('Stack trace: ${snapshot.stackTrace}'),
+ ),
+ ];
+ } else {
+ switch (snapshot.connectionState) {
+ case ConnectionState.none:
+ children = const <Widget>[
+ Icon(
+ Icons.info,
+ color: Colors.blue,
+ size: 60,
+ ),
+ Padding(
+ padding: EdgeInsets.only(top: 16),
+ child: Text('Select a lot'),
+ )
+ ];
+ break;
+ case ConnectionState.waiting:
+ children = const <Widget>[
+ SizedBox(
+ child: CircularProgressIndicator(),
+ width: 60,
+ height: 60,
+ ),
+ Padding(
+ padding: EdgeInsets.only(top: 16),
+ child: Text('Awaiting bids...'),
+ )
+ ];
+ break;
+ case ConnectionState.active:
+ children = <Widget>[
+ const 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>[
+ const 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,
+ );
+ },
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/autocomplete/raw_autocomplete.0.dart b/examples/api/lib/widgets/autocomplete/raw_autocomplete.0.dart
new file mode 100644
index 0000000..1c8b315
--- /dev/null
+++ b/examples/api/lib/widgets/autocomplete/raw_autocomplete.0.dart
@@ -0,0 +1,108 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for RawAutocomplete
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows how to create a very basic autocomplete widget using the
+// [fieldViewBuilder] and [optionsViewBuilder] parameters.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+void main() => runApp(const AutocompleteExampleApp());
+
+class AutocompleteExampleApp extends StatelessWidget {
+ const AutocompleteExampleApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: Scaffold(
+ appBar: AppBar(
+ title: const Text('RawAutocomplete Basic'),
+ ),
+ body: const Center(
+ child: AutocompleteBasicExample(),
+ ),
+ ),
+ );
+ }
+}
+
+class AutocompleteBasicExample extends StatelessWidget {
+ const AutocompleteBasicExample({Key? key}) : super(key: key);
+
+ static const List<String> _options = <String>[
+ 'aardvark',
+ 'bobcat',
+ 'chameleon',
+ ];
+
+ @override
+ Widget build(BuildContext context) {
+ return RawAutocomplete<String>(
+ optionsBuilder: (TextEditingValue textEditingValue) {
+ return _options.where((String option) {
+ return option.contains(textEditingValue.text.toLowerCase());
+ });
+ },
+ fieldViewBuilder: (BuildContext context,
+ TextEditingController textEditingController,
+ FocusNode focusNode,
+ VoidCallback onFieldSubmitted) {
+ return TextFormField(
+ controller: textEditingController,
+ focusNode: focusNode,
+ onFieldSubmitted: (String value) {
+ onFieldSubmitted();
+ },
+ );
+ },
+ optionsViewBuilder: (BuildContext context,
+ AutocompleteOnSelected<String> onSelected, Iterable<String> options) {
+ return Align(
+ alignment: Alignment.topLeft,
+ child: Material(
+ elevation: 4.0,
+ child: SizedBox(
+ height: 200.0,
+ child: ListView.builder(
+ padding: const EdgeInsets.all(8.0),
+ itemCount: options.length,
+ itemBuilder: (BuildContext context, int index) {
+ final String option = options.elementAt(index);
+ return GestureDetector(
+ onTap: () {
+ onSelected(option);
+ },
+ child: ListTile(
+ title: Text(option),
+ ),
+ );
+ },
+ ),
+ ),
+ ),
+ );
+ },
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
diff --git a/examples/api/lib/widgets/autocomplete/raw_autocomplete.1.dart b/examples/api/lib/widgets/autocomplete/raw_autocomplete.1.dart
new file mode 100644
index 0000000..2a16259
--- /dev/null
+++ b/examples/api/lib/widgets/autocomplete/raw_autocomplete.1.dart
@@ -0,0 +1,143 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for RawAutocomplete
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example is similar to the previous example, but it uses a custom T data
+// type instead of directly using String.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+void main() => runApp(const AutocompleteExampleApp());
+
+class AutocompleteExampleApp extends StatelessWidget {
+ const AutocompleteExampleApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: Scaffold(
+ appBar: AppBar(
+ title: const Text('RawAutocomplete Custom Type'),
+ ),
+ body: const Center(
+ child: AutocompleteCustomTypeExample(),
+ ),
+ ),
+ );
+ }
+}
+
+// An example of a type that someone might want to autocomplete a list of.
+@immutable
+class User {
+ const User({
+ required this.email,
+ required this.name,
+ });
+
+ final String email;
+ final String name;
+
+ @override
+ String toString() {
+ return '$name, $email';
+ }
+
+ @override
+ bool operator ==(Object other) {
+ if (other.runtimeType != runtimeType) {
+ return false;
+ }
+ return other is User && other.name == name && other.email == email;
+ }
+
+ @override
+ int get hashCode => hashValues(email, name);
+}
+
+class AutocompleteCustomTypeExample extends StatelessWidget {
+ const AutocompleteCustomTypeExample({Key? key}) : super(key: key);
+
+ static const List<User> _userOptions = <User>[
+ User(name: 'Alice', email: 'alice@example.com'),
+ User(name: 'Bob', email: 'bob@example.com'),
+ User(name: 'Charlie', email: 'charlie123@gmail.com'),
+ ];
+
+ static String _displayStringForOption(User option) => option.name;
+
+ @override
+ Widget build(BuildContext context) {
+ return RawAutocomplete<User>(
+ optionsBuilder: (TextEditingValue textEditingValue) {
+ return _userOptions.where((User option) {
+ // Search based on User.toString, which includes both name and
+ // email, even though the display string is just the name.
+ return option
+ .toString()
+ .contains(textEditingValue.text.toLowerCase());
+ });
+ },
+ displayStringForOption: _displayStringForOption,
+ fieldViewBuilder: (BuildContext context,
+ TextEditingController textEditingController,
+ FocusNode focusNode,
+ VoidCallback onFieldSubmitted) {
+ return TextFormField(
+ controller: textEditingController,
+ focusNode: focusNode,
+ onFieldSubmitted: (String value) {
+ onFieldSubmitted();
+ },
+ );
+ },
+ optionsViewBuilder: (BuildContext context,
+ AutocompleteOnSelected<User> onSelected, Iterable<User> options) {
+ return Align(
+ alignment: Alignment.topLeft,
+ child: Material(
+ elevation: 4.0,
+ child: SizedBox(
+ height: 200.0,
+ child: ListView.builder(
+ padding: const EdgeInsets.all(8.0),
+ itemCount: options.length,
+ itemBuilder: (BuildContext context, int index) {
+ final User option = options.elementAt(index);
+ return GestureDetector(
+ onTap: () {
+ onSelected(option);
+ },
+ child: ListTile(
+ title: Text(_displayStringForOption(option)),
+ ),
+ );
+ },
+ ),
+ ),
+ ),
+ );
+ },
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
diff --git a/examples/api/lib/widgets/autocomplete/raw_autocomplete.2.dart b/examples/api/lib/widgets/autocomplete/raw_autocomplete.2.dart
new file mode 100644
index 0000000..253e616
--- /dev/null
+++ b/examples/api/lib/widgets/autocomplete/raw_autocomplete.2.dart
@@ -0,0 +1,212 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for RawAutocomplete
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows the use of RawAutocomplete in a form.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+void main() => runApp(const AutocompleteExampleApp());
+
+class AutocompleteExampleApp extends StatelessWidget {
+ const AutocompleteExampleApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: Scaffold(
+ appBar: AppBar(
+ title: const Text('RawAutocomplete Form'),
+ ),
+ body: const Center(
+ child: AutocompleteFormExample(),
+ ),
+ ),
+ );
+ }
+}
+
+class AutocompleteFormExample extends StatefulWidget {
+ const AutocompleteFormExample({Key? key}) : super(key: key);
+
+ @override
+ AutocompleteFormExampleState createState() => AutocompleteFormExampleState();
+}
+
+class AutocompleteFormExampleState extends State<AutocompleteFormExample> {
+ final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
+ final TextEditingController _textEditingController = TextEditingController();
+ String? _dropdownValue;
+ String? _autocompleteSelection;
+
+ static const List<String> _options = <String>[
+ 'aardvark',
+ 'bobcat',
+ 'chameleon',
+ ];
+
+ @override
+ Widget build(BuildContext context) {
+ return Form(
+ key: _formKey,
+ child: Column(
+ children: <Widget>[
+ DropdownButtonFormField<String>(
+ value: _dropdownValue,
+ icon: const Icon(Icons.arrow_downward),
+ hint: const Text('This is a regular DropdownButtonFormField'),
+ iconSize: 24,
+ elevation: 16,
+ style: const TextStyle(color: Colors.deepPurple),
+ onChanged: (String? newValue) {
+ setState(() {
+ _dropdownValue = newValue;
+ });
+ },
+ items: <String>['One', 'Two', 'Free', 'Four']
+ .map<DropdownMenuItem<String>>((String value) {
+ return DropdownMenuItem<String>(
+ value: value,
+ child: Text(value),
+ );
+ }).toList(),
+ validator: (String? value) {
+ if (value == null) {
+ return 'Must make a selection.';
+ }
+ return null;
+ },
+ ),
+ TextFormField(
+ controller: _textEditingController,
+ decoration: const InputDecoration(
+ hintText: 'This is a regular TextFormField',
+ ),
+ validator: (String? value) {
+ if (value == null || value.isEmpty) {
+ return "Can't be empty.";
+ }
+ return null;
+ },
+ ),
+ RawAutocomplete<String>(
+ optionsBuilder: (TextEditingValue textEditingValue) {
+ return _options.where((String option) {
+ return option.contains(textEditingValue.text.toLowerCase());
+ });
+ },
+ onSelected: (String selection) {
+ setState(() {
+ _autocompleteSelection = selection;
+ });
+ },
+ fieldViewBuilder: (BuildContext context,
+ TextEditingController textEditingController,
+ FocusNode focusNode,
+ VoidCallback onFieldSubmitted) {
+ return TextFormField(
+ controller: textEditingController,
+ decoration: const InputDecoration(
+ hintText: 'This is a RawAutocomplete!',
+ ),
+ focusNode: focusNode,
+ onFieldSubmitted: (String value) {
+ onFieldSubmitted();
+ },
+ validator: (String? value) {
+ if (!_options.contains(value)) {
+ return 'Nothing selected.';
+ }
+ return null;
+ },
+ );
+ },
+ optionsViewBuilder: (BuildContext context,
+ AutocompleteOnSelected<String> onSelected,
+ Iterable<String> options) {
+ return Align(
+ alignment: Alignment.topLeft,
+ child: Material(
+ elevation: 4.0,
+ child: SizedBox(
+ height: 200.0,
+ child: ListView.builder(
+ padding: const EdgeInsets.all(8.0),
+ itemCount: options.length,
+ itemBuilder: (BuildContext context, int index) {
+ final String option = options.elementAt(index);
+ return GestureDetector(
+ onTap: () {
+ onSelected(option);
+ },
+ child: ListTile(
+ title: Text(option),
+ ),
+ );
+ },
+ ),
+ ),
+ ),
+ );
+ },
+ ),
+ ElevatedButton(
+ onPressed: () {
+ FocusScope.of(context).unfocus();
+ if (!_formKey.currentState!.validate()) {
+ return;
+ }
+ showDialog<void>(
+ context: context,
+ builder: (BuildContext context) {
+ return AlertDialog(
+ title: const Text('Successfully submitted'),
+ content: SingleChildScrollView(
+ child: ListBody(
+ children: <Widget>[
+ Text('DropdownButtonFormField: "$_dropdownValue"'),
+ Text(
+ 'TextFormField: "${_textEditingController.text}"'),
+ Text('RawAutocomplete: "$_autocompleteSelection"'),
+ ],
+ ),
+ ),
+ actions: <Widget>[
+ TextButton(
+ child: const Text('Ok'),
+ onPressed: () {
+ Navigator.of(context).pop();
+ },
+ ),
+ ],
+ );
+ },
+ );
+ },
+ child: const Text('Submit'),
+ ),
+ ],
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
diff --git a/examples/api/lib/widgets/autocomplete/raw_autocomplete.focus_node.0.dart b/examples/api/lib/widgets/autocomplete/raw_autocomplete.focus_node.0.dart
new file mode 100644
index 0000000..42b800e
--- /dev/null
+++ b/examples/api/lib/widgets/autocomplete/raw_autocomplete.focus_node.0.dart
@@ -0,0 +1,111 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for RawAutocomplete.focusNode
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This examples shows how to create an autocomplete widget with the text
+// field in the AppBar and the results in the main body of the app.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+void main() => runApp(const AutocompleteExampleApp());
+
+class AutocompleteExampleApp extends StatelessWidget {
+ const AutocompleteExampleApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ home: RawAutocompleteSplit(),
+ );
+ }
+}
+
+const List<String> _options = <String>[
+ 'aardvark',
+ 'bobcat',
+ 'chameleon',
+];
+
+class RawAutocompleteSplit extends StatefulWidget {
+ const RawAutocompleteSplit({Key? key}) : super(key: key);
+
+ @override
+ RawAutocompleteSplitState createState() => RawAutocompleteSplitState();
+}
+
+class RawAutocompleteSplitState extends State<RawAutocompleteSplit> {
+ final TextEditingController _textEditingController = TextEditingController();
+ final FocusNode _focusNode = FocusNode();
+ final GlobalKey _autocompleteKey = GlobalKey();
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ // This is where the real field is being built.
+ title: TextFormField(
+ controller: _textEditingController,
+ focusNode: _focusNode,
+ decoration: const InputDecoration(
+ hintText: 'Split RawAutocomplete App',
+ ),
+ onFieldSubmitted: (String value) {
+ RawAutocomplete.onFieldSubmitted<String>(_autocompleteKey);
+ },
+ ),
+ ),
+ body: Align(
+ alignment: Alignment.topLeft,
+ child: RawAutocomplete<String>(
+ key: _autocompleteKey,
+ focusNode: _focusNode,
+ textEditingController: _textEditingController,
+ optionsBuilder: (TextEditingValue textEditingValue) {
+ return _options.where((String option) {
+ return option.contains(textEditingValue.text.toLowerCase());
+ }).toList();
+ },
+ optionsViewBuilder: (BuildContext context,
+ AutocompleteOnSelected<String> onSelected,
+ Iterable<String> options) {
+ return Material(
+ elevation: 4.0,
+ child: ListView(
+ children: options
+ .map((String option) => GestureDetector(
+ onTap: () {
+ onSelected(option);
+ },
+ child: ListTile(
+ title: Text(option),
+ ),
+ ))
+ .toList(),
+ ),
+ );
+ },
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
diff --git a/examples/api/lib/widgets/autofill/autofill_group.0.dart b/examples/api/lib/widgets/autofill/autofill_group.0.dart
new file mode 100644
index 0000000..ef41276
--- /dev/null
+++ b/examples/api/lib/widgets/autofill/autofill_group.0.dart
@@ -0,0 +1,152 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AutofillGroup
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// An example form with autofillable fields grouped into different
+// `AutofillGroup`s.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatefulWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ bool isSameAddress = true;
+ final TextEditingController shippingAddress1 = TextEditingController();
+ final TextEditingController shippingAddress2 = TextEditingController();
+ final TextEditingController billingAddress1 = TextEditingController();
+ final TextEditingController billingAddress2 = TextEditingController();
+
+ final TextEditingController creditCardNumber = TextEditingController();
+ final TextEditingController creditCardSecurityCode = TextEditingController();
+
+ final TextEditingController phoneNumber = TextEditingController();
+
+ @override
+ Widget build(BuildContext context) {
+ return ListView(
+ children: <Widget>[
+ const Text('Shipping address'),
+ // The address fields are grouped together as some platforms are
+ // capable of autofilling all of these fields in one go.
+ AutofillGroup(
+ child: Column(
+ children: <Widget>[
+ TextField(
+ controller: shippingAddress1,
+ autofillHints: const <String>[AutofillHints.streetAddressLine1],
+ ),
+ TextField(
+ controller: shippingAddress2,
+ autofillHints: const <String>[AutofillHints.streetAddressLine2],
+ ),
+ ],
+ ),
+ ),
+ const Text('Billing address'),
+ Checkbox(
+ value: isSameAddress,
+ onChanged: (bool? newValue) {
+ if (newValue != null) {
+ setState(() {
+ isSameAddress = newValue;
+ });
+ }
+ },
+ ),
+ // Again the address fields are grouped together for the same reason.
+ if (!isSameAddress)
+ AutofillGroup(
+ child: Column(
+ children: <Widget>[
+ TextField(
+ controller: billingAddress1,
+ autofillHints: const <String>[
+ AutofillHints.streetAddressLine1
+ ],
+ ),
+ TextField(
+ controller: billingAddress2,
+ autofillHints: const <String>[
+ AutofillHints.streetAddressLine2
+ ],
+ ),
+ ],
+ ),
+ ),
+ const Text('Credit Card Information'),
+ // The credit card number and the security code are grouped together
+ // as some platforms are capable of autofilling both fields.
+ AutofillGroup(
+ child: Column(
+ children: <Widget>[
+ TextField(
+ controller: creditCardNumber,
+ autofillHints: const <String>[AutofillHints.creditCardNumber],
+ ),
+ TextField(
+ controller: creditCardSecurityCode,
+ autofillHints: const <String>[
+ AutofillHints.creditCardSecurityCode
+ ],
+ ),
+ ],
+ ),
+ ),
+ const Text('Contact Phone Number'),
+ // The phone number field can still be autofilled despite lacking an
+ // `AutofillScope`.
+ TextField(
+ controller: phoneNumber,
+ autofillHints: const <String>[AutofillHints.telephoneNumber],
+ ),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/absorb_pointer.0.dart b/examples/api/lib/widgets/basic/absorb_pointer.0.dart
new file mode 100644
index 0000000..a5f5960
--- /dev/null
+++ b/examples/api/lib/widgets/basic/absorb_pointer.0.dart
@@ -0,0 +1,87 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AbsorbPointer
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatelessWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Stack(
+ alignment: AlignmentDirectional.center,
+ children: <Widget>[
+ SizedBox(
+ width: 200.0,
+ height: 100.0,
+ child: ElevatedButton(
+ onPressed: () {},
+ child: null,
+ ),
+ ),
+ SizedBox(
+ width: 100.0,
+ height: 200.0,
+ child: AbsorbPointer(
+ absorbing: true,
+ child: ElevatedButton(
+ style: ElevatedButton.styleFrom(
+ primary: Colors.blue.shade200,
+ ),
+ onPressed: () {},
+ child: null,
+ ),
+ ),
+ ),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/aspect_ratio.0.dart b/examples/api/lib/widgets/basic/aspect_ratio.0.dart
new file mode 100644
index 0000000..81f928c
--- /dev/null
+++ b/examples/api/lib/widgets/basic/aspect_ratio.0.dart
@@ -0,0 +1,73 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AspectRatio
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Container(
+ color: Colors.blue,
+ alignment: Alignment.center,
+ width: double.infinity,
+ height: 100.0,
+ child: AspectRatio(
+ aspectRatio: 16 / 9,
+ child: Container(
+ color: Colors.green,
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/aspect_ratio.1.dart b/examples/api/lib/widgets/basic/aspect_ratio.1.dart
new file mode 100644
index 0000000..e114038
--- /dev/null
+++ b/examples/api/lib/widgets/basic/aspect_ratio.1.dart
@@ -0,0 +1,70 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AspectRatio
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+//
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Container(
+ color: Colors.blue,
+ alignment: Alignment.center,
+ width: 100.0,
+ height: 100.0,
+ child: AspectRatio(
+ aspectRatio: 2.0,
+ child: Container(
+ width: 100.0,
+ height: 50.0,
+ color: Colors.green,
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/aspect_ratio.2.dart b/examples/api/lib/widgets/basic/aspect_ratio.2.dart
new file mode 100644
index 0000000..a43cf5d
--- /dev/null
+++ b/examples/api/lib/widgets/basic/aspect_ratio.2.dart
@@ -0,0 +1,70 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AspectRatio
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+//
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Container(
+ color: Colors.blue,
+ alignment: Alignment.center,
+ width: 100.0,
+ height: 100.0,
+ child: AspectRatio(
+ aspectRatio: 0.5,
+ child: Container(
+ width: 100.0,
+ height: 50.0,
+ color: Colors.green,
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/expanded.0.dart b/examples/api/lib/widgets/basic/expanded.0.dart
new file mode 100644
index 0000000..214dd80
--- /dev/null
+++ b/examples/api/lib/widgets/basic/expanded.0.dart
@@ -0,0 +1,83 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Expanded
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+//
+// 
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('Expanded Column Sample'),
+ ),
+ body: Center(
+ child: Column(
+ children: <Widget>[
+ Container(
+ color: Colors.blue,
+ height: 100,
+ width: 100,
+ ),
+ Expanded(
+ child: Container(
+ color: Colors.amber,
+ width: 100,
+ ),
+ ),
+ Container(
+ color: Colors.blue,
+ height: 100,
+ width: 100,
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/expanded.1.dart b/examples/api/lib/widgets/basic/expanded.1.dart
new file mode 100644
index 0000000..dd705fe
--- /dev/null
+++ b/examples/api/lib/widgets/basic/expanded.1.dart
@@ -0,0 +1,86 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Expanded
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows how to use an [Expanded] widget in a [Row] with multiple
+// children expanded, utilizing the [flex] factor to prioritize available space.
+//
+// 
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('Expanded Row Sample'),
+ ),
+ body: Center(
+ child: Row(
+ children: <Widget>[
+ Expanded(
+ flex: 2,
+ child: Container(
+ color: Colors.amber,
+ height: 100,
+ ),
+ ),
+ Container(
+ color: Colors.blue,
+ height: 100,
+ width: 50,
+ ),
+ Expanded(
+ flex: 1,
+ child: Container(
+ color: Colors.amber,
+ height: 100,
+ ),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/fitted_box.0.dart b/examples/api/lib/widgets/basic/fitted_box.0.dart
new file mode 100644
index 0000000..262a695
--- /dev/null
+++ b/examples/api/lib/widgets/basic/fitted_box.0.dart
@@ -0,0 +1,69 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for FittedBox
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// In this example, the image is stretched to fill the entire [Container], which would
+// not happen normally without using FittedBox.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatelessWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Container(
+ height: 400,
+ width: 300,
+ color: Colors.red,
+ child: FittedBox(
+ child: Image.network(
+ 'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
+ fit: BoxFit.fill,
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/flow.0.dart b/examples/api/lib/widgets/basic/flow.0.dart
new file mode 100644
index 0000000..6c1c12e
--- /dev/null
+++ b/examples/api/lib/widgets/basic/flow.0.dart
@@ -0,0 +1,143 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Flow
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const FlowApp());
+
+class FlowApp extends StatelessWidget {
+ const FlowApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: Scaffold(
+ appBar: AppBar(
+ title: const Text('Flow Example'),
+ ),
+ body: const FlowMenu(),
+ ),
+ );
+ }
+}
+
+class FlowMenu extends StatefulWidget {
+ const FlowMenu({Key? key}) : super(key: key);
+
+ @override
+ State<FlowMenu> createState() => _FlowMenuState();
+}
+
+class _FlowMenuState extends State<FlowMenu>
+ with SingleTickerProviderStateMixin {
+ late AnimationController menuAnimation;
+ IconData lastTapped = Icons.notifications;
+ final List<IconData> menuItems = <IconData>[
+ Icons.home,
+ Icons.new_releases,
+ Icons.notifications,
+ Icons.settings,
+ Icons.menu,
+ ];
+
+ void _updateMenu(IconData icon) {
+ if (icon != Icons.menu) {
+ setState(() => lastTapped = icon);
+ }
+ }
+
+ @override
+ void initState() {
+ super.initState();
+ menuAnimation = AnimationController(
+ duration: const Duration(milliseconds: 250),
+ vsync: this,
+ );
+ }
+
+ Widget flowMenuItem(IconData icon) {
+ final double buttonDiameter =
+ MediaQuery.of(context).size.width / menuItems.length;
+ return Padding(
+ padding: const EdgeInsets.symmetric(vertical: 8.0),
+ child: RawMaterialButton(
+ fillColor: lastTapped == icon ? Colors.amber[700] : Colors.blue,
+ splashColor: Colors.amber[100],
+ shape: const CircleBorder(),
+ constraints: BoxConstraints.tight(Size(buttonDiameter, buttonDiameter)),
+ onPressed: () {
+ _updateMenu(icon);
+ menuAnimation.status == AnimationStatus.completed
+ ? menuAnimation.reverse()
+ : menuAnimation.forward();
+ },
+ child: Icon(
+ icon,
+ color: Colors.white,
+ size: 45.0,
+ ),
+ ),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Flow(
+ delegate: FlowMenuDelegate(menuAnimation: menuAnimation),
+ children:
+ menuItems.map<Widget>((IconData icon) => flowMenuItem(icon)).toList(),
+ );
+ }
+}
+
+class FlowMenuDelegate extends FlowDelegate {
+ FlowMenuDelegate({required this.menuAnimation})
+ : super(repaint: menuAnimation);
+
+ final Animation<double> menuAnimation;
+
+ @override
+ bool shouldRepaint(FlowMenuDelegate oldDelegate) {
+ return menuAnimation != oldDelegate.menuAnimation;
+ }
+
+ @override
+ void paintChildren(FlowPaintingContext context) {
+ double dx = 0.0;
+ for (int i = 0; i < context.childCount; ++i) {
+ dx = context.getChildSize(i)!.width * i;
+ context.paintChild(
+ i,
+ transform: Matrix4.translationValues(
+ dx * menuAnimation.value,
+ 0,
+ 0,
+ ),
+ );
+ }
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
diff --git a/examples/api/lib/widgets/basic/fractionally_sized_box.0.dart b/examples/api/lib/widgets/basic/fractionally_sized_box.0.dart
new file mode 100644
index 0000000..2bf6b55
--- /dev/null
+++ b/examples/api/lib/widgets/basic/fractionally_sized_box.0.dart
@@ -0,0 +1,73 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for FractionallySizedBox
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return SizedBox.expand(
+ child: FractionallySizedBox(
+ widthFactor: 0.5,
+ heightFactor: 0.5,
+ alignment: FractionalOffset.center,
+ child: DecoratedBox(
+ decoration: BoxDecoration(
+ border: Border.all(
+ color: Colors.blue,
+ width: 4,
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/ignore_pointer.0.dart b/examples/api/lib/widgets/basic/ignore_pointer.0.dart
new file mode 100644
index 0000000..d1ede6c
--- /dev/null
+++ b/examples/api/lib/widgets/basic/ignore_pointer.0.dart
@@ -0,0 +1,98 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for IgnorePointer
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ bool ignoring = false;
+ void setIgnoring(bool newValue) {
+ setState(() {
+ ignoring = newValue;
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ centerTitle: true,
+ title: ElevatedButton(
+ onPressed: () {
+ setIgnoring(!ignoring);
+ },
+ child: Text(
+ ignoring ? 'Set ignoring to false' : 'Set ignoring to true',
+ ),
+ ),
+ ),
+ body: Center(
+ child: IgnorePointer(
+ ignoring: ignoring,
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ children: <Widget>[
+ Text('Ignoring: $ignoring'),
+ ElevatedButton(
+ onPressed: () {},
+ child: const Text('Click me!'),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/listener.0.dart b/examples/api/lib/widgets/basic/listener.0.dart
new file mode 100644
index 0000000..99282bd
--- /dev/null
+++ b/examples/api/lib/widgets/basic/listener.0.dart
@@ -0,0 +1,123 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Listener
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example makes a [Container] react to being touched, showing a count of
+// the number of pointer downs and ups.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/widgets.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ int _downCounter = 0;
+ int _upCounter = 0;
+ double x = 0.0;
+ double y = 0.0;
+
+ void _incrementDown(PointerEvent details) {
+ _updateLocation(details);
+ setState(() {
+ _downCounter++;
+ });
+ }
+
+ void _incrementUp(PointerEvent details) {
+ _updateLocation(details);
+ setState(() {
+ _upCounter++;
+ });
+ }
+
+ void _updateLocation(PointerEvent details) {
+ setState(() {
+ x = details.position.dx;
+ y = details.position.dy;
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return ConstrainedBox(
+ constraints: BoxConstraints.tight(const Size(300.0, 200.0)),
+ child: Listener(
+ onPointerDown: _incrementDown,
+ onPointerMove: _updateLocation,
+ onPointerUp: _incrementUp,
+ child: Container(
+ color: Colors.lightBlueAccent,
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ const Text(
+ 'You have pressed or released in this area this many times:'),
+ Text(
+ '$_downCounter presses\n$_upCounter releases',
+ style: Theme.of(context).textTheme.headline4,
+ ),
+ Text(
+ 'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/mouse_region.0.dart b/examples/api/lib/widgets/basic/mouse_region.0.dart
new file mode 100644
index 0000000..3b11edc
--- /dev/null
+++ b/examples/api/lib/widgets/basic/mouse_region.0.dart
@@ -0,0 +1,121 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for MouseRegion
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example makes a [Container] react to being entered by a mouse
+// pointer, showing a count of the number of entries and exits.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/widgets.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ int _enterCounter = 0;
+ int _exitCounter = 0;
+ double x = 0.0;
+ double y = 0.0;
+
+ void _incrementEnter(PointerEvent details) {
+ setState(() {
+ _enterCounter++;
+ });
+ }
+
+ void _incrementExit(PointerEvent details) {
+ setState(() {
+ _exitCounter++;
+ });
+ }
+
+ void _updateLocation(PointerEvent details) {
+ setState(() {
+ x = details.position.dx;
+ y = details.position.dy;
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return ConstrainedBox(
+ constraints: BoxConstraints.tight(const Size(300.0, 200.0)),
+ child: MouseRegion(
+ onEnter: _incrementEnter,
+ onHover: _updateLocation,
+ onExit: _incrementExit,
+ child: Container(
+ color: Colors.lightBlueAccent,
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ const Text(
+ 'You have entered or exited this box this many times:'),
+ Text(
+ '$_enterCounter Entries\n$_exitCounter Exits',
+ style: Theme.of(context).textTheme.headline4,
+ ),
+ Text(
+ 'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/mouse_region.on_exit.0.dart b/examples/api/lib/widgets/basic/mouse_region.on_exit.0.dart
new file mode 100644
index 0000000..b930498
--- /dev/null
+++ b/examples/api/lib/widgets/basic/mouse_region.on_exit.0.dart
@@ -0,0 +1,86 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for MouseRegion.onExit
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ bool hovered = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ height: 100,
+ width: 100,
+ decoration: BoxDecoration(color: hovered ? Colors.yellow : Colors.blue),
+ child: MouseRegion(
+ onEnter: (_) {
+ setState(() {
+ hovered = true;
+ });
+ },
+ onExit: (_) {
+ setState(() {
+ hovered = false;
+ });
+ },
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/mouse_region.on_exit.1.dart b/examples/api/lib/widgets/basic/mouse_region.on_exit.1.dart
new file mode 100644
index 0000000..35cdbeb
--- /dev/null
+++ b/examples/api/lib/widgets/basic/mouse_region.on_exit.1.dart
@@ -0,0 +1,167 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for MouseRegion.onExit
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// A region that hides its content one second after being hovered.
+class MyTimedButton extends StatefulWidget {
+ const MyTimedButton(
+ {Key? key, required this.onEnterButton, required this.onExitButton})
+ : super(key: key);
+
+ final VoidCallback onEnterButton;
+ final VoidCallback onExitButton;
+
+ @override
+ State<MyTimedButton> createState() => _MyTimedButton();
+}
+
+class _MyTimedButton extends State<MyTimedButton> {
+ bool regionIsHidden = false;
+ bool hovered = false;
+
+ Future<void> startCountdown() async {
+ await Future<void>.delayed(const Duration(seconds: 1));
+ hideButton();
+ }
+
+ void hideButton() {
+ setState(() {
+ regionIsHidden = true;
+ });
+ // This statement is necessary.
+ if (hovered) {
+ widget.onExitButton();
+ }
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return SizedBox(
+ width: 100,
+ height: 100,
+ child: MouseRegion(
+ child: regionIsHidden
+ ? null
+ : MouseRegion(
+ onEnter: (_) {
+ widget.onEnterButton();
+ setState(() {
+ hovered = true;
+ });
+ startCountdown();
+ },
+ onExit: (_) {
+ setState(() {
+ hovered = false;
+ });
+ widget.onExitButton();
+ },
+ child: Container(color: Colors.red),
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Key key = UniqueKey();
+ bool hovering = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ children: <Widget>[
+ ElevatedButton(
+ onPressed: () {
+ setState(() {
+ key = UniqueKey();
+ });
+ },
+ child: const Text('Refresh'),
+ ),
+ if (hovering) const Text('Hovering'),
+ if (!hovering) const Text('Not hovering'),
+ MyTimedButton(
+ key: key,
+ onEnterButton: () {
+ setState(() {
+ hovering = true;
+ });
+ },
+ onExitButton: () {
+ setState(() {
+ hovering = false;
+ });
+ },
+ ),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/offstage.0.dart b/examples/api/lib/widgets/basic/offstage.0.dart
new file mode 100644
index 0000000..30ae69c
--- /dev/null
+++ b/examples/api/lib/widgets/basic/offstage.0.dart
@@ -0,0 +1,108 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Offstage
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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].
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ final GlobalKey _key = GlobalKey();
+ bool _offstage = true;
+
+ Size _getFlutterLogoSize() {
+ final RenderBox renderLogo =
+ _key.currentContext!.findRenderObject()! as RenderBox;
+ return renderLogo.size;
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ Offstage(
+ offstage: _offstage,
+ child: FlutterLogo(
+ key: _key,
+ size: 150.0,
+ ),
+ ),
+ Text('Flutter logo is offstage: $_offstage'),
+ ElevatedButton(
+ child: const Text('Toggle Offstage Value'),
+ onPressed: () {
+ setState(() {
+ _offstage = !_offstage;
+ });
+ },
+ ),
+ if (_offstage)
+ ElevatedButton(
+ child: const Text('Get Flutter Logo size'),
+ onPressed: () {
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(
+ content:
+ Text('Flutter Logo size is ${_getFlutterLogoSize()}'),
+ ),
+ );
+ }),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/basic/physical_shape.0.dart b/examples/api/lib/widgets/basic/physical_shape.0.dart
new file mode 100644
index 0000000..60845b4
--- /dev/null
+++ b/examples/api/lib/widgets/basic/physical_shape.0.dart
@@ -0,0 +1,83 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for PhysicalShape
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('PhysicalShape Sample'),
+ ),
+ body: Center(
+ child: PhysicalShape(
+ elevation: 5.0,
+ child: const SizedBox(
+ child: Center(
+ child: Text(
+ 'Hello, World!',
+ style: TextStyle(
+ color: Colors.white,
+ fontSize: 20.0,
+ ),
+ ),
+ ),
+ height: 200.0,
+ width: 200.0,
+ ),
+ clipper: ShapeBorderClipper(
+ shape: RoundedRectangleBorder(
+ borderRadius: BorderRadius.circular(10.0),
+ )),
+ color: Colors.orange,
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/color_filter/color_filtered.0.dart b/examples/api/lib/widgets/color_filter/color_filtered.0.dart
new file mode 100644
index 0000000..75eb997
--- /dev/null
+++ b/examples/api/lib/widgets/color_filter/color_filtered.0.dart
@@ -0,0 +1,79 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for ColorFiltered
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// These two images have two [ColorFilter]s applied with different [BlendMode]s,
+// one with red color and [BlendMode.modulate] another with a grey color and [BlendMode.saturation].
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return SingleChildScrollView(
+ child: Column(
+ children: <Widget>[
+ ColorFiltered(
+ colorFilter: const ColorFilter.mode(
+ Colors.red,
+ BlendMode.modulate,
+ ),
+ child: Image.network(
+ 'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
+ ),
+ ColorFiltered(
+ colorFilter: const ColorFilter.mode(
+ Colors.grey,
+ BlendMode.saturation,
+ ),
+ child: Image.network(
+ 'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
+ ),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/dismissible/dismissible.0.dart b/examples/api/lib/widgets/dismissible/dismissible.0.dart
new file mode 100644
index 0000000..3523151
--- /dev/null
+++ b/examples/api/lib/widgets/dismissible/dismissible.0.dart
@@ -0,0 +1,88 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Dismissible
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample shows how you can use the [Dismissible] widget to
+// remove list items using swipe gestures. Swipe any of the list
+// tiles to the left or right to dismiss them from the [ListView].
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatefulWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ List<int> items = List<int>.generate(100, (int index) => index);
+
+ @override
+ Widget build(BuildContext context) {
+ return ListView.builder(
+ itemCount: items.length,
+ padding: const EdgeInsets.symmetric(vertical: 16),
+ itemBuilder: (BuildContext context, int index) {
+ return Dismissible(
+ child: ListTile(
+ title: Text(
+ 'Item ${items[index]}',
+ ),
+ ),
+ background: Container(
+ color: Colors.green,
+ ),
+ key: ValueKey<int>(items[index]),
+ onDismissed: (DismissDirection direction) {
+ setState(() {
+ items.removeAt(index);
+ });
+ },
+ );
+ },
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/drag_target/draggable.0.dart b/examples/api/lib/widgets/drag_target/draggable.0.dart
new file mode 100644
index 0000000..c5884af
--- /dev/null
+++ b/examples/api/lib/widgets/drag_target/draggable.0.dart
@@ -0,0 +1,118 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Draggable
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following example has a [Draggable] widget along with a [DragTarget]
+// in a row demonstrating an incremented `acceptedData` integer value when
+// you drag the element to the target.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatefulWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ int acceptedData = 0;
+
+ @override
+ Widget build(BuildContext context) {
+ return Row(
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ children: <Widget>[
+ Draggable<int>(
+ // Data is the value this Draggable stores.
+ data: 10,
+ child: Container(
+ height: 100.0,
+ width: 100.0,
+ color: Colors.lightGreenAccent,
+ child: const Center(
+ child: Text('Draggable'),
+ ),
+ ),
+ feedback: Container(
+ color: Colors.deepOrange,
+ height: 100,
+ width: 100,
+ child: const Icon(Icons.directions_run),
+ ),
+ childWhenDragging: Container(
+ height: 100.0,
+ width: 100.0,
+ color: Colors.pinkAccent,
+ child: const Center(
+ child: Text('Child When Dragging'),
+ ),
+ ),
+ ),
+ DragTarget<int>(
+ builder: (
+ BuildContext context,
+ List<dynamic> accepted,
+ List<dynamic> rejected,
+ ) {
+ return Container(
+ height: 100.0,
+ width: 100.0,
+ color: Colors.cyan,
+ child: Center(
+ child: Text('Value is updated to: $acceptedData'),
+ ),
+ );
+ },
+ onAccept: (int data) {
+ setState(() {
+ acceptedData += data;
+ });
+ },
+ ),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/editable_text/editable_text.on_changed.0.dart b/examples/api/lib/widgets/editable_text/editable_text.on_changed.0.dart
new file mode 100644
index 0000000..81d7d91
--- /dev/null
+++ b/examples/api/lib/widgets/editable_text/editable_text.on_changed.0.dart
@@ -0,0 +1,102 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for EditableText.onChanged
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows how onChanged could be used to check the TextField's
+// current value each time the user inserts or deletes a character.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ final TextEditingController _controller = TextEditingController();
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ const Text('What number comes next in the sequence?'),
+ const Text('1, 1, 2, 3, 5, 8...?'),
+ TextField(
+ controller: _controller,
+ onChanged: (String value) async {
+ if (value != '13') {
+ return;
+ }
+ await showDialog<void>(
+ context: context,
+ builder: (BuildContext context) {
+ return AlertDialog(
+ title: const Text('That is correct!'),
+ content: const Text('13 is the right answer.'),
+ actions: <Widget>[
+ TextButton(
+ onPressed: () {
+ Navigator.pop(context);
+ },
+ child: const Text('OK'),
+ ),
+ ],
+ );
+ },
+ );
+ },
+ ),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/editable_text/text_editing_controller.0.dart b/examples/api/lib/widgets/editable_text/text_editing_controller.0.dart
new file mode 100644
index 0000000..a8ff55f
--- /dev/null
+++ b/examples/api/lib/widgets/editable_text/text_editing_controller.0.dart
@@ -0,0 +1,93 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for TextEditingController
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ final TextEditingController _controller = TextEditingController();
+
+ @override
+ void initState() {
+ super.initState();
+ _controller.addListener(() {
+ final String text = _controller.text.toLowerCase();
+ _controller.value = _controller.value.copyWith(
+ text: text,
+ selection:
+ TextSelection(baseOffset: text.length, extentOffset: text.length),
+ composing: TextRange.empty,
+ );
+ });
+ }
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Container(
+ alignment: Alignment.center,
+ padding: const EdgeInsets.all(6),
+ child: TextFormField(
+ controller: _controller,
+ decoration: const InputDecoration(border: OutlineInputBorder()),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/focus_manager/focus_node.0.dart b/examples/api/lib/widgets/focus_manager/focus_node.0.dart
new file mode 100644
index 0000000..a0dd6bb
--- /dev/null
+++ b/examples/api/lib/widgets/focus_manager/focus_node.0.dart
@@ -0,0 +1,164 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for FocusNode
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/services.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class ColorfulButton extends StatefulWidget {
+ const ColorfulButton({Key? key}) : super(key: key);
+
+ @override
+ State<ColorfulButton> createState() => _ColorfulButtonState();
+}
+
+class _ColorfulButtonState extends State<ColorfulButton> {
+ late FocusNode _node;
+ bool _focused = false;
+ late FocusAttachment _nodeAttachment;
+ Color _color = Colors.white;
+
+ @override
+ void initState() {
+ super.initState();
+ _node = FocusNode(debugLabel: 'Button');
+ _node.addListener(_handleFocusChange);
+ _nodeAttachment = _node.attach(context, onKey: _handleKeyPress);
+ }
+
+ void _handleFocusChange() {
+ if (_node.hasFocus != _focused) {
+ setState(() {
+ _focused = _node.hasFocus;
+ });
+ }
+ }
+
+ KeyEventResult _handleKeyPress(FocusNode node, RawKeyEvent event) {
+ if (event is RawKeyDownEvent) {
+ print('Focus node ${node.debugLabel} got key event: ${event.logicalKey}');
+ if (event.logicalKey == LogicalKeyboardKey.keyR) {
+ print('Changing color to red.');
+ setState(() {
+ _color = Colors.red;
+ });
+ return KeyEventResult.handled;
+ } else if (event.logicalKey == LogicalKeyboardKey.keyG) {
+ print('Changing color to green.');
+ setState(() {
+ _color = Colors.green;
+ });
+ return KeyEventResult.handled;
+ } else if (event.logicalKey == LogicalKeyboardKey.keyB) {
+ print('Changing color to blue.');
+ setState(() {
+ _color = Colors.blue;
+ });
+ return KeyEventResult.handled;
+ }
+ }
+ return KeyEventResult.ignored;
+ }
+
+ @override
+ void dispose() {
+ _node.removeListener(_handleFocusChange);
+ // The attachment will automatically be detached in dispose().
+ _node.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ _nodeAttachment.reparent();
+ return GestureDetector(
+ onTap: () {
+ if (_focused) {
+ _node.unfocus();
+ } else {
+ _node.requestFocus();
+ }
+ },
+ child: Center(
+ child: Container(
+ width: 400,
+ height: 100,
+ color: _focused ? _color : Colors.white,
+ alignment: Alignment.center,
+ child:
+ Text(_focused ? "I'm in color! Press R,G,B!" : 'Press to focus'),
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ final TextTheme textTheme = Theme.of(context).textTheme;
+ return DefaultTextStyle(
+ style: textTheme.headline4!,
+ child: const ColorfulButton(),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/focus_manager/focus_node.unfocus.0.dart b/examples/api/lib/widgets/focus_manager/focus_node.unfocus.0.dart
new file mode 100644
index 0000000..17b230d
--- /dev/null
+++ b/examples/api/lib/widgets/focus_manager/focus_node.unfocus.0.dart
@@ -0,0 +1,133 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for FocusNode.unfocus
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows the difference between the different [UnfocusDisposition]
+// values for [unfocus].
+//
+// Try setting focus on the four text fields by selecting them, and then
+// select "UNFOCUS" to see what happens when the current
+// [FocusManager.primaryFocus] is unfocused.
+//
+// Try pressing the TAB key after unfocusing to see what the next widget
+// chosen is.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/foundation.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ UnfocusDisposition disposition = UnfocusDisposition.scope;
+
+ @override
+ Widget build(BuildContext context) {
+ return Material(
+ child: Container(
+ color: Colors.white,
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ Wrap(
+ children: List<Widget>.generate(4, (int index) {
+ return const SizedBox(
+ width: 200,
+ child: Padding(
+ padding: EdgeInsets.all(8.0),
+ child: TextField(
+ decoration: InputDecoration(border: OutlineInputBorder()),
+ ),
+ ),
+ );
+ }),
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ children: <Widget>[
+ ...List<Widget>.generate(UnfocusDisposition.values.length,
+ (int index) {
+ return Row(
+ mainAxisSize: MainAxisSize.min,
+ children: <Widget>[
+ Radio<UnfocusDisposition>(
+ groupValue: disposition,
+ onChanged: (UnfocusDisposition? value) {
+ setState(() {
+ if (value != null) {
+ disposition = value;
+ }
+ });
+ },
+ value: UnfocusDisposition.values[index],
+ ),
+ Text(describeEnum(UnfocusDisposition.values[index])),
+ ],
+ );
+ }),
+ OutlinedButton(
+ child: const Text('UNFOCUS'),
+ onPressed: () {
+ setState(() {
+ primaryFocus!.unfocus(disposition: disposition);
+ });
+ },
+ ),
+ ],
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/focus_scope/focus.0.dart b/examples/api/lib/widgets/focus_scope/focus.0.dart
new file mode 100644
index 0000000..3625b12
--- /dev/null
+++ b/examples/api/lib/widgets/focus_scope/focus.0.dart
@@ -0,0 +1,137 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Focus
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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].
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/services.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatefulWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Color _color = Colors.white;
+
+ KeyEventResult _handleKeyPress(FocusNode node, RawKeyEvent event) {
+ if (event is RawKeyDownEvent) {
+ print('Focus node ${node.debugLabel} got key event: ${event.logicalKey}');
+ if (event.logicalKey == LogicalKeyboardKey.keyR) {
+ print('Changing color to red.');
+ setState(() {
+ _color = Colors.red;
+ });
+ return KeyEventResult.handled;
+ } else if (event.logicalKey == LogicalKeyboardKey.keyG) {
+ print('Changing color to green.');
+ setState(() {
+ _color = Colors.green;
+ });
+ return KeyEventResult.handled;
+ } else if (event.logicalKey == LogicalKeyboardKey.keyB) {
+ print('Changing color to blue.');
+ setState(() {
+ _color = Colors.blue;
+ });
+ return KeyEventResult.handled;
+ }
+ }
+ return KeyEventResult.ignored;
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ final TextTheme textTheme = Theme.of(context).textTheme;
+ return FocusScope(
+ debugLabel: 'Scope',
+ autofocus: true,
+ child: DefaultTextStyle(
+ style: textTheme.headline4!,
+ child: Focus(
+ onKey: _handleKeyPress,
+ debugLabel: 'Button',
+ child: Builder(
+ builder: (BuildContext context) {
+ final FocusNode focusNode = Focus.of(context);
+ final bool hasFocus = focusNode.hasFocus;
+ return GestureDetector(
+ onTap: () {
+ if (hasFocus) {
+ focusNode.unfocus();
+ } else {
+ focusNode.requestFocus();
+ }
+ },
+ child: Center(
+ child: Container(
+ width: 400,
+ height: 100,
+ alignment: Alignment.center,
+ color: hasFocus ? _color : Colors.white,
+ child: Text(hasFocus
+ ? "I'm in color! Press R,G,B!"
+ : 'Press to focus'),
+ ),
+ ),
+ );
+ },
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/focus_scope/focus.1.dart b/examples/api/lib/widgets/focus_scope/focus.1.dart
new file mode 100644
index 0000000..e2a22f1
--- /dev/null
+++ b/examples/api/lib/widgets/focus_scope/focus.1.dart
@@ -0,0 +1,110 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Focus
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows how to wrap another widget in a [Focus] widget to make it
+// focusable. It wraps a [Container], and changes the container's color when it
+// is set as the [FocusManager.primaryFocus].
+//
+// If you also want to handle mouse hover and/or keyboard actions on a widget,
+// consider using a [FocusableActionDetector], which combines several different
+// widgets to provide those capabilities.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class FocusableText extends StatelessWidget {
+ const FocusableText(
+ this.data, {
+ Key? key,
+ required this.autofocus,
+ }) : super(key: key);
+
+ /// The string to display as the text for this widget.
+ final String data;
+
+ /// Whether or not to focus this widget initially if nothing else is focused.
+ final bool autofocus;
+
+ @override
+ Widget build(BuildContext context) {
+ return Focus(
+ autofocus: autofocus,
+ child: Builder(builder: (BuildContext context) {
+ // The contents of this Builder are being made focusable. It is inside
+ // of a Builder because the builder provides the correct context
+ // variable for Focus.of() to be able to find the Focus widget that is
+ // the Builder's parent. Without the builder, the context variable used
+ // would be the one given the FocusableText build function, and that
+ // would start looking for a Focus widget ancestor of the FocusableText
+ // instead of finding the one inside of its build function.
+ return Container(
+ padding: const EdgeInsets.all(8.0),
+ // Change the color based on whether or not this Container has focus.
+ color: Focus.of(context).hasPrimaryFocus ? Colors.black12 : null,
+ child: Text(data),
+ );
+ }),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: ListView.builder(
+ itemBuilder: (BuildContext context, int index) => FocusableText(
+ 'Item $index',
+ autofocus: index == 0,
+ ),
+ itemCount: 50,
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/focus_scope/focus.2.dart b/examples/api/lib/widgets/focus_scope/focus.2.dart
new file mode 100644
index 0000000..0dee82b
--- /dev/null
+++ b/examples/api/lib/widgets/focus_scope/focus.2.dart
@@ -0,0 +1,115 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Focus
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows how to focus a newly-created widget immediately after it
+// is created.
+//
+// The focus node will not actually be given the focus until after the frame in
+// which it has requested focus is drawn, so it is OK to call
+// [FocusNode.requestFocus] on a node which is not yet in the focus tree.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ int focusedChild = 0;
+ List<Widget> children = <Widget>[];
+ List<FocusNode> childFocusNodes = <FocusNode>[];
+
+ @override
+ void initState() {
+ super.initState();
+ // Add the first child.
+ _addChild();
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+ for (final FocusNode node in childFocusNodes) {
+ node.dispose();
+ }
+ }
+
+ void _addChild() {
+ // Calling requestFocus here creates a deferred request for focus, since the
+ // node is not yet part of the focus tree.
+ childFocusNodes
+ .add(FocusNode(debugLabel: 'Child ${children.length}')..requestFocus());
+
+ children.add(Padding(
+ padding: const EdgeInsets.all(2.0),
+ child: ActionChip(
+ focusNode: childFocusNodes.last,
+ label: Text('CHILD ${children.length}'),
+ onPressed: () {},
+ ),
+ ));
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: Wrap(
+ children: children,
+ ),
+ ),
+ floatingActionButton: FloatingActionButton(
+ onPressed: () {
+ setState(() {
+ focusedChild = children.length;
+ _addChild();
+ });
+ },
+ child: const Icon(Icons.add),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/focus_scope/focus_scope.0.dart b/examples/api/lib/widgets/focus_scope/focus_scope.0.dart
new file mode 100644
index 0000000..9c1d79b
--- /dev/null
+++ b/examples/api/lib/widgets/focus_scope/focus_scope.0.dart
@@ -0,0 +1,196 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for FocusScope
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example demonstrates using a [FocusScope] to restrict focus to a particular
+// portion of the app. In this case, restricting focus to the visible part of a
+// Stack.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+/// A demonstration pane.
+///
+/// This is just a separate widget to simplify the example.
+class Pane extends StatelessWidget {
+ const Pane({
+ Key? key,
+ required this.focusNode,
+ this.onPressed,
+ required this.backgroundColor,
+ required this.icon,
+ this.child,
+ }) : super(key: key);
+
+ final FocusNode focusNode;
+ final VoidCallback? onPressed;
+ final Color backgroundColor;
+ final Widget icon;
+ final Widget? child;
+
+ @override
+ Widget build(BuildContext context) {
+ return Material(
+ color: backgroundColor,
+ child: Stack(
+ fit: StackFit.expand,
+ children: <Widget>[
+ Center(
+ child: child,
+ ),
+ Align(
+ alignment: Alignment.topLeft,
+ child: IconButton(
+ autofocus: true,
+ focusNode: focusNode,
+ onPressed: onPressed,
+ icon: icon,
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ bool backdropIsVisible = false;
+ FocusNode backdropNode = FocusNode(debugLabel: 'Close Backdrop Button');
+ FocusNode foregroundNode = FocusNode(debugLabel: 'Option Button');
+
+ @override
+ void dispose() {
+ super.dispose();
+ backdropNode.dispose();
+ foregroundNode.dispose();
+ }
+
+ Widget _buildStack(BuildContext context, BoxConstraints constraints) {
+ final Size stackSize = constraints.biggest;
+ return Stack(
+ fit: StackFit.expand,
+ // The backdrop is behind the front widget in the Stack, but the widgets
+ // would still be active and traversable without the FocusScope.
+ children: <Widget>[
+ // TRY THIS: Try removing this FocusScope entirely to see how it affects
+ // the behavior. Without this FocusScope, the "ANOTHER BUTTON TO FOCUS"
+ // button, and the IconButton in the backdrop Pane would be focusable
+ // even when the backdrop wasn't visible.
+ FocusScope(
+ // TRY THIS: Try commenting out this line. Notice that the focus
+ // starts on the backdrop and is stuck there? It seems like the app is
+ // non-responsive, but it actually isn't. This line makes sure that
+ // this focus scope and its children can't be focused when they're not
+ // visible. It might help to make the background color of the
+ // foreground pane semi-transparent to see it clearly.
+ canRequestFocus: backdropIsVisible,
+ child: Pane(
+ icon: const Icon(Icons.close),
+ focusNode: backdropNode,
+ backgroundColor: Colors.lightBlue,
+ onPressed: () => setState(() => backdropIsVisible = false),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ // This button would be not visible, but still focusable from
+ // the foreground pane without the FocusScope.
+ ElevatedButton(
+ onPressed: () => print('You pressed the other button!'),
+ child: const Text('ANOTHER BUTTON TO FOCUS'),
+ ),
+ DefaultTextStyle(
+ style: Theme.of(context).textTheme.headline2!,
+ child: const Text('BACKDROP')),
+ ],
+ ),
+ ),
+ ),
+ AnimatedPositioned(
+ curve: Curves.easeInOut,
+ duration: const Duration(milliseconds: 300),
+ top: backdropIsVisible ? stackSize.height * 0.9 : 0.0,
+ width: stackSize.width,
+ height: stackSize.height,
+ onEnd: () {
+ if (backdropIsVisible) {
+ backdropNode.requestFocus();
+ } else {
+ foregroundNode.requestFocus();
+ }
+ },
+ child: Pane(
+ icon: const Icon(Icons.menu),
+ focusNode: foregroundNode,
+ // TRY THIS: Try changing this to Colors.green.withOpacity(0.8) to see for
+ // yourself that the hidden components do/don't get focus.
+ backgroundColor: Colors.green,
+ onPressed: backdropIsVisible
+ ? null
+ : () => setState(() => backdropIsVisible = true),
+ child: DefaultTextStyle(
+ style: Theme.of(context).textTheme.headline2!,
+ child: const Text('FOREGROUND')),
+ ),
+ ),
+ ],
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ // Use a LayoutBuilder so that we can base the size of the stack on the size
+ // of its parent.
+ return LayoutBuilder(builder: _buildStack);
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/focus_traversal/focus_traversal_group.0.dart b/examples/api/lib/widgets/focus_traversal/focus_traversal_group.0.dart
new file mode 100644
index 0000000..f9a3b38
--- /dev/null
+++ b/examples/api/lib/widgets/focus_traversal/focus_traversal_group.0.dart
@@ -0,0 +1,221 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for FocusTraversalGroup
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample shows three rows of buttons, each grouped by a
+// [FocusTraversalGroup], each with different traversal order policies. Use tab
+// traversal to see the order they are traversed in. The first row follows a
+// numerical order, the second follows a lexical order (ordered to traverse
+// right to left), and the third ignores the numerical order assigned to it and
+// traverses in widget order.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+/// A button wrapper that adds either a numerical or lexical order, depending on
+/// the type of T.
+class OrderedButton<T> extends StatefulWidget {
+ const OrderedButton({
+ Key? key,
+ required this.name,
+ this.canRequestFocus = true,
+ this.autofocus = false,
+ required this.order,
+ }) : super(key: key);
+
+ final String name;
+ final bool canRequestFocus;
+ final bool autofocus;
+ final T order;
+
+ @override
+ State<OrderedButton<T>> createState() => _OrderedButtonState<T>();
+}
+
+class _OrderedButtonState<T> extends State<OrderedButton<T>> {
+ late FocusNode focusNode;
+
+ @override
+ void initState() {
+ super.initState();
+ focusNode = FocusNode(
+ debugLabel: widget.name,
+ canRequestFocus: widget.canRequestFocus,
+ );
+ }
+
+ @override
+ void dispose() {
+ focusNode.dispose();
+ super.dispose();
+ }
+
+ @override
+ void didUpdateWidget(OrderedButton<T> oldWidget) {
+ super.didUpdateWidget(oldWidget);
+ focusNode.canRequestFocus = widget.canRequestFocus;
+ }
+
+ void _handleOnPressed() {
+ focusNode.requestFocus();
+ print('Button ${widget.name} pressed.');
+ debugDumpFocusTree();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ FocusOrder order;
+ if (widget.order is num) {
+ order = NumericFocusOrder((widget.order as num).toDouble());
+ } else {
+ order = LexicalFocusOrder(widget.order.toString());
+ }
+
+ Color? overlayColor(Set<MaterialState> states) {
+ if (states.contains(MaterialState.focused)) {
+ return Colors.red;
+ }
+ if (states.contains(MaterialState.hovered)) {
+ return Colors.blue;
+ }
+ return null; // defer to the default overlayColor
+ }
+
+ Color? foregroundColor(Set<MaterialState> states) {
+ if (states.contains(MaterialState.focused) ||
+ states.contains(MaterialState.hovered)) {
+ return Colors.white;
+ }
+ return null; // defer to the default foregroundColor
+ }
+
+ return FocusTraversalOrder(
+ order: order,
+ child: Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: OutlinedButton(
+ focusNode: focusNode,
+ autofocus: widget.autofocus,
+ style: ButtonStyle(
+ overlayColor:
+ MaterialStateProperty.resolveWith<Color?>(overlayColor),
+ foregroundColor:
+ MaterialStateProperty.resolveWith<Color?>(foregroundColor),
+ ),
+ onPressed: () => _handleOnPressed(),
+ child: Text(widget.name),
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Container(
+ color: Colors.white,
+ child: FocusTraversalGroup(
+ policy: OrderedTraversalPolicy(),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ // A group that is ordered with a numerical order, from left to right.
+ FocusTraversalGroup(
+ policy: OrderedTraversalPolicy(),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: List<Widget>.generate(3, (int index) {
+ return OrderedButton<num>(
+ name: 'num: $index',
+ // TRY THIS: change this to "3 - index" and see how the order changes.
+ order: index,
+ );
+ }),
+ ),
+ ),
+ // A group that is ordered with a lexical order, from right to left.
+ FocusTraversalGroup(
+ policy: OrderedTraversalPolicy(),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: List<Widget>.generate(3, (int index) {
+ // Order as "C" "B", "A".
+ final String order =
+ String.fromCharCode('A'.codeUnitAt(0) + (2 - index));
+ return OrderedButton<String>(
+ name: 'String: $order',
+ order: order,
+ );
+ }),
+ ),
+ ),
+ // A group that orders in widget order, regardless of what the order is set to.
+ FocusTraversalGroup(
+ // Note that because this is NOT an OrderedTraversalPolicy, the
+ // assigned order of these OrderedButtons is ignored, and they
+ // are traversed in widget order. TRY THIS: change this to
+ // "OrderedTraversalPolicy()" and see that it now follows the
+ // numeric order set on them instead of the widget order.
+ policy: WidgetOrderTraversalPolicy(),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: List<Widget>.generate(3, (int index) {
+ return OrderedButton<num>(
+ name: 'ignored num: ${3 - index}',
+ order: 3 - index,
+ );
+ }),
+ ),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/focus_traversal/ordered_traversal_policy.0.dart b/examples/api/lib/widgets/focus_traversal/ordered_traversal_policy.0.dart
new file mode 100644
index 0000000..2b24e00
--- /dev/null
+++ b/examples/api/lib/widgets/focus_traversal/ordered_traversal_policy.0.dart
@@ -0,0 +1,125 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for OrderedTraversalPolicy
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample shows how to assign a traversal order to a widget. In the
+// example, the focus order goes from bottom right (the "One" button) to top
+// left (the "Six" button).
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatelessWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class DemoButton extends StatelessWidget {
+ const DemoButton({
+ Key? key,
+ required this.name,
+ this.autofocus = false,
+ required this.order,
+ }) : super(key: key);
+
+ final String name;
+ final bool autofocus;
+ final double order;
+
+ void _handleOnPressed() {
+ print('Button $name pressed.');
+ debugDumpFocusTree();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return FocusTraversalOrder(
+ order: NumericFocusOrder(order),
+ child: TextButton(
+ autofocus: autofocus,
+ onPressed: () => _handleOnPressed(),
+ child: Text(name),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return FocusTraversalGroup(
+ policy: OrderedTraversalPolicy(),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: const <Widget>[
+ DemoButton(name: 'Six', order: 6),
+ ],
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: const <Widget>[
+ DemoButton(name: 'Five', order: 5),
+ DemoButton(name: 'Four', order: 4),
+ ],
+ ),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: const <Widget>[
+ DemoButton(name: 'Three', order: 3),
+ DemoButton(name: 'Two', order: 2),
+ DemoButton(name: 'One', order: 1, autofocus: true),
+ ],
+ ),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/form/form.0.dart b/examples/api/lib/widgets/form/form.0.dart
new file mode 100644
index 0000000..1b3caf9
--- /dev/null
+++ b/examples/api/lib/widgets/form/form.0.dart
@@ -0,0 +1,100 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Form
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+//
+// 
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatefulWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
+
+ @override
+ Widget build(BuildContext context) {
+ return Form(
+ key: _formKey,
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: <Widget>[
+ TextFormField(
+ decoration: const InputDecoration(
+ hintText: 'Enter your email',
+ ),
+ validator: (String? value) {
+ if (value == null || value.isEmpty) {
+ return 'Please enter some text';
+ }
+ return null;
+ },
+ ),
+ Padding(
+ padding: const EdgeInsets.symmetric(vertical: 16.0),
+ child: ElevatedButton(
+ onPressed: () {
+ // Validate will return true if the form is valid, or false if
+ // the form is invalid.
+ if (_formKey.currentState!.validate()) {
+ // Process data.
+ }
+ },
+ child: const Text('Submit'),
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/framework/build_owner.0.dart b/examples/api/lib/widgets/framework/build_owner.0.dart
new file mode 100644
index 0000000..b7d467d
--- /dev/null
+++ b/examples/api/lib/widgets/framework/build_owner.0.dart
@@ -0,0 +1,74 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for BuildOwner
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows how to build an off-screen widget tree used to measure
+// the layout size of the rendered tree. For some use cases, the simpler
+// [Offstage] widget may be a better alternative to this approach.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+void main() {
+ WidgetsFlutterBinding.ensureInitialized();
+ print(measureWidget(const SizedBox(width: 640, height: 480)));
+}
+
+Size measureWidget(Widget widget) {
+ final PipelineOwner pipelineOwner = PipelineOwner();
+ final MeasurementView rootView = pipelineOwner.rootNode = MeasurementView();
+ final BuildOwner buildOwner = BuildOwner(focusManager: FocusManager());
+ final RenderObjectToWidgetElement<RenderBox> element =
+ RenderObjectToWidgetAdapter<RenderBox>(
+ container: rootView,
+ debugShortDescription: '[root]',
+ child: widget,
+ ).attachToRenderTree(buildOwner);
+ try {
+ rootView.scheduleInitialLayout();
+ pipelineOwner.flushLayout();
+ return rootView.size;
+ } finally {
+ // Clean up.
+ element.update(RenderObjectToWidgetAdapter<RenderBox>(container: rootView));
+ buildOwner.finalizeTree();
+ }
+}
+
+class MeasurementView extends RenderBox
+ with RenderObjectWithChildMixin<RenderBox> {
+ @override
+ void performLayout() {
+ assert(child != null);
+ child!.layout(const BoxConstraints(), parentUsesSize: true);
+ size = child!.size;
+ }
+
+ @override
+ void debugAssertDoesMeetConstraints() => true;
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/framework/error_widget.0.dart b/examples/api/lib/widgets/framework/error_widget.0.dart
new file mode 100644
index 0000000..0ba5f18
--- /dev/null
+++ b/examples/api/lib/widgets/framework/error_widget.0.dart
@@ -0,0 +1,57 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for ErrorWidget
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+//
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+
+void main() {
+ ErrorWidget.builder = (FlutterErrorDetails details) {
+ bool inDebug = false;
+ assert(() {
+ inDebug = true;
+ return true;
+ }());
+ // In debug mode, use the normal error widget which shows
+ // the error message:
+ if (inDebug) {
+ return ErrorWidget(details.exception);
+ }
+ // In release builds, show a yellow-on-blue message instead:
+ return Container(
+ alignment: Alignment.center,
+ child: const Text(
+ 'Error!',
+ style: TextStyle(color: Colors.yellow),
+ textDirection: TextDirection.ltr,
+ ),
+ );
+ };
+ // Here we would normally runApp() the root widget, but to demonstrate
+ // the error handling we artificially fail:
+ return runApp(Builder(
+ builder: (BuildContext context) {
+ throw 'oh no, an error';
+ },
+ ));
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/gesture_detector/gesture_detector.0.dart b/examples/api/lib/widgets/gesture_detector/gesture_detector.0.dart
new file mode 100644
index 0000000..c2c7517
--- /dev/null
+++ b/examples/api/lib/widgets/gesture_detector/gesture_detector.0.dart
@@ -0,0 +1,95 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for GestureDetector
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ bool _lightIsOn = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Container(
+ alignment: FractionalOffset.center,
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: Icon(
+ Icons.lightbulb_outline,
+ color: _lightIsOn ? Colors.yellow.shade600 : Colors.black,
+ size: 60,
+ ),
+ ),
+ GestureDetector(
+ onTap: () {
+ setState(() {
+ // Toggle light when tapped.
+ _lightIsOn = !_lightIsOn;
+ });
+ },
+ child: Container(
+ color: Colors.yellow.shade600,
+ padding: const EdgeInsets.all(8),
+ // Change button text when light changes state.
+ child: Text(_lightIsOn ? 'TURN LIGHT OFF' : 'TURN LIGHT ON'),
+ ),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/gesture_detector/gesture_detector.1.dart b/examples/api/lib/widgets/gesture_detector/gesture_detector.1.dart
new file mode 100644
index 0000000..06dd3e9
--- /dev/null
+++ b/examples/api/lib/widgets/gesture_detector/gesture_detector.1.dart
@@ -0,0 +1,81 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for GestureDetector
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Color _color = Colors.white;
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ color: _color,
+ height: 200.0,
+ width: 200.0,
+ child: GestureDetector(
+ onTap: () {
+ setState(() {
+ _color == Colors.yellow
+ ? _color = Colors.white
+ : _color = Colors.yellow;
+ });
+ },
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/heroes/hero.0.dart b/examples/api/lib/widgets/heroes/hero.0.dart
new file mode 100644
index 0000000..9e9ca4d
--- /dev/null
+++ b/examples/api/lib/widgets/heroes/hero.0.dart
@@ -0,0 +1,108 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Hero
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample shows a [Hero] used within a [ListTile].
+//
+// Tapping on the Hero-wrapped rectangle triggers a hero
+// animation as a new [MaterialPageRoute] is pushed. Both the size
+// and location of the rectangle animates.
+//
+// Both widgets use the same [Hero.tag].
+//
+// The Hero widget uses the matching tags to identify and execute this
+// animation.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: <Widget>[
+ const SizedBox(
+ height: 20.0,
+ ),
+ ListTile(
+ leading: Hero(
+ tag: 'hero-rectangle',
+ child: _blueRectangle(const Size(50, 50)),
+ ),
+ onTap: () => _gotoDetailsPage(context),
+ title:
+ const Text('Tap on the icon to view hero animation transition.'),
+ ),
+ ],
+ );
+ }
+
+ Widget _blueRectangle(Size size) {
+ return Container(
+ width: size.width,
+ height: size.height,
+ color: Colors.blue,
+ );
+ }
+
+ void _gotoDetailsPage(BuildContext context) {
+ Navigator.of(context).push(MaterialPageRoute<void>(
+ builder: (BuildContext context) => Scaffold(
+ appBar: AppBar(
+ title: const Text('second Page'),
+ ),
+ body: Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ Hero(
+ tag: 'hero-rectangle',
+ child: _blueRectangle(const Size(200, 200)),
+ ),
+ ],
+ ),
+ ),
+ ),
+ ));
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/image/image.error_builder.0.dart b/examples/api/lib/widgets/image/image.error_builder.0.dart
new file mode 100644
index 0000000..338d051
--- /dev/null
+++ b/examples/api/lib/widgets/image/image.error_builder.0.dart
@@ -0,0 +1,74 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Image.errorBuilder
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following sample uses [errorBuilder] to show a '😢' in place of the
+// image that fails to load, and prints the error to the console.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return DecoratedBox(
+ decoration: BoxDecoration(
+ color: Colors.white,
+ border: Border.all(),
+ borderRadius: BorderRadius.circular(20),
+ ),
+ child: Image.network(
+ 'https://example.does.not.exist/image.jpg',
+ errorBuilder:
+ (BuildContext context, Object exception, StackTrace? stackTrace) {
+ // Appropriate logging or analytics, e.g.
+ // myAnalytics.recordError(
+ // 'An error occurred loading "https://example.does.not.exist/image.jpg"',
+ // exception,
+ // stackTrace,
+ // );
+ return const Text('😢');
+ },
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/image/image.frame_builder.0.dart b/examples/api/lib/widgets/image/image.frame_builder.0.dart
new file mode 100644
index 0000000..c9b6569
--- /dev/null
+++ b/examples/api/lib/widgets/image/image.frame_builder.0.dart
@@ -0,0 +1,80 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Image.frameBuilder
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ @override
+ Widget build(BuildContext context) {
+ return DecoratedBox(
+ decoration: BoxDecoration(
+ color: Colors.white,
+ border: Border.all(),
+ borderRadius: BorderRadius.circular(20),
+ ),
+ child: Image.network(
+ '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;
+ }
+ return AnimatedOpacity(
+ child: child,
+ opacity: frame == null ? 0 : 1,
+ duration: const Duration(seconds: 1),
+ curve: Curves.easeOut,
+ );
+ },
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/image/image.loading_builder.0.dart b/examples/api/lib/widgets/image/image.loading_builder.0.dart
new file mode 100644
index 0000000..ef828b8
--- /dev/null
+++ b/examples/api/lib/widgets/image/image.loading_builder.0.dart
@@ -0,0 +1,78 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Image.loadingBuilder
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following sample uses [loadingBuilder] to show a
+// [CircularProgressIndicator] while an image loads over the network.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return DecoratedBox(
+ decoration: BoxDecoration(
+ color: Colors.white,
+ border: Border.all(),
+ borderRadius: BorderRadius.circular(20),
+ ),
+ child: Image.network(
+ 'https://example.com/image.jpg',
+ loadingBuilder: (BuildContext context, Widget child,
+ ImageChunkEvent? loadingProgress) {
+ if (loadingProgress == null) {
+ return child;
+ }
+ return Center(
+ child: CircularProgressIndicator(
+ value: loadingProgress.expectedTotalBytes != null
+ ? loadingProgress.cumulativeBytesLoaded /
+ loadingProgress.expectedTotalBytes!
+ : null,
+ ),
+ );
+ },
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/implicit_animations/animated_align.0.dart b/examples/api/lib/widgets/implicit_animations/animated_align.0.dart
new file mode 100644
index 0000000..12f5527
--- /dev/null
+++ b/examples/api/lib/widgets/implicit_animations/animated_align.0.dart
@@ -0,0 +1,85 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AnimatedAlign
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following code implements the [AnimatedAlign] widget, using a [curve] of
+// [Curves.fastOutSlowIn].
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatefulWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ bool selected = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return GestureDetector(
+ onTap: () {
+ setState(() {
+ selected = !selected;
+ });
+ },
+ child: Center(
+ child: Container(
+ width: 250.0,
+ height: 250.0,
+ color: Colors.red,
+ child: AnimatedAlign(
+ alignment: selected ? Alignment.topRight : Alignment.bottomLeft,
+ duration: const Duration(seconds: 1),
+ curve: Curves.fastOutSlowIn,
+ child: const FlutterLogo(size: 50.0),
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/implicit_animations/animated_container.0.dart b/examples/api/lib/widgets/implicit_animations/animated_container.0.dart
new file mode 100644
index 0000000..a089ee1
--- /dev/null
+++ b/examples/api/lib/widgets/implicit_animations/animated_container.0.dart
@@ -0,0 +1,85 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AnimatedContainer
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following example (depicted above) transitions an AnimatedContainer
+// between two states. It adjusts the `height`, `width`, `color`, and
+// [alignment] properties when tapped.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatefulWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ bool selected = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return GestureDetector(
+ onTap: () {
+ setState(() {
+ selected = !selected;
+ });
+ },
+ child: Center(
+ child: AnimatedContainer(
+ width: selected ? 200.0 : 100.0,
+ height: selected ? 100.0 : 200.0,
+ color: selected ? Colors.red : Colors.blue,
+ alignment:
+ selected ? Alignment.center : AlignmentDirectional.topCenter,
+ duration: const Duration(seconds: 2),
+ curve: Curves.fastOutSlowIn,
+ child: const FlutterLogo(size: 75),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/implicit_animations/animated_padding.0.dart b/examples/api/lib/widgets/implicit_animations/animated_padding.0.dart
new file mode 100644
index 0000000..e85e667
--- /dev/null
+++ b/examples/api/lib/widgets/implicit_animations/animated_padding.0.dart
@@ -0,0 +1,91 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AnimatedPadding
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following code implements the [AnimatedPadding] widget, using a [curve] of
+// [Curves.easeInOut].
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatefulWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ double padValue = 0.0;
+ void _updatePadding(double value) {
+ setState(() {
+ padValue = value;
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ AnimatedPadding(
+ padding: EdgeInsets.all(padValue),
+ duration: const Duration(seconds: 2),
+ curve: Curves.easeInOut,
+ child: Container(
+ width: MediaQuery.of(context).size.width,
+ height: MediaQuery.of(context).size.height / 5,
+ color: Colors.blue,
+ ),
+ ),
+ Text('Padding: $padValue'),
+ ElevatedButton(
+ child: const Text('Change padding'),
+ onPressed: () {
+ _updatePadding(padValue == 0.0 ? 100.0 : 0.0);
+ }),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/implicit_animations/animated_positioned.0.dart b/examples/api/lib/widgets/implicit_animations/animated_positioned.0.dart
new file mode 100644
index 0000000..087e5b5
--- /dev/null
+++ b/examples/api/lib/widgets/implicit_animations/animated_positioned.0.dart
@@ -0,0 +1,94 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AnimatedPositioned
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following example transitions an AnimatedPositioned
+// between two states. It adjusts the `height`, `width`, and
+// [Positioned] properties when tapped.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ bool selected = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return SizedBox(
+ width: 200,
+ height: 350,
+ child: Stack(
+ children: <Widget>[
+ AnimatedPositioned(
+ width: selected ? 200.0 : 50.0,
+ height: selected ? 50.0 : 200.0,
+ top: selected ? 50.0 : 150.0,
+ duration: const Duration(seconds: 2),
+ curve: Curves.fastOutSlowIn,
+ child: GestureDetector(
+ onTap: () {
+ setState(() {
+ selected = !selected;
+ });
+ },
+ child: Container(
+ color: Colors.blue,
+ child: const Center(child: Text('Tap me')),
+ ),
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/implicit_animations/animated_slide.0.dart b/examples/api/lib/widgets/implicit_animations/animated_slide.0.dart
new file mode 100644
index 0000000..f4242f7
--- /dev/null
+++ b/examples/api/lib/widgets/implicit_animations/animated_slide.0.dart
@@ -0,0 +1,95 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AnimatedSlide
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatefulWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Offset offset = Offset.zero;
+
+ void _slideUp() {
+ setState(() => offset -= const Offset(0, 1));
+ }
+
+ void _slideDown() {
+ setState(() => offset += const Offset(0, 1));
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ mainAxisSize: MainAxisSize.min,
+ children: <Widget>[
+ ElevatedButton(
+ child: const Text('Slide up'),
+ onPressed: _slideUp,
+ ),
+ ElevatedButton(
+ child: const Text('Slide down'),
+ onPressed: _slideDown,
+ ),
+ Padding(
+ padding: const EdgeInsets.all(50),
+ child: AnimatedSlide(
+ offset: offset,
+ duration: const Duration(milliseconds: 500),
+ curve: Curves.easeInOut,
+ child: const FlutterLogo(),
+ ),
+ ),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/implicit_animations/sliver_animated_opacity.0.dart b/examples/api/lib/widgets/implicit_animations/sliver_animated_opacity.0.dart
new file mode 100644
index 0000000..d601f5c
--- /dev/null
+++ b/examples/api/lib/widgets/implicit_animations/sliver_animated_opacity.0.dart
@@ -0,0 +1,94 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center_freeform_state.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SliverAnimatedOpacity
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// Creates a [CustomScrollView] with a [SliverFixedExtentList] and a
+// [FloatingActionButton]. Pressing the button animates the lists' opacity.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with SingleTickerProviderStateMixin {
+ bool _visible = true;
+
+ @override
+ Widget build(BuildContext context) {
+ return CustomScrollView(slivers: <Widget>[
+ SliverAnimatedOpacity(
+ opacity: _visible ? 1.0 : 0.0,
+ duration: const Duration(milliseconds: 500),
+ sliver: SliverFixedExtentList(
+ itemExtent: 100.0,
+ delegate: SliverChildBuilderDelegate(
+ (BuildContext context, int index) {
+ return Container(
+ color: index.isEven ? Colors.indigo[200] : Colors.orange[200],
+ );
+ },
+ childCount: 5,
+ ),
+ ),
+ ),
+ SliverToBoxAdapter(
+ child: FloatingActionButton(
+ onPressed: () {
+ setState(() {
+ _visible = !_visible;
+ });
+ },
+ tooltip: 'Toggle opacity',
+ child: const Icon(Icons.flip),
+ )),
+ ]);
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/inherited_notifier/inherited_notifier.0.dart b/examples/api/lib/widgets/inherited_notifier/inherited_notifier.0.dart
new file mode 100644
index 0000000..145634d
--- /dev/null
+++ b/examples/api/lib/widgets/inherited_notifier/inherited_notifier.0.dart
@@ -0,0 +1,148 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for InheritedNotifier
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows three spinning squares that use the value of the notifier
+// on an ancestor [InheritedNotifier] (`SpinModel`) to give them their
+// rotation. The [InheritedNotifier] doesn't need to know about the children,
+// and the `notifier` argument doesn't need to be an animation controller, it
+// can be anything that implements [Listenable] (like a [ChangeNotifier]).
+//
+// The `SpinModel` class could just as easily listen to another object (say, a
+// separate object that keeps the value of an input or data model value) that
+// is a [Listenable], and get the value from that. The descendants also don't
+// need to have an instance of the [InheritedNotifier] in order to use it, they
+// just need to know that there is one in their ancestry. This can help with
+// decoupling widgets from their models.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//********************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-dartImports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'dart:math' as math;
+
+//* ▲▲▲▲▲▲▲▲ code-dartImports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class SpinModel extends InheritedNotifier<AnimationController> {
+ const SpinModel({
+ Key? key,
+ AnimationController? notifier,
+ required Widget child,
+ }) : super(key: key, notifier: notifier, child: child);
+
+ static double of(BuildContext context) {
+ return context
+ .dependOnInheritedWidgetOfExactType<SpinModel>()!
+ .notifier!
+ .value;
+ }
+}
+
+class Spinner extends StatelessWidget {
+ const Spinner({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return Transform.rotate(
+ angle: SpinModel.of(context) * 2.0 * math.pi,
+ child: Container(
+ width: 100,
+ height: 100,
+ color: Colors.green,
+ child: const Center(
+ child: Text('Whee!'),
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ late AnimationController _controller;
+
+ @override
+ void initState() {
+ super.initState();
+ _controller = AnimationController(
+ duration: const Duration(seconds: 10),
+ vsync: this,
+ )..repeat();
+ }
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return SpinModel(
+ notifier: _controller,
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ children: const <Widget>[
+ Spinner(),
+ Spinner(),
+ Spinner(),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/inherited_theme/inherited_theme.0.dart b/examples/api/lib/widgets/inherited_theme/inherited_theme.0.dart
new file mode 100644
index 0000000..174902f
--- /dev/null
+++ b/examples/api/lib/widgets/inherited_theme/inherited_theme.0.dart
@@ -0,0 +1,105 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for InheritedTheme
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example demonstrates how `InheritedTheme.capture()` can be used
+// to wrap the contents of a new route with the inherited themes that
+// are present when the route was built - but are not present when route
+// is actually shown.
+//
+// If the same code is run without `InheritedTheme.capture(), the
+// new route's Text widget will inherit the "something must be wrong"
+// fallback text style, rather than the default text style defined in MyApp.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+void main() {
+ runApp(const MyApp());
+}
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
+
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class MyAppBody extends StatelessWidget {
+ const MyAppBody({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ final NavigatorState navigator = Navigator.of(context);
+ // This InheritedTheme.capture() saves references to themes that are
+ // found above the context provided to this widget's build method
+ // excluding themes are found above the navigator. Those themes do
+ // not have to be captured, because they will already be visible from
+ // the new route pushed onto said navigator.
+ // Themes are captured outside of the route's builder because when the
+ // builder executes, the context may not be valid anymore.
+ final CapturedThemes themes =
+ InheritedTheme.capture(from: context, to: navigator.context);
+ return GestureDetector(
+ onTap: () {
+ Navigator.of(context).push(
+ MaterialPageRoute<void>(
+ builder: (BuildContext _) {
+ // Wrap the actual child of the route in the previously
+ // captured themes.
+ return themes.wrap(
+ Container(
+ alignment: Alignment.center,
+ color: Colors.white,
+ child: const Text('Hello World'),
+ ),
+ );
+ },
+ ),
+ );
+ },
+ child: const Center(child: Text('Tap Here')),
+ );
+ }
+}
+
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ home: Scaffold(
+ // Override the DefaultTextStyle defined by the Scaffold.
+ // Descendant widgets will inherit this big blue text style.
+ body: DefaultTextStyle(
+ style: TextStyle(fontSize: 48, color: Colors.blue),
+ child: MyAppBody(),
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/interactive_viewer/interactive_viewer.0.dart b/examples/api/lib/widgets/interactive_viewer/interactive_viewer.0.dart
new file mode 100644
index 0000000..06261a6
--- /dev/null
+++ b/examples/api/lib/widgets/interactive_viewer/interactive_viewer.0.dart
@@ -0,0 +1,73 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for InteractiveViewer
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows a simple Container that can be panned and zoomed.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Center(
+ child: InteractiveViewer(
+ boundaryMargin: const EdgeInsets.all(20.0),
+ minScale: 0.1,
+ maxScale: 1.6,
+ child: Container(
+ decoration: const BoxDecoration(
+ gradient: LinearGradient(
+ begin: Alignment.topCenter,
+ end: Alignment.bottomCenter,
+ colors: <Color>[Colors.orange, Colors.red],
+ stops: <double>[0.0, 1.0],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/interactive_viewer/interactive_viewer.builder.0.dart b/examples/api/lib/widgets/interactive_viewer/interactive_viewer.builder.0.dart
new file mode 100644
index 0000000..27ee067
--- /dev/null
+++ b/examples/api/lib/widgets/interactive_viewer/interactive_viewer.builder.0.dart
@@ -0,0 +1,208 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for InteractiveViewer.builder
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows how to use builder to create a [Table] whose cell
+// contents are only built when they are visible. Built and remove cells are
+// logged in the console for illustration.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:vector_math/vector_math_64.dart' show Quad, Vector3;
+
+void main() => runApp(const IVBuilderExampleApp());
+
+class IVBuilderExampleApp extends StatelessWidget {
+ const IVBuilderExampleApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: Scaffold(
+ appBar: AppBar(
+ title: const Text('IV Builder Example'),
+ ),
+ body: _IVBuilderExample(),
+ ),
+ );
+ }
+}
+
+class _IVBuilderExample extends StatefulWidget {
+ @override
+ _IVBuilderExampleState createState() => _IVBuilderExampleState();
+}
+
+class _IVBuilderExampleState extends State<_IVBuilderExample> {
+ final TransformationController _transformationController =
+ TransformationController();
+
+ static const double _cellWidth = 200.0;
+ static const double _cellHeight = 26.0;
+
+ // Returns true iff the given cell is currently visible. Caches viewport
+ // calculations.
+ late Quad _cachedViewport;
+ late int _firstVisibleRow;
+ late int _firstVisibleColumn;
+ late int _lastVisibleRow;
+ late int _lastVisibleColumn;
+ bool _isCellVisible(int row, int column, Quad viewport) {
+ if (viewport != _cachedViewport) {
+ final Rect aabb = _axisAlignedBoundingBox(viewport);
+ _cachedViewport = viewport;
+ _firstVisibleRow = (aabb.top / _cellHeight).floor();
+ _firstVisibleColumn = (aabb.left / _cellWidth).floor();
+ _lastVisibleRow = (aabb.bottom / _cellHeight).floor();
+ _lastVisibleColumn = (aabb.right / _cellWidth).floor();
+ }
+ return row >= _firstVisibleRow &&
+ row <= _lastVisibleRow &&
+ column >= _firstVisibleColumn &&
+ column <= _lastVisibleColumn;
+ }
+
+ // Returns the axis aligned bounding box for the given Quad, which might not
+ // be axis aligned.
+ Rect _axisAlignedBoundingBox(Quad quad) {
+ double? xMin;
+ double? xMax;
+ double? yMin;
+ double? yMax;
+ for (final Vector3 point in <Vector3>[
+ quad.point0,
+ quad.point1,
+ quad.point2,
+ quad.point3
+ ]) {
+ if (xMin == null || point.x < xMin) {
+ xMin = point.x;
+ }
+ if (xMax == null || point.x > xMax) {
+ xMax = point.x;
+ }
+ if (yMin == null || point.y < yMin) {
+ yMin = point.y;
+ }
+ if (yMax == null || point.y > yMax) {
+ yMax = point.y;
+ }
+ }
+ return Rect.fromLTRB(xMin!, yMin!, xMax!, yMax!);
+ }
+
+ void _onChangeTransformation() {
+ setState(() {});
+ }
+
+ @override
+ void initState() {
+ super.initState();
+ _transformationController.addListener(_onChangeTransformation);
+ }
+
+ @override
+ void dispose() {
+ _transformationController.removeListener(_onChangeTransformation);
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Center(
+ child: LayoutBuilder(
+ builder: (BuildContext context, BoxConstraints constraints) {
+ return InteractiveViewer.builder(
+ alignPanAxis: true,
+ scaleEnabled: false,
+ transformationController: _transformationController,
+ builder: (BuildContext context, Quad viewport) {
+ // A simple extension of Table that builds cells.
+ return _TableBuilder(
+ rowCount: 60,
+ columnCount: 6,
+ cellWidth: _cellWidth,
+ builder: (BuildContext context, int row, int column) {
+ if (!_isCellVisible(row, column, viewport)) {
+ print('removing cell ($row, $column)');
+ return Container(height: _cellHeight);
+ }
+ print('building cell ($row, $column)');
+ return Container(
+ height: _cellHeight,
+ color: row % 2 + column % 2 == 1
+ ? Colors.white
+ : Colors.grey.withOpacity(0.1),
+ child: Align(
+ alignment: Alignment.centerLeft,
+ child: Text('$row x $column'),
+ ),
+ );
+ });
+ },
+ );
+ },
+ ),
+ );
+ }
+}
+
+typedef _CellBuilder = Widget Function(
+ BuildContext context, int row, int column);
+
+class _TableBuilder extends StatelessWidget {
+ const _TableBuilder({
+ required this.rowCount,
+ required this.columnCount,
+ required this.cellWidth,
+ required this.builder,
+ }) : assert(rowCount > 0),
+ assert(columnCount > 0);
+
+ final int rowCount;
+ final int columnCount;
+ final double cellWidth;
+ final _CellBuilder builder;
+
+ @override
+ Widget build(BuildContext context) {
+ return Table(
+ // ignore: prefer_const_literals_to_create_immutables
+ columnWidths: <int, TableColumnWidth>{
+ for (int column = 0; column < columnCount; column++)
+ column: FixedColumnWidth(cellWidth),
+ },
+ // ignore: prefer_const_literals_to_create_immutables
+ children: <TableRow>[
+ for (int row = 0; row < rowCount; row++)
+ // ignore: prefer_const_constructors
+ TableRow(
+ // ignore: prefer_const_literals_to_create_immutables
+ children: <Widget>[
+ for (int column = 0; column < columnCount; column++)
+ builder(context, row, column),
+ ],
+ ),
+ ],
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
diff --git a/examples/api/lib/widgets/interactive_viewer/interactive_viewer.constrained.0.dart b/examples/api/lib/widgets/interactive_viewer/interactive_viewer.constrained.0.dart
new file mode 100644
index 0000000..eb8e002
--- /dev/null
+++ b/examples/api/lib/widgets/interactive_viewer/interactive_viewer.constrained.0.dart
@@ -0,0 +1,91 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for InteractiveViewer.constrained
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows how to create a pannable table. Because the table is
+// larger than the entire screen, setting `constrained` to false is necessary
+// to allow it to be drawn to its full size. The parts of the table that
+// exceed the screen size can then be panned into view.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ const int _rowCount = 48;
+ const int _columnCount = 6;
+
+ return InteractiveViewer(
+ alignPanAxis: true,
+ constrained: false,
+ scaleEnabled: false,
+ child: Table(
+ columnWidths: <int, TableColumnWidth>{
+ for (int column = 0; column < _columnCount; column += 1)
+ column: const FixedColumnWidth(200.0),
+ },
+ children: <TableRow>[
+ for (int row = 0; row < _rowCount; row += 1)
+ TableRow(
+ children: <Widget>[
+ for (int column = 0; column < _columnCount; column += 1)
+ Container(
+ height: 26,
+ color: row % 2 + column % 2 == 1
+ ? Colors.white
+ : Colors.grey.withOpacity(0.1),
+ child: Align(
+ alignment: Alignment.centerLeft,
+ child: Text('$row x $column'),
+ ),
+ ),
+ ],
+ ),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/interactive_viewer/interactive_viewer.transformation_controller.0.dart b/examples/api/lib/widgets/interactive_viewer/interactive_viewer.transformation_controller.0.dart
new file mode 100644
index 0000000..9f9a18d
--- /dev/null
+++ b/examples/api/lib/widgets/interactive_viewer/interactive_viewer.transformation_controller.0.dart
@@ -0,0 +1,151 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for InteractiveViewer.transformationController
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows how transformationController can be used to animate the
+// transformation back to its starting position.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ final TransformationController _transformationController =
+ TransformationController();
+ Animation<Matrix4>? _animationReset;
+ late final AnimationController _controllerReset;
+
+ void _onAnimateReset() {
+ _transformationController.value = _animationReset!.value;
+ if (!_controllerReset.isAnimating) {
+ _animationReset!.removeListener(_onAnimateReset);
+ _animationReset = null;
+ _controllerReset.reset();
+ }
+ }
+
+ void _animateResetInitialize() {
+ _controllerReset.reset();
+ _animationReset = Matrix4Tween(
+ begin: _transformationController.value,
+ end: Matrix4.identity(),
+ ).animate(_controllerReset);
+ _animationReset!.addListener(_onAnimateReset);
+ _controllerReset.forward();
+ }
+
+// Stop a running reset to home transform animation.
+ void _animateResetStop() {
+ _controllerReset.stop();
+ _animationReset?.removeListener(_onAnimateReset);
+ _animationReset = null;
+ _controllerReset.reset();
+ }
+
+ void _onInteractionStart(ScaleStartDetails details) {
+ // If the user tries to cause a transformation while the reset animation is
+ // running, cancel the reset animation.
+ if (_controllerReset.status == AnimationStatus.forward) {
+ _animateResetStop();
+ }
+ }
+
+ @override
+ void initState() {
+ super.initState();
+ _controllerReset = AnimationController(
+ vsync: this,
+ duration: const Duration(milliseconds: 400),
+ );
+ }
+
+ @override
+ void dispose() {
+ _controllerReset.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ backgroundColor: Theme.of(context).colorScheme.primary,
+ appBar: AppBar(
+ automaticallyImplyLeading: false,
+ title: const Text('Controller demo'),
+ ),
+ body: Center(
+ child: InteractiveViewer(
+ boundaryMargin: const EdgeInsets.all(double.infinity),
+ transformationController: _transformationController,
+ minScale: 0.1,
+ maxScale: 1.0,
+ onInteractionStart: _onInteractionStart,
+ child: Container(
+ decoration: const BoxDecoration(
+ gradient: LinearGradient(
+ begin: Alignment.topCenter,
+ end: Alignment.bottomCenter,
+ colors: <Color>[Colors.orange, Colors.red],
+ stops: <double>[0.0, 1.0],
+ ),
+ ),
+ ),
+ ),
+ ),
+ persistentFooterButtons: <Widget>[
+ IconButton(
+ onPressed: _animateResetInitialize,
+ tooltip: 'Reset',
+ color: Theme.of(context).colorScheme.surface,
+ icon: const Icon(Icons.replay),
+ ),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/layout_builder/layout_builder.0.dart b/examples/api/lib/widgets/layout_builder/layout_builder.0.dart
new file mode 100644
index 0000000..03cceff
--- /dev/null
+++ b/examples/api/lib/widgets/layout_builder/layout_builder.0.dart
@@ -0,0 +1,96 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for LayoutBuilder
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example uses a [LayoutBuilder] to build a different widget depending on the available width. Resize the
+// DartPad window to see [LayoutBuilder] in action!
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(title: const Text('LayoutBuilder Example')),
+ body: LayoutBuilder(
+ builder: (BuildContext context, BoxConstraints constraints) {
+ if (constraints.maxWidth > 600) {
+ return _buildWideContainers();
+ } else {
+ return _buildNormalContainer();
+ }
+ },
+ ),
+ );
+ }
+
+ Widget _buildNormalContainer() {
+ return Center(
+ child: Container(
+ height: 100.0,
+ width: 100.0,
+ color: Colors.red,
+ ),
+ );
+ }
+
+ Widget _buildWideContainers() {
+ return Center(
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ children: <Widget>[
+ Container(
+ height: 100.0,
+ width: 100.0,
+ color: Colors.red,
+ ),
+ Container(
+ height: 100.0,
+ width: 100.0,
+ color: Colors.yellow,
+ ),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/media_query/media_query_data.system_gesture_insets.0.dart b/examples/api/lib/widgets/media_query/media_query_data.system_gesture_insets.0.dart
new file mode 100644
index 0000000..fec9c60
--- /dev/null
+++ b/examples/api/lib/widgets/media_query/media_query_data.system_gesture_insets.0.dart
@@ -0,0 +1,88 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for MediaQueryData.systemGestureInsets
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// For apps that might be deployed on Android Q devices with full gesture
+// navigation enabled, use [systemGestureInsets] with [Padding]
+// to avoid having the left and right edges of the [Slider] from appearing
+// within the area reserved for system gesture navigation.
+//
+// By default, [Slider]s expand to fill the available width. So, we pad the
+// left and right sides.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ double _currentValue = 0.2;
+
+ @override
+ Widget build(BuildContext context) {
+ final EdgeInsets systemGestureInsets =
+ MediaQuery.of(context).systemGestureInsets;
+ return Scaffold(
+ appBar:
+ AppBar(title: const Text('Pad Slider to avoid systemGestureInsets')),
+ body: Padding(
+ padding: EdgeInsets.only(
+ // only left and right padding are needed here
+ left: systemGestureInsets.left,
+ right: systemGestureInsets.right,
+ ),
+ child: Slider(
+ value: _currentValue,
+ onChanged: (double newValue) {
+ setState(() {
+ _currentValue = newValue;
+ });
+ },
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/navigator/navigator.0.dart b/examples/api/lib/widgets/navigator/navigator.0.dart
new file mode 100644
index 0000000..9e8af24
--- /dev/null
+++ b/examples/api/lib/widgets/navigator/navigator.0.dart
@@ -0,0 +1,168 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Navigator
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+void main() => runApp(const MyApp());
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
+
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: 'Flutter Code Sample for Navigator',
+ // MaterialApp contains our top-level Navigator
+ initialRoute: '/',
+ routes: <String, WidgetBuilder>{
+ '/': (BuildContext context) => const HomePage(),
+ '/signup': (BuildContext context) => const SignUpPage(),
+ },
+ );
+ }
+}
+
+class HomePage extends StatelessWidget {
+ const HomePage({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return DefaultTextStyle(
+ style: Theme.of(context).textTheme.headline4!,
+ child: Container(
+ color: Colors.white,
+ alignment: Alignment.center,
+ child: const Text('Home Page'),
+ ),
+ );
+ }
+}
+
+class CollectPersonalInfoPage extends StatelessWidget {
+ const CollectPersonalInfoPage({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return DefaultTextStyle(
+ style: Theme.of(context).textTheme.headline4!,
+ child: GestureDetector(
+ onTap: () {
+ // This moves from the personal info page to the credentials page,
+ // replacing this page with that one.
+ Navigator.of(context)
+ .pushReplacementNamed('signup/choose_credentials');
+ },
+ child: Container(
+ color: Colors.lightBlue,
+ alignment: Alignment.center,
+ child: const Text('Collect Personal Info Page'),
+ ),
+ ),
+ );
+ }
+}
+
+class ChooseCredentialsPage extends StatelessWidget {
+ const ChooseCredentialsPage({
+ Key? key,
+ required this.onSignupComplete,
+ }) : super(key: key);
+
+ final VoidCallback onSignupComplete;
+
+ @override
+ Widget build(BuildContext context) {
+ return GestureDetector(
+ onTap: onSignupComplete,
+ child: DefaultTextStyle(
+ style: Theme.of(context).textTheme.headline4!,
+ child: Container(
+ color: Colors.pinkAccent,
+ alignment: Alignment.center,
+ child: const Text('Choose Credentials Page'),
+ ),
+ ),
+ );
+ }
+}
+
+class SignUpPage extends StatelessWidget {
+ const SignUpPage({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ // SignUpPage builds its own Navigator which ends up being a nested
+ // Navigator in our app.
+ return Navigator(
+ initialRoute: 'signup/personal_info',
+ onGenerateRoute: (RouteSettings settings) {
+ WidgetBuilder builder;
+ switch (settings.name) {
+ case 'signup/personal_info':
+ // Assume CollectPersonalInfoPage collects personal info and then
+ // navigates to 'signup/choose_credentials'.
+ builder = (BuildContext context) => const CollectPersonalInfoPage();
+ break;
+ case 'signup/choose_credentials':
+ // Assume ChooseCredentialsPage collects new credentials and then
+ // invokes 'onSignupComplete()'.
+ builder = (BuildContext _) => ChooseCredentialsPage(
+ onSignupComplete: () {
+ // Referencing Navigator.of(context) from here refers to the
+ // top level Navigator because SignUpPage is above the
+ // nested Navigator that it created. Therefore, this pop()
+ // will pop the entire "sign up" journey and return to the
+ // "/" route, AKA HomePage.
+ Navigator.of(context).pop();
+ },
+ );
+ break;
+ default:
+ throw Exception('Invalid route: ${settings.name}');
+ }
+ return MaterialPageRoute<void>(builder: builder, settings: settings);
+ },
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/navigator/navigator.restorable_push.0.dart b/examples/api/lib/widgets/navigator/navigator.restorable_push.0.dart
new file mode 100644
index 0000000..573e275
--- /dev/null
+++ b/examples/api/lib/widgets/navigator/navigator.restorable_push.0.dart
@@ -0,0 +1,75 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Navigator.restorablePush
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// Typical usage is as follows:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ static Route<void> _myRouteBuilder(BuildContext context, Object? arguments) {
+ return MaterialPageRoute<void>(
+ builder: (BuildContext context) => const MyStatefulWidget(),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('Sample Code'),
+ ),
+ floatingActionButton: FloatingActionButton(
+ onPressed: () => Navigator.restorablePush(context, _myRouteBuilder),
+ tooltip: 'Increment Counter',
+ child: const Icon(Icons.add),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/navigator/navigator.restorable_push_and_remove_until.0.dart b/examples/api/lib/widgets/navigator/navigator.restorable_push_and_remove_until.0.dart
new file mode 100644
index 0000000..a8575bf
--- /dev/null
+++ b/examples/api/lib/widgets/navigator/navigator.restorable_push_and_remove_until.0.dart
@@ -0,0 +1,79 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Navigator.restorablePushAndRemoveUntil
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// Typical usage is as follows:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ static Route<void> _myRouteBuilder(BuildContext context, Object? arguments) {
+ return MaterialPageRoute<void>(
+ builder: (BuildContext context) => const MyStatefulWidget(),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('Sample Code'),
+ ),
+ floatingActionButton: FloatingActionButton(
+ onPressed: () => Navigator.restorablePushAndRemoveUntil(
+ context,
+ _myRouteBuilder,
+ ModalRoute.withName('/'),
+ ),
+ tooltip: 'Increment Counter',
+ child: const Icon(Icons.add),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/navigator/navigator.restorable_push_replacement.0.dart b/examples/api/lib/widgets/navigator/navigator.restorable_push_replacement.0.dart
new file mode 100644
index 0000000..99e1204
--- /dev/null
+++ b/examples/api/lib/widgets/navigator/navigator.restorable_push_replacement.0.dart
@@ -0,0 +1,76 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Navigator.restorablePushReplacement
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// Typical usage is as follows:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ static Route<void> _myRouteBuilder(BuildContext context, Object? arguments) {
+ return MaterialPageRoute<void>(
+ builder: (BuildContext context) => const MyStatefulWidget(),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('Sample Code'),
+ ),
+ floatingActionButton: FloatingActionButton(
+ onPressed: () =>
+ Navigator.restorablePushReplacement(context, _myRouteBuilder),
+ tooltip: 'Increment Counter',
+ child: const Icon(Icons.add),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/navigator/navigator_state.restorable_push.0.dart b/examples/api/lib/widgets/navigator/navigator_state.restorable_push.0.dart
new file mode 100644
index 0000000..c5de28b
--- /dev/null
+++ b/examples/api/lib/widgets/navigator/navigator_state.restorable_push.0.dart
@@ -0,0 +1,75 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for NavigatorState.restorablePush
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// Typical usage is as follows:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ static Route<void> _myRouteBuilder(BuildContext context, Object? arguments) {
+ return MaterialPageRoute<void>(
+ builder: (BuildContext context) => const MyStatefulWidget(),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('Sample Code'),
+ ),
+ floatingActionButton: FloatingActionButton(
+ onPressed: () => Navigator.of(context).restorablePush(_myRouteBuilder),
+ tooltip: 'Increment Counter',
+ child: const Icon(Icons.add),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/navigator/navigator_state.restorable_push_and_remove_until.0.dart b/examples/api/lib/widgets/navigator/navigator_state.restorable_push_and_remove_until.0.dart
new file mode 100644
index 0000000..f2e6b92
--- /dev/null
+++ b/examples/api/lib/widgets/navigator/navigator_state.restorable_push_and_remove_until.0.dart
@@ -0,0 +1,78 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for NavigatorState.restorablePushAndRemoveUntil
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// Typical usage is as follows:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ static Route<void> _myRouteBuilder(BuildContext context, Object? arguments) {
+ return MaterialPageRoute<void>(
+ builder: (BuildContext context) => const MyStatefulWidget(),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('Sample Code'),
+ ),
+ floatingActionButton: FloatingActionButton(
+ onPressed: () => Navigator.of(context).restorablePushAndRemoveUntil(
+ _myRouteBuilder,
+ ModalRoute.withName('/'),
+ ),
+ tooltip: 'Increment Counter',
+ child: const Icon(Icons.add),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/navigator/navigator_state.restorable_push_replacement.0.dart b/examples/api/lib/widgets/navigator/navigator_state.restorable_push_replacement.0.dart
new file mode 100644
index 0000000..9d1bdf5
--- /dev/null
+++ b/examples/api/lib/widgets/navigator/navigator_state.restorable_push_replacement.0.dart
@@ -0,0 +1,77 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for NavigatorState.restorablePushReplacement
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// Typical usage is as follows:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ static Route<void> _myRouteBuilder(BuildContext context, Object? arguments) {
+ return MaterialPageRoute<void>(
+ builder: (BuildContext context) => const MyStatefulWidget(),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('Sample Code'),
+ ),
+ floatingActionButton: FloatingActionButton(
+ onPressed: () => Navigator.of(context).restorablePushReplacement(
+ _myRouteBuilder,
+ ),
+ tooltip: 'Increment Counter',
+ child: const Icon(Icons.add),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/navigator/restorable_route_future.0.dart b/examples/api/lib/widgets/navigator/restorable_route_future.0.dart
new file mode 100644
index 0000000..7d952ed
--- /dev/null
+++ b/examples/api/lib/widgets/navigator/restorable_route_future.0.dart
@@ -0,0 +1,195 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for RestorableRouteFuture
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example uses a [RestorableRouteFuture] in the `_MyHomeState` to push a
+// new `MyCounter` route and to retrieve its return value.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+void main() => runApp(const MyApp());
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ restorationScopeId: 'app',
+ home: Scaffold(
+ appBar: AppBar(title: const Text('RestorableRouteFuture Example')),
+ body: const MyHome(),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class MyHome extends StatefulWidget {
+ const MyHome({Key? key}) : super(key: key);
+
+ @override
+ State<MyHome> createState() => _MyHomeState();
+}
+
+class _MyHomeState extends State<MyHome> with RestorationMixin {
+ final RestorableInt _lastCount = RestorableInt(0);
+ late RestorableRouteFuture<int> _counterRoute;
+
+ @override
+ String get restorationId => 'home';
+
+ @override
+ void initState() {
+ super.initState();
+ _counterRoute = RestorableRouteFuture<int>(
+ onPresent: (NavigatorState navigator, Object? arguments) {
+ // Defines what route should be shown (and how it should be added
+ // to the navigator) when `RestorableRouteFuture.present` is called.
+ return navigator.restorablePush(
+ _counterRouteBuilder,
+ arguments: arguments,
+ );
+ }, onComplete: (int count) {
+ // Defines what should happen with the return value when the route
+ // completes.
+ setState(() {
+ _lastCount.value = count;
+ });
+ });
+ }
+
+ @override
+ void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
+ // Register the `RestorableRouteFuture` with the state restoration framework.
+ registerForRestoration(_counterRoute, 'route');
+ registerForRestoration(_lastCount, 'count');
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+ _lastCount.dispose();
+ _counterRoute.dispose();
+ }
+
+ // A static `RestorableRouteBuilder` that can re-create the route during
+ // state restoration.
+ static Route<int> _counterRouteBuilder(
+ BuildContext context, Object? arguments) {
+ return MaterialPageRoute<int>(
+ builder: (BuildContext context) => MyCounter(
+ title: arguments!.toString(),
+ ),
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Center(
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ children: <Widget>[
+ Text('Last count: ${_lastCount.value}'),
+ ElevatedButton(
+ onPressed: () {
+ // Show the route defined by the `RestorableRouteFuture`.
+ _counterRoute.present('Awesome Counter');
+ },
+ child: const Text('Open Counter'),
+ ),
+ ],
+ ),
+ );
+ }
+}
+
+// Widget for the route pushed by the `RestorableRouteFuture`.
+class MyCounter extends StatefulWidget {
+ const MyCounter({Key? key, required this.title}) : super(key: key);
+
+ final String title;
+
+ @override
+ State<MyCounter> createState() => _MyCounterState();
+}
+
+class _MyCounterState extends State<MyCounter> with RestorationMixin {
+ final RestorableInt _count = RestorableInt(0);
+
+ @override
+ String get restorationId => 'counter';
+
+ @override
+ void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
+ registerForRestoration(_count, 'count');
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+ _count.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: Text(widget.title),
+ leading: BackButton(
+ onPressed: () {
+ // Return the current count of the counter from this route.
+ Navigator.of(context).pop(_count.value);
+ },
+ ),
+ ),
+ body: Center(
+ child: Text('Count: ${_count.value}'),
+ ),
+ floatingActionButton: FloatingActionButton(
+ child: const Icon(Icons.add),
+ onPressed: () {
+ setState(() {
+ _count.value++;
+ });
+ },
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/navigator/transition_delegate.0.dart b/examples/api/lib/widgets/navigator/transition_delegate.0.dart
new file mode 100644
index 0000000..40bb9a5
--- /dev/null
+++ b/examples/api/lib/widgets/navigator/transition_delegate.0.dart
@@ -0,0 +1,69 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for TransitionDelegate
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following example demonstrates how to implement a subclass that always
+// removes or adds routes without animated transitions and puts the removed
+// routes at the top of the list.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/widgets.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class NoAnimationTransitionDelegate extends TransitionDelegate<void> {
+ @override
+ Iterable<RouteTransitionRecord> resolve({
+ required List<RouteTransitionRecord> newPageRouteHistory,
+ required Map<RouteTransitionRecord?, RouteTransitionRecord>
+ locationToExitingPageRoute,
+ required Map<RouteTransitionRecord?, List<RouteTransitionRecord>>
+ pageRouteToPagelessRoutes,
+ }) {
+ final List<RouteTransitionRecord> results = <RouteTransitionRecord>[];
+
+ for (final RouteTransitionRecord pageRoute in newPageRouteHistory) {
+ if (pageRoute.isWaitingForEnteringDecision) {
+ pageRoute.markForAdd();
+ }
+ results.add(pageRoute);
+ }
+ for (final RouteTransitionRecord exitingPageRoute
+ in locationToExitingPageRoute.values) {
+ if (exitingPageRoute.isWaitingForExitingDecision) {
+ exitingPageRoute.markForRemove();
+ final List<RouteTransitionRecord>? pagelessRoutes =
+ pageRouteToPagelessRoutes[exitingPageRoute];
+ if (pagelessRoutes != null) {
+ for (final RouteTransitionRecord pagelessRoute in pagelessRoutes) {
+ pagelessRoute.markForRemove();
+ }
+ }
+ }
+ results.add(exitingPageRoute);
+ }
+ return results;
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view.0.dart b/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view.0.dart
new file mode 100644
index 0000000..ce4ae4c
--- /dev/null
+++ b/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view.0.dart
@@ -0,0 +1,166 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for NestedScrollView
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ final List<String> _tabs = <String>['Tab 1', 'Tab 2'];
+ return DefaultTabController(
+ length: _tabs.length, // This is the number of tabs.
+ child: Scaffold(
+ body: NestedScrollView(
+ headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
+ // These are the slivers that show up in the "outer" scroll view.
+ return <Widget>[
+ SliverOverlapAbsorber(
+ // This widget takes the overlapping behavior of the SliverAppBar,
+ // and redirects it to the SliverOverlapInjector below. If it is
+ // missing, then it is possible for the nested "inner" scroll view
+ // below to end up under the SliverAppBar even when the inner
+ // scroll view thinks it has not been scrolled.
+ // This is not necessary if the "headerSliverBuilder" only builds
+ // widgets that do not overlap the next sliver.
+ handle:
+ NestedScrollView.sliverOverlapAbsorberHandleFor(context),
+ sliver: SliverAppBar(
+ title:
+ const Text('Books'), // This is the title in the app bar.
+ pinned: true,
+ expandedHeight: 150.0,
+ // The "forceElevated" property causes the SliverAppBar to show
+ // a shadow. The "innerBoxIsScrolled" parameter is true when the
+ // inner scroll view is scrolled beyond its "zero" point, i.e.
+ // when it appears to be scrolled below the SliverAppBar.
+ // Without this, there are cases where the shadow would appear
+ // or not appear inappropriately, because the SliverAppBar is
+ // not actually aware of the precise position of the inner
+ // scroll views.
+ forceElevated: innerBoxIsScrolled,
+ bottom: TabBar(
+ // These are the widgets to put in each tab in the tab bar.
+ tabs: _tabs.map((String name) => Tab(text: name)).toList(),
+ ),
+ ),
+ ),
+ ];
+ },
+ body: TabBarView(
+ // These are the contents of the tab views, below the tabs.
+ children: _tabs.map((String name) {
+ return SafeArea(
+ top: false,
+ bottom: false,
+ child: Builder(
+ // This Builder is needed to provide a BuildContext that is
+ // "inside" the NestedScrollView, so that
+ // sliverOverlapAbsorberHandleFor() can find the
+ // NestedScrollView.
+ builder: (BuildContext context) {
+ return CustomScrollView(
+ // The "controller" and "primary" members should be left
+ // unset, so that the NestedScrollView can control this
+ // inner scroll view.
+ // If the "controller" property is set, then this scroll
+ // view will not be associated with the NestedScrollView.
+ // The PageStorageKey should be unique to this ScrollView;
+ // it allows the list to remember its scroll position when
+ // the tab view is not on the screen.
+ key: PageStorageKey<String>(name),
+ slivers: <Widget>[
+ SliverOverlapInjector(
+ // This is the flip side of the SliverOverlapAbsorber
+ // above.
+ handle:
+ NestedScrollView.sliverOverlapAbsorberHandleFor(
+ context),
+ ),
+ SliverPadding(
+ padding: const EdgeInsets.all(8.0),
+ // In this example, the inner scroll view has
+ // fixed-height list items, hence the use of
+ // SliverFixedExtentList. However, one could use any
+ // sliver widget here, e.g. SliverList or SliverGrid.
+ sliver: SliverFixedExtentList(
+ // The items in this example are fixed to 48 pixels
+ // high. This matches the Material Design spec for
+ // ListTile widgets.
+ itemExtent: 48.0,
+ delegate: SliverChildBuilderDelegate(
+ (BuildContext context, int index) {
+ // This builder is called for each child.
+ // In this example, we just number each list item.
+ return ListTile(
+ title: Text('Item $index'),
+ );
+ },
+ // The childCount of the SliverChildBuilderDelegate
+ // specifies how many children this inner list
+ // has. In this example, each tab has a list of
+ // exactly 30 items, but this is arbitrary.
+ childCount: 30,
+ ),
+ ),
+ ),
+ ],
+ );
+ },
+ ),
+ );
+ }).toList(),
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view.1.dart b/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view.1.dart
new file mode 100644
index 0000000..8e982d1
--- /dev/null
+++ b/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view.1.dart
@@ -0,0 +1,81 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for NestedScrollView
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: NestedScrollView(
+ // Setting floatHeaderSlivers to true is required in order to float
+ // the outer slivers over the inner scrollable.
+ floatHeaderSlivers: true,
+ headerSliverBuilder:
+ (BuildContext context, bool innerBoxIsScrolled) {
+ return <Widget>[
+ SliverAppBar(
+ title: const Text('Floating Nested SliverAppBar'),
+ floating: true,
+ expandedHeight: 200.0,
+ forceElevated: innerBoxIsScrolled,
+ ),
+ ];
+ },
+ body: ListView.builder(
+ padding: const EdgeInsets.all(8),
+ itemCount: 30,
+ itemBuilder: (BuildContext context, int index) {
+ return SizedBox(
+ height: 50,
+ child: Center(child: Text('Item $index')),
+ );
+ })));
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view.2.dart b/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view.2.dart
new file mode 100644
index 0000000..da5a1dc
--- /dev/null
+++ b/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view.2.dart
@@ -0,0 +1,94 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for NestedScrollView
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: NestedScrollView(headerSliverBuilder:
+ (BuildContext context, bool innerBoxIsScrolled) {
+ return <Widget>[
+ SliverOverlapAbsorber(
+ handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
+ sliver: SliverAppBar(
+ title: const Text('Snapping Nested SliverAppBar'),
+ floating: true,
+ snap: true,
+ expandedHeight: 200.0,
+ forceElevated: innerBoxIsScrolled,
+ ),
+ )
+ ];
+ }, body: Builder(builder: (BuildContext context) {
+ return CustomScrollView(
+ // The "controller" and "primary" members should be left
+ // unset, so that the NestedScrollView can control this
+ // inner scroll view.
+ // If the "controller" property is set, then this scroll
+ // view will not be associated with the NestedScrollView.
+ slivers: <Widget>[
+ SliverOverlapInjector(
+ handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)),
+ SliverFixedExtentList(
+ itemExtent: 48.0,
+ delegate: SliverChildBuilderDelegate(
+ (BuildContext context, int index) =>
+ ListTile(title: Text('Item $index')),
+ childCount: 30,
+ ),
+ ),
+ ],
+ );
+ })));
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view_state.0.dart b/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view_state.0.dart
new file mode 100644
index 0000000..434342a
--- /dev/null
+++ b/examples/api/lib/widgets/nested_scroll_view/nested_scroll_view_state.0.dart
@@ -0,0 +1,81 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for NestedScrollViewState
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// [NestedScrollViewState] can be obtained using a [GlobalKey].
+// Using the following setup, you can access the inner scroll controller
+// using `globalKey.currentState.innerController`.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+final GlobalKey<NestedScrollViewState> globalKey = GlobalKey();
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ @override
+ Widget build(BuildContext context) {
+ return NestedScrollView(
+ key: globalKey,
+ headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
+ return const <Widget>[
+ SliverAppBar(
+ title: Text('NestedScrollViewState Demo!'),
+ ),
+ ];
+ },
+ body: const CustomScrollView(
+ // Body slivers go here!
+ ),
+ );
+ }
+
+ ScrollController get innerController {
+ return globalKey.currentState!.innerController;
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/notification_listener/notification.0.dart b/examples/api/lib/widgets/notification_listener/notification.0.dart
new file mode 100644
index 0000000..02ea516
--- /dev/null
+++ b/examples/api/lib/widgets/notification_listener/notification.0.dart
@@ -0,0 +1,116 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Notification
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example shows a [NotificationListener] widget
+// that listens for [ScrollNotification] notifications. When a scroll
+// event occurs in the [NestedScrollView],
+// this widget is notified. The events could be either a
+// [ScrollStartNotification]or[ScrollEndNotification].
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ const List<String> _tabs = <String>['Months', 'Days'];
+ const List<String> _months = <String>[
+ 'January',
+ 'February',
+ 'March',
+ ];
+ const List<String> _days = <String>[
+ 'Sunday',
+ 'Monday',
+ 'Tuesday',
+ ];
+ return DefaultTabController(
+ length: _tabs.length,
+ child: Scaffold(
+ // Listens to the scroll events and returns the current position.
+ body: NotificationListener<ScrollNotification>(
+ onNotification: (ScrollNotification scrollNotification) {
+ if (scrollNotification is ScrollStartNotification) {
+ print('Scrolling has started');
+ } else if (scrollNotification is ScrollEndNotification) {
+ print('Scrolling has ended');
+ }
+ // Return true to cancel the notification bubbling.
+ return true;
+ },
+ child: NestedScrollView(
+ headerSliverBuilder:
+ (BuildContext context, bool innerBoxIsScrolled) {
+ return <Widget>[
+ SliverAppBar(
+ title: const Text('Flutter Code Sample'),
+ pinned: true,
+ floating: true,
+ bottom: TabBar(
+ tabs: _tabs.map((String name) => Tab(text: name)).toList(),
+ ),
+ ),
+ ];
+ },
+ body: TabBarView(
+ children: <Widget>[
+ ListView.builder(
+ itemCount: _months.length,
+ itemBuilder: (BuildContext context, int index) {
+ return ListTile(title: Text(_months[index]));
+ },
+ ),
+ ListView.builder(
+ itemCount: _days.length,
+ itemBuilder: (BuildContext context, int index) {
+ return ListTile(title: Text(_days[index]));
+ },
+ ),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/overflow_bar/overflow_bar.0.dart b/examples/api/lib/widgets/overflow_bar/overflow_bar.0.dart
new file mode 100644
index 0000000..e210d23
--- /dev/null
+++ b/examples/api/lib/widgets/overflow_bar/overflow_bar.0.dart
@@ -0,0 +1,100 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for OverflowBar
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example defines a simple approximation of a dialog
+// layout, where the layout of the dialog's action buttons are
+// defined by an [OverflowBar]. The content is wrapped in a
+// [SingleChildScrollView], so that if overflow occurs, the
+// action buttons will still be accessible by scrolling,
+// no matter how much vertical space is available.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatelessWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Container(
+ alignment: Alignment.center,
+ padding: const EdgeInsets.all(16),
+ color: Colors.black.withOpacity(0.15),
+ child: Material(
+ color: Colors.white,
+ elevation: 24,
+ shape: const RoundedRectangleBorder(
+ borderRadius: BorderRadius.all(Radius.circular(4))),
+ child: Padding(
+ padding: const EdgeInsets.all(8),
+ child: SingleChildScrollView(
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: <Widget>[
+ const SizedBox(height: 128, child: Placeholder()),
+ Align(
+ alignment: AlignmentDirectional.centerEnd,
+ child: OverflowBar(
+ spacing: 8,
+ overflowAlignment: OverflowBarAlignment.end,
+ children: <Widget>[
+ TextButton(child: const Text('Cancel'), onPressed: () {}),
+ TextButton(
+ child: const Text('Really Really Cancel'),
+ onPressed: () {}),
+ OutlinedButton(child: const Text('OK'), onPressed: () {}),
+ ],
+ ),
+ ),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/overscroll_indicator/glowing_overscroll_indicator.0.dart b/examples/api/lib/widgets/overscroll_indicator/glowing_overscroll_indicator.0.dart
new file mode 100644
index 0000000..04da096
--- /dev/null
+++ b/examples/api/lib/widgets/overscroll_indicator/glowing_overscroll_indicator.0.dart
@@ -0,0 +1,82 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for GlowingOverscrollIndicator
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example demonstrates how to use a [NotificationListener] to manipulate
+// the placement of a [GlowingOverscrollIndicator] when building a
+// [CustomScrollView]. Drag the scrollable to see the bounds of the overscroll
+// indicator.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ final double leadingPaintOffset =
+ MediaQuery.of(context).padding.top + AppBar().preferredSize.height;
+ return NotificationListener<OverscrollIndicatorNotification>(
+ onNotification: (OverscrollIndicatorNotification notification) {
+ if (notification.leading) {
+ notification.paintOffset = leadingPaintOffset;
+ }
+ return false;
+ },
+ child: CustomScrollView(
+ slivers: <Widget>[
+ const SliverAppBar(title: Text('Custom PaintOffset')),
+ SliverToBoxAdapter(
+ child: Container(
+ color: Colors.amberAccent,
+ height: 100,
+ child: const Center(child: Text('Glow all day!')),
+ ),
+ ),
+ const SliverFillRemaining(child: FlutterLogo()),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/overscroll_indicator/glowing_overscroll_indicator.1.dart b/examples/api/lib/widgets/overscroll_indicator/glowing_overscroll_indicator.1.dart
new file mode 100644
index 0000000..a9edb9e
--- /dev/null
+++ b/examples/api/lib/widgets/overscroll_indicator/glowing_overscroll_indicator.1.dart
@@ -0,0 +1,78 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for GlowingOverscrollIndicator
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This example demonstrates how to use a [NestedScrollView] to manipulate the
+// placement of a [GlowingOverscrollIndicator] when building a
+// [CustomScrollView]. Drag the scrollable to see the bounds of the overscroll
+// indicator.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return NestedScrollView(
+ headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
+ return const <Widget>[
+ SliverAppBar(title: Text('Custom NestedScrollViews')),
+ ];
+ },
+ body: CustomScrollView(
+ slivers: <Widget>[
+ SliverToBoxAdapter(
+ child: Container(
+ color: Colors.amberAccent,
+ height: 100,
+ child: const Center(child: Text('Glow all day!')),
+ ),
+ ),
+ const SliverFillRemaining(child: FlutterLogo()),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/page_storage/page_storage.0.dart b/examples/api/lib/widgets/page_storage/page_storage.0.dart
new file mode 100644
index 0000000..d25dbb4
--- /dev/null
+++ b/examples/api/lib/widgets/page_storage/page_storage.0.dart
@@ -0,0 +1,125 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for PageStorage
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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].
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+void main() => runApp(const MyApp());
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
+
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ home: MyHomePage(),
+ );
+ }
+}
+
+class MyHomePage extends StatefulWidget {
+ const MyHomePage({Key? key}) : super(key: key);
+
+ @override
+ State<MyHomePage> createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+ final List<Widget> pages = const <Widget>[
+ ColorBoxPage(
+ key: PageStorageKey<String>('pageOne'),
+ ),
+ ColorBoxPage(
+ key: PageStorageKey<String>('pageTwo'),
+ )
+ ];
+ int currentTab = 0;
+ final PageStorageBucket _bucket = PageStorageBucket();
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('Persistence Example'),
+ ),
+ body: PageStorage(
+ child: pages[currentTab],
+ bucket: _bucket,
+ ),
+ bottomNavigationBar: BottomNavigationBar(
+ currentIndex: currentTab,
+ onTap: (int index) {
+ setState(() {
+ currentTab = index;
+ });
+ },
+ items: const <BottomNavigationBarItem>[
+ BottomNavigationBarItem(
+ icon: Icon(Icons.home),
+ label: 'page 1',
+ ),
+ BottomNavigationBarItem(
+ icon: Icon(Icons.settings),
+ label: 'page2',
+ ),
+ ],
+ ),
+ );
+ }
+}
+
+class ColorBoxPage extends StatelessWidget {
+ const ColorBoxPage({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return ListView.builder(
+ itemExtent: 250.0,
+ itemBuilder: (BuildContext context, int index) => Container(
+ padding: const EdgeInsets.all(10.0),
+ child: Material(
+ color: index.isEven ? Colors.cyan : Colors.deepOrange,
+ child: Center(
+ child: Text(index.toString()),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/page_view/page_view.0.dart b/examples/api/lib/widgets/page_view/page_view.0.dart
new file mode 100644
index 0000000..a4e0038
--- /dev/null
+++ b/examples/api/lib/widgets/page_view/page_view.0.dart
@@ -0,0 +1,75 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for PageView
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// Here is an example of [PageView]. It creates a centered [Text] in each of the three pages
+// which scroll horizontally.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ final PageController controller = PageController(initialPage: 0);
+ return PageView(
+ /// [PageView.scrollDirection] defaults to [Axis.horizontal].
+ /// Use [Axis.vertical] to scroll vertically.
+ scrollDirection: Axis.horizontal,
+ controller: controller,
+ children: const <Widget>[
+ Center(
+ child: Text('First Page'),
+ ),
+ Center(
+ child: Text('Second Page'),
+ ),
+ Center(
+ child: Text('Third Page'),
+ )
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/preferred_size/preferred_size.0.dart b/examples/api/lib/widgets/preferred_size/preferred_size.0.dart
new file mode 100644
index 0000000..123dfc1
--- /dev/null
+++ b/examples/api/lib/widgets/preferred_size/preferred_size.0.dart
@@ -0,0 +1,119 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for PreferredSize
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample shows a custom widget, similar to an [AppBar], which uses a
+// [PreferredSize] widget, with its height set to 80 logical pixels.
+// Changing the [PreferredSize] can be used to change the height
+// of the custom app bar.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class AppBarContent extends StatelessWidget {
+ const AppBarContent({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ mainAxisAlignment: MainAxisAlignment.end,
+ children: <Widget>[
+ Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 10),
+ child: Row(
+ children: <Widget>[
+ const Text(
+ 'PreferredSize Sample',
+ style: TextStyle(color: Colors.white),
+ ),
+ const Spacer(),
+ IconButton(
+ icon: const Icon(
+ Icons.search,
+ size: 20,
+ ),
+ color: Colors.white,
+ onPressed: () {},
+ ),
+ IconButton(
+ icon: const Icon(
+ Icons.more_vert,
+ size: 20,
+ ),
+ color: Colors.white,
+ onPressed: () {},
+ ),
+ ],
+ ),
+ ),
+ ],
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: PreferredSize(
+ preferredSize: const Size.fromHeight(80.0),
+ child: Container(
+ decoration: const BoxDecoration(
+ gradient: LinearGradient(
+ colors: <Color>[Colors.blue, Colors.pink],
+ ),
+ ),
+ child: const AppBarContent(),
+ ),
+ ),
+ body: const Center(
+ child: Text('Content'),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/restoration_properties/restorable_value.0.dart b/examples/api/lib/widgets/restoration_properties/restorable_value.0.dart
new file mode 100644
index 0000000..2547b17
--- /dev/null
+++ b/examples/api/lib/widgets/restoration_properties/restorable_value.0.dart
@@ -0,0 +1,102 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_restoration.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for RestorableValue
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// A [StatefulWidget] that has a restorable [int] property.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return WidgetsApp(
+ title: 'Flutter Code Sample',
+ home: const Center(
+ child: MyStatefulWidget(restorationId: 'main'),
+ ),
+ color: const Color(0xffffffff),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key, this.restorationId}) : super(key: key);
+
+ final String? restorationId;
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// RestorationProperty objects can be used because of RestorationMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with RestorationMixin {
+ // In this example, the restoration ID for the mixin is passed in through
+ // the [StatefulWidget]'s constructor.
+ @override
+ String? get restorationId => widget.restorationId;
+
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ // The current value of the answer is stored in a [RestorableProperty].
+ // During state restoration it is automatically restored to its old value.
+ // If no restoration data is available to restore the answer from, it is
+ // initialized to the specified default value, in this case 42.
+ final RestorableInt _answer = RestorableInt(42);
+
+ @override
+ void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
+ // All restorable properties must be registered with the mixin. After
+ // registration, the answer either has its old value restored or is
+ // initialized to its default value.
+ registerForRestoration(_answer, 'answer');
+ }
+
+ void _incrementAnswer() {
+ setState(() {
+ // The current value of the property can be accessed and modified via
+ // the value getter and setter.
+ _answer.value += 1;
+ });
+ }
+
+ @override
+ void dispose() {
+ // Properties must be disposed when no longer used.
+ _answer.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return OutlinedButton(
+ child: Text('${_answer.value}'),
+ onPressed: _incrementAnswer,
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/routes/show_general_dialog.0.dart b/examples/api/lib/widgets/routes/show_general_dialog.0.dart
new file mode 100644
index 0000000..5214a43
--- /dev/null
+++ b/examples/api/lib/widgets/routes/show_general_dialog.0.dart
@@ -0,0 +1,82 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_restoration_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for showGeneralDialog
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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}
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ restorationScopeId: 'app',
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: OutlinedButton(
+ onPressed: () {
+ Navigator.of(context).restorablePush(_dialogBuilder);
+ },
+ child: const Text('Open Dialog'),
+ ),
+ ),
+ );
+ }
+
+ static Route<Object?> _dialogBuilder(
+ BuildContext context, Object? arguments) {
+ return RawDialogRoute<void>(
+ pageBuilder: (
+ BuildContext context,
+ Animation<double> animation,
+ Animation<double> secondaryAnimation,
+ ) {
+ return const AlertDialog(title: Text('Alert!'));
+ },
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/scroll_position/scroll_metrics_notification.0.dart b/examples/api/lib/widgets/scroll_position/scroll_metrics_notification.0.dart
new file mode 100644
index 0000000..27bde4c
--- /dev/null
+++ b/examples/api/lib/widgets/scroll_position/scroll_metrics_notification.0.dart
@@ -0,0 +1,80 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/freeform.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for ScrollMetricsNotification
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample shows how a [ScrollMetricsNotification] is dispatched when
+// the `windowSize` is changed. Press the floating action button to increase
+// the scrollable window's size.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//*************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-main ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const ScrollMetricsDemo());
+
+class ScrollMetricsDemo extends StatefulWidget {
+ const ScrollMetricsDemo({Key? key}) : super(key: key);
+
+ @override
+ State<ScrollMetricsDemo> createState() => ScrollMetricsDemoState();
+}
+
+class ScrollMetricsDemoState extends State<ScrollMetricsDemo> {
+ double windowSize = 200.0;
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: Scaffold(
+ appBar: AppBar(
+ title: const Text('ScrollMetrics Demo'),
+ ),
+ floatingActionButton: FloatingActionButton(
+ child: const Icon(Icons.add),
+ onPressed: () => setState(() {
+ windowSize += 10.0;
+ }),
+ ),
+ body: NotificationListener<ScrollMetricsNotification>(
+ onNotification: (ScrollMetricsNotification notification) {
+ ScaffoldMessenger.of(notification.context).showSnackBar(
+ const SnackBar(
+ content: Text('Scroll metrics changed!'),
+ ),
+ );
+ return false;
+ },
+ child: Scrollbar(
+ isAlwaysShown: true,
+ child: SizedBox(
+ height: windowSize,
+ width: double.infinity,
+ child: const SingleChildScrollView(
+ child: FlutterLogo(
+ size: 300.0,
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-main ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*************************************************************************
diff --git a/examples/api/lib/widgets/scroll_view/custom_scroll_view.1.dart b/examples/api/lib/widgets/scroll_view/custom_scroll_view.1.dart
new file mode 100644
index 0000000..827328b
--- /dev/null
+++ b/examples/api/lib/widgets/scroll_view/custom_scroll_view.1.dart
@@ -0,0 +1,116 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for CustomScrollView
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// By default, if items are inserted at the "top" of a scrolling container like
+// [ListView] or [CustomScrollView], the top item and all of the items below it
+// are scrolled downwards. In some applications, it's preferable to have the
+// top of the list just grow upwards, without changing the scroll position.
+// This example demonstrates how to do that with a [CustomScrollView] with
+// two [SliverList] children, and the [CustomScrollView.center] set to the key
+// of the bottom SliverList. The top one SliverList will grow upwards, and the
+// bottom SliverList will grow downwards.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ List<int> top = <int>[];
+ List<int> bottom = <int>[0];
+
+ @override
+ Widget build(BuildContext context) {
+ const Key centerKey = ValueKey<String>('bottom-sliver-list');
+ return Scaffold(
+ appBar: AppBar(
+ title: const Text('Press on the plus to add items above and below'),
+ leading: IconButton(
+ icon: const Icon(Icons.add),
+ onPressed: () {
+ setState(() {
+ top.add(-top.length - 1);
+ bottom.add(bottom.length);
+ });
+ },
+ ),
+ ),
+ body: CustomScrollView(
+ center: centerKey,
+ slivers: <Widget>[
+ SliverList(
+ delegate: SliverChildBuilderDelegate(
+ (BuildContext context, int index) {
+ return Container(
+ alignment: Alignment.center,
+ color: Colors.blue[200 + top[index] % 4 * 100],
+ height: 100 + top[index] % 4 * 20.0,
+ child: Text('Item: ${top[index]}'),
+ );
+ },
+ childCount: top.length,
+ ),
+ ),
+ SliverList(
+ key: centerKey,
+ delegate: SliverChildBuilderDelegate(
+ (BuildContext context, int index) {
+ return Container(
+ alignment: Alignment.center,
+ color: Colors.blue[200 + bottom[index] % 4 * 100],
+ height: 100 + bottom[index] % 4 * 20.0,
+ child: Text('Item: ${bottom[index]}'),
+ );
+ },
+ childCount: bottom.length,
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/scrollbar/raw_scrollbar.0.dart b/examples/api/lib/widgets/scrollbar/raw_scrollbar.0.dart
new file mode 100644
index 0000000..f6c497d
--- /dev/null
+++ b/examples/api/lib/widgets/scrollbar/raw_scrollbar.0.dart
@@ -0,0 +1,121 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for RawScrollbar
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample shows an app with two scrollables in the same route. Since by
+// default, there is one [PrimaryScrollController] per route, and they both have a
+// scroll direction of [Axis.vertical], they would both try to attach to that
+// controller. The [Scrollbar] cannot support multiple positions attached to
+// the same controller, so one [ListView], and its [Scrollbar] have been
+// provided a unique [ScrollController].
+//
+// Alternatively, a new PrimaryScrollController could be created above one of
+// the [ListView]s.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ final ScrollController _firstController = ScrollController();
+
+ @override
+ Widget build(BuildContext context) {
+ return LayoutBuilder(
+ builder: (BuildContext context, BoxConstraints constraints) {
+ return Row(
+ children: <Widget>[
+ SizedBox(
+ width: constraints.maxWidth / 2,
+ // Only one scroll position can be attached to the
+ // PrimaryScrollController if using Scrollbars. Providing a
+ // unique scroll controller to this scroll view prevents it
+ // from attaching to the PrimaryScrollController.
+ child: Scrollbar(
+ isAlwaysShown: true,
+ controller: _firstController,
+ child: ListView.builder(
+ controller: _firstController,
+ itemCount: 100,
+ itemBuilder: (BuildContext context, int index) {
+ return Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: Text('Scrollable 1 : Index $index'),
+ );
+ }),
+ )),
+ SizedBox(
+ width: constraints.maxWidth / 2,
+ // This vertical scroll view has not been provided a
+ // ScrollController, so it is using the
+ // PrimaryScrollController.
+ child: Scrollbar(
+ isAlwaysShown: true,
+ child: ListView.builder(
+ itemCount: 100,
+ itemBuilder: (BuildContext context, int index) {
+ return Container(
+ height: 50,
+ color: index.isEven
+ ? Colors.amberAccent
+ : Colors.blueAccent,
+ child: Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: Text('Scrollable 2 : Index $index'),
+ ));
+ }),
+ )),
+ ],
+ );
+ });
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/scrollbar/raw_scrollbar.1.dart b/examples/api/lib/widgets/scrollbar/raw_scrollbar.1.dart
new file mode 100644
index 0000000..08b2bda
--- /dev/null
+++ b/examples/api/lib/widgets/scrollbar/raw_scrollbar.1.dart
@@ -0,0 +1,72 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for RawScrollbar
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample shows a [RawScrollbar] that executes a fade animation as
+// scrolling occurs. The RawScrollbar will fade into view as the user scrolls,
+// and fade out when scrolling stops. The [GridView] uses the
+// [PrimaryScrollController] since it has an [Axis.vertical] scroll direction
+// and has not been provided a [ScrollController].
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return RawScrollbar(
+ child: GridView.builder(
+ itemCount: 120,
+ gridDelegate:
+ const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
+ itemBuilder: (BuildContext context, int index) {
+ return Center(
+ child: Text('item $index'),
+ );
+ },
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/scrollbar/raw_scrollbar.2.dart b/examples/api/lib/widgets/scrollbar/raw_scrollbar.2.dart
new file mode 100644
index 0000000..e9b8ec9
--- /dev/null
+++ b/examples/api/lib/widgets/scrollbar/raw_scrollbar.2.dart
@@ -0,0 +1,83 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for RawScrollbar
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// When `isAlwaysShown` is true, the scrollbar thumb will remain visible without
+// the fade animation. This requires that a [ScrollController] is provided to
+// `controller` for both the [RawScrollbar] and the [GridView].
+// Alternatively, the [PrimaryScrollController] can be used automatically so long
+// as it is attached to the singular [ScrollPosition] associated with the GridView.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatefulWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ final ScrollController _controllerOne = ScrollController();
+
+ @override
+ Widget build(BuildContext context) {
+ return RawScrollbar(
+ controller: _controllerOne,
+ isAlwaysShown: true,
+ child: GridView.builder(
+ controller: _controllerOne,
+ itemCount: 120,
+ gridDelegate:
+ const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
+ itemBuilder: (BuildContext context, int index) {
+ return Center(
+ child: Text('item $index'),
+ );
+ },
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/shortcuts/character_activator.0.dart b/examples/api/lib/widgets/shortcuts/character_activator.0.dart
new file mode 100644
index 0000000..392d988
--- /dev/null
+++ b/examples/api/lib/widgets/shortcuts/character_activator.0.dart
@@ -0,0 +1,100 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for CharacterActivator
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// In the following example, when a key combination results in a question mark,
+// the counter is increased:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class HelpMenuIntent extends Intent {
+ const HelpMenuIntent();
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ @override
+ Widget build(BuildContext context) {
+ return Shortcuts(
+ shortcuts: const <ShortcutActivator, Intent>{
+ CharacterActivator('?'): HelpMenuIntent(),
+ },
+ child: Actions(
+ actions: <Type, Action<Intent>>{
+ HelpMenuIntent: CallbackAction<HelpMenuIntent>(
+ onInvoke: (HelpMenuIntent intent) {
+ ScaffoldMessenger.of(context).showSnackBar(
+ const SnackBar(content: Text('Keep calm and carry on!')),
+ );
+ return null;
+ },
+ ),
+ },
+ child: Focus(
+ autofocus: true,
+ child: Column(
+ children: const <Widget>[
+ Text('Press question mark for help'),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/shortcuts/logical_key_set.0.dart b/examples/api/lib/widgets/shortcuts/logical_key_set.0.dart
new file mode 100644
index 0000000..fe5103a
--- /dev/null
+++ b/examples/api/lib/widgets/shortcuts/logical_key_set.0.dart
@@ -0,0 +1,116 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for LogicalKeySet
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// In the following example, the counter is increased when the following key
+// sequences are pressed:
+//
+// * Control left, then C.
+// * Control right, then C.
+// * C, then Control left.
+//
+// But not when:
+//
+// * Control left, then A, then C.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/services.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class IncrementIntent extends Intent {
+ const IncrementIntent();
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ int count = 0;
+
+ @override
+ Widget build(BuildContext context) {
+ return Shortcuts(
+ shortcuts: <ShortcutActivator, Intent>{
+ LogicalKeySet(LogicalKeyboardKey.keyC, LogicalKeyboardKey.controlLeft):
+ const IncrementIntent(),
+ },
+ child: Actions(
+ actions: <Type, Action<Intent>>{
+ IncrementIntent: CallbackAction<IncrementIntent>(
+ onInvoke: (IncrementIntent intent) => setState(() {
+ count = count + 1;
+ }),
+ ),
+ },
+ child: Focus(
+ autofocus: true,
+ child: Column(
+ children: <Widget>[
+ const Text('Add to the counter by pressing Ctrl+C'),
+ Text('count: $count'),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/shortcuts/shortcuts.0.dart b/examples/api/lib/widgets/shortcuts/shortcuts.0.dart
new file mode 100644
index 0000000..f8448e2
--- /dev/null
+++ b/examples/api/lib/widgets/shortcuts/shortcuts.0.dart
@@ -0,0 +1,124 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Shortcuts
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// Here, we will use the [Shortcuts] and [Actions] widgets to add and subtract
+// from a counter. When the child widget has keyboard focus, and a user presses
+// the keys that have been defined in [Shortcuts], the action that is bound
+// to the appropriate [Intent] for the key is invoked.
+//
+// It also shows the use of a [CallbackAction] to avoid creating a new [Action]
+// subclass.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/services.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class IncrementIntent extends Intent {
+ const IncrementIntent();
+}
+
+class DecrementIntent extends Intent {
+ const DecrementIntent();
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ int count = 0;
+
+ @override
+ Widget build(BuildContext context) {
+ return Shortcuts(
+ shortcuts: <ShortcutActivator, Intent>{
+ LogicalKeySet(LogicalKeyboardKey.arrowUp): const IncrementIntent(),
+ LogicalKeySet(LogicalKeyboardKey.arrowDown): const DecrementIntent(),
+ },
+ child: Actions(
+ actions: <Type, Action<Intent>>{
+ IncrementIntent: CallbackAction<IncrementIntent>(
+ onInvoke: (IncrementIntent intent) => setState(() {
+ count = count + 1;
+ }),
+ ),
+ DecrementIntent: CallbackAction<DecrementIntent>(
+ onInvoke: (DecrementIntent intent) => setState(() {
+ count = count - 1;
+ }),
+ ),
+ },
+ child: Focus(
+ autofocus: true,
+ child: Column(
+ children: <Widget>[
+ const Text('Add to the counter by pressing the up arrow key'),
+ const Text(
+ 'Subtract from the counter by pressing the down arrow key'),
+ Text('count: $count'),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/shortcuts/shortcuts.1.dart b/examples/api/lib/widgets/shortcuts/shortcuts.1.dart
new file mode 100644
index 0000000..a556b2a
--- /dev/null
+++ b/examples/api/lib/widgets/shortcuts/shortcuts.1.dart
@@ -0,0 +1,164 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Shortcuts
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This slightly more complicated, but more flexible, example creates a custom
+// [Action] subclass to increment and decrement within a widget (a [Column])
+// that has keyboard focus. When the user presses the up and down arrow keys,
+// the counter will increment and decrement a data model using the custom
+// actions.
+//
+// One thing that this demonstrates is passing arguments to the [Intent] to be
+// carried to the [Action]. This shows how 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).
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/services.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class Model with ChangeNotifier {
+ int count = 0;
+ void incrementBy(int amount) {
+ count += amount;
+ notifyListeners();
+ }
+
+ void decrementBy(int amount) {
+ count -= amount;
+ notifyListeners();
+ }
+}
+
+class IncrementIntent extends Intent {
+ const IncrementIntent(this.amount);
+
+ final int amount;
+}
+
+class DecrementIntent extends Intent {
+ const DecrementIntent(this.amount);
+
+ final int amount;
+}
+
+class IncrementAction extends Action<IncrementIntent> {
+ IncrementAction(this.model);
+
+ final Model model;
+
+ @override
+ void invoke(covariant IncrementIntent intent) {
+ model.incrementBy(intent.amount);
+ }
+}
+
+class DecrementAction extends Action<DecrementIntent> {
+ DecrementAction(this.model);
+
+ final Model model;
+
+ @override
+ void invoke(covariant DecrementIntent intent) {
+ model.decrementBy(intent.amount);
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Model model = Model();
+
+ @override
+ Widget build(BuildContext context) {
+ return Shortcuts(
+ shortcuts: <ShortcutActivator, Intent>{
+ LogicalKeySet(LogicalKeyboardKey.arrowUp): const IncrementIntent(2),
+ LogicalKeySet(LogicalKeyboardKey.arrowDown): const DecrementIntent(2),
+ },
+ child: Actions(
+ actions: <Type, Action<Intent>>{
+ IncrementIntent: IncrementAction(model),
+ DecrementIntent: DecrementAction(model),
+ },
+ child: Focus(
+ autofocus: true,
+ child: Column(
+ children: <Widget>[
+ const Text('Add to the counter by pressing the up arrow key'),
+ const Text(
+ 'Subtract from the counter by pressing the down arrow key'),
+ AnimatedBuilder(
+ animation: model,
+ builder: (BuildContext context, Widget? child) {
+ return Text('count: ${model.count}');
+ },
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/shortcuts/single_activator.single_activator.0.dart b/examples/api/lib/widgets/shortcuts/single_activator.single_activator.0.dart
new file mode 100644
index 0000000..f1ad662
--- /dev/null
+++ b/examples/api/lib/widgets/shortcuts/single_activator.single_activator.0.dart
@@ -0,0 +1,107 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SingleActivator.SingleActivator
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// In the following example, the shortcut `Control + C` increases the counter:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+//****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'package:flutter/services.dart';
+
+//* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//****************************************************************************
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class IncrementIntent extends Intent {
+ const IncrementIntent();
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ int count = 0;
+
+ @override
+ Widget build(BuildContext context) {
+ return Shortcuts(
+ shortcuts: const <ShortcutActivator, Intent>{
+ SingleActivator(LogicalKeyboardKey.keyC, control: true):
+ IncrementIntent(),
+ },
+ child: Actions(
+ actions: <Type, Action<Intent>>{
+ IncrementIntent: CallbackAction<IncrementIntent>(
+ onInvoke: (IncrementIntent intent) => setState(() {
+ count = count + 1;
+ }),
+ ),
+ },
+ child: Focus(
+ autofocus: true,
+ child: Column(
+ children: <Widget>[
+ const Text('Add to the counter by pressing Ctrl+C'),
+ Text('count: $count'),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/single_child_scroll_view/single_child_scroll_view.0.dart b/examples/api/lib/widgets/single_child_scroll_view/single_child_scroll_view.0.dart
new file mode 100644
index 0000000..2dbb01a
--- /dev/null
+++ b/examples/api/lib/widgets/single_child_scroll_view/single_child_scroll_view.0.dart
@@ -0,0 +1,92 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SingleChildScrollView
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ 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'),
+ ),
+ ],
+ ),
+ ),
+ );
+ },
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/single_child_scroll_view/single_child_scroll_view.1.dart b/examples/api/lib/widgets/single_child_scroll_view/single_child_scroll_view.1.dart
new file mode 100644
index 0000000..5c7d437
--- /dev/null
+++ b/examples/api/lib/widgets/single_child_scroll_view/single_child_scroll_view.1.dart
@@ -0,0 +1,91 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SingleChildScrollView
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// In this example, the column becomes either as big as viewport, or as big as
+// the contents, whichever is biggest.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatelessWidget(),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ 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'),
+ ),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ },
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.0.dart b/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.0.dart
new file mode 100644
index 0000000..5ed1739
--- /dev/null
+++ b/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.0.dart
@@ -0,0 +1,79 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SliverFillRemaining
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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
+// sliver, and would be in any computed extent for the sliver.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return CustomScrollView(
+ slivers: <Widget>[
+ SliverToBoxAdapter(
+ child: Container(
+ color: Colors.amber[300],
+ height: 150.0,
+ ),
+ ),
+ SliverFillRemaining(
+ hasScrollBody: false,
+ child: Container(
+ color: Colors.blue[100],
+ child: Icon(
+ Icons.sentiment_very_satisfied,
+ size: 75,
+ color: Colors.blue[900],
+ ),
+ ),
+ ),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.1.dart b/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.1.dart
new file mode 100644
index 0000000..5c0f481
--- /dev/null
+++ b/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.1.dart
@@ -0,0 +1,83 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SliverFillRemaining
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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
+// viewport's main axis.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return CustomScrollView(
+ slivers: <Widget>[
+ SliverFixedExtentList(
+ itemExtent: 100.0,
+ delegate: SliverChildBuilderDelegate(
+ (BuildContext context, int index) {
+ return Container(
+ color: index.isEven ? Colors.amber[200] : Colors.blue[200],
+ );
+ },
+ childCount: 3,
+ ),
+ ),
+ SliverFillRemaining(
+ hasScrollBody: false,
+ child: Container(
+ color: Colors.orange[300],
+ child: const Padding(
+ padding: EdgeInsets.all(50.0),
+ child: FlutterLogo(size: 100),
+ ),
+ ),
+ ),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.2.dart b/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.2.dart
new file mode 100644
index 0000000..b0b9b92
--- /dev/null
+++ b/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.2.dart
@@ -0,0 +1,84 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SliverFillRemaining
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// In this sample the [SliverFillRemaining] defers to the size of its [child]
+// because the [SliverConstraints.precedingScrollExtent] has gone
+// beyond that of the viewport's main axis.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return CustomScrollView(
+ slivers: <Widget>[
+ SliverFixedExtentList(
+ itemExtent: 130.0,
+ delegate: SliverChildBuilderDelegate(
+ (BuildContext context, int index) {
+ return Container(
+ color: index.isEven ? Colors.indigo[200] : Colors.orange[200],
+ );
+ },
+ childCount: 5,
+ ),
+ ),
+ const SliverFillRemaining(
+ hasScrollBody: false,
+ child: Padding(
+ padding: EdgeInsets.all(50.0),
+ child: Icon(
+ Icons.pan_tool,
+ size: 60,
+ color: Colors.blueGrey,
+ ),
+ ),
+ ),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.3.dart b/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.3.dart
new file mode 100644
index 0000000..a01414e
--- /dev/null
+++ b/examples/api/lib/widgets/sliver_fill/sliver_fill_remaining.3.dart
@@ -0,0 +1,104 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SliverFillRemaining
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// In this sample the [SliverFillRemaining]'s child stretches to fill the
+// overscroll area when [fillOverscroll] is true. This sample also features a
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return CustomScrollView(
+ // The ScrollPhysics are overridden here to illustrate the functionality
+ // of fillOverscroll on all devices this sample may be run on.
+ // fillOverscroll only changes the behavior of your layout when applied
+ // to Scrollables that allow for overscroll. BouncingScrollPhysics are
+ // one example, which are provided by default on the iOS platform.
+ // BouncingScrollPhysics is combined with AlwaysScrollableScrollPhysics
+ // to allow for the overscroll, regardless of the depth of the
+ // scrollable.
+ physics:
+ const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
+ slivers: <Widget>[
+ SliverToBoxAdapter(
+ child: Container(
+ color: Colors.tealAccent[700],
+ height: 150.0,
+ ),
+ ),
+ SliverFillRemaining(
+ hasScrollBody: false,
+ // Switch for different overscroll behavior in your layout.
+ // If your ScrollPhysics do not allow for overscroll, setting
+ // fillOverscroll to true will have no effect.
+ fillOverscroll: true,
+ child: Container(
+ color: Colors.teal[100],
+ child: Align(
+ alignment: Alignment.bottomCenter,
+ child: Padding(
+ padding: const EdgeInsets.all(16.0),
+ child: ElevatedButton(
+ onPressed: () {
+ /* Place your onPressed code here! */
+ },
+ child: const Text('Bottom Pinned Button!'),
+ ),
+ ),
+ ),
+ ),
+ ),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/table/table.0.dart b/examples/api/lib/widgets/table/table.0.dart
new file mode 100644
index 0000000..622e005
--- /dev/null
+++ b/examples/api/lib/widgets/table/table.0.dart
@@ -0,0 +1,110 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateless_widget_scaffold.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for Table
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This sample shows a `Table` with borders, multiple types of column widths and different vertical cell alignments.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const MyStatelessWidget(),
+ ),
+ );
+ }
+}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+ const MyStatelessWidget({Key? key}) : super(key: key);
+
+ @override
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ Widget build(BuildContext context) {
+ return Table(
+ border: TableBorder.all(),
+ columnWidths: const <int, TableColumnWidth>{
+ 0: IntrinsicColumnWidth(),
+ 1: FlexColumnWidth(),
+ 2: FixedColumnWidth(64),
+ },
+ defaultVerticalAlignment: TableCellVerticalAlignment.middle,
+ children: <TableRow>[
+ TableRow(
+ children: <Widget>[
+ Container(
+ height: 32,
+ color: Colors.green,
+ ),
+ TableCell(
+ verticalAlignment: TableCellVerticalAlignment.top,
+ child: Container(
+ height: 32,
+ width: 32,
+ color: Colors.red,
+ ),
+ ),
+ Container(
+ height: 64,
+ color: Colors.blue,
+ ),
+ ],
+ ),
+ TableRow(
+ decoration: const BoxDecoration(
+ color: Colors.grey,
+ ),
+ children: <Widget>[
+ Container(
+ height: 64,
+ width: 128,
+ color: Colors.purple,
+ ),
+ Container(
+ height: 32,
+ color: Colors.yellow,
+ ),
+ Center(
+ child: Container(
+ height: 32,
+ width: 32,
+ color: Colors.orange,
+ ),
+ ),
+ ],
+ ),
+ ],
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/align_transition.0.dart b/examples/api/lib/widgets/transitions/align_transition.0.dart
new file mode 100644
index 0000000..0391f43
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/align_transition.0.dart
@@ -0,0 +1,93 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AlignTransition
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following code implements the [AlignTransition] as seen in the video
+// above:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// Using `late final` for [lazy initialization](https://dart.dev/null-safety/understanding-null-safety#lazy-initialization).
+ late final AnimationController _controller = AnimationController(
+ duration: const Duration(seconds: 2),
+ vsync: this,
+ )..repeat(reverse: true);
+ late final Animation<AlignmentGeometry> _animation = Tween<AlignmentGeometry>(
+ begin: Alignment.bottomLeft,
+ end: Alignment.center,
+ ).animate(
+ CurvedAnimation(
+ parent: _controller,
+ curve: Curves.decelerate,
+ ),
+ );
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ color: Colors.white,
+ child: AlignTransition(
+ alignment: _animation,
+ child: const Padding(
+ padding: EdgeInsets.all(8),
+ child: FlutterLogo(size: 150.0),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/animated_builder.0.dart b/examples/api/lib/widgets/transitions/animated_builder.0.dart
new file mode 100644
index 0000000..efdc13d
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/animated_builder.0.dart
@@ -0,0 +1,99 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AnimatedBuilder
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//********************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-dartImports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'dart:math' as math;
+
+//* ▲▲▲▲▲▲▲▲ code-dartImports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ late final AnimationController _controller = AnimationController(
+ duration: const Duration(seconds: 10),
+ vsync: this,
+ )..repeat();
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return AnimatedBuilder(
+ animation: _controller,
+ child: Container(
+ width: 200.0,
+ height: 200.0,
+ color: Colors.green,
+ child: const Center(
+ child: Text('Whee!'),
+ ),
+ ),
+ builder: (BuildContext context, Widget? child) {
+ return Transform.rotate(
+ angle: _controller.value * 2.0 * math.pi,
+ child: child,
+ );
+ },
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/animated_widget.0.dart b/examples/api/lib/widgets/transitions/animated_widget.0.dart
new file mode 100644
index 0000000..928e7f7
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/animated_widget.0.dart
@@ -0,0 +1,105 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for AnimatedWidget
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// This code defines a widget called `Spinner` that spins a green square
+// continually. It is built with an [AnimatedWidget].
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+//********************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-dartImports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+import 'dart:math' as math;
+
+//* ▲▲▲▲▲▲▲▲ code-dartImports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+//*****************************************************************************
+//* ▼▼▼▼▼▼▼▼ code-preamble ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class SpinningContainer extends AnimatedWidget {
+ const SpinningContainer({
+ Key? key,
+ required AnimationController controller,
+ }) : super(key: key, listenable: controller);
+
+ Animation<double> get _progress => listenable as Animation<double>;
+
+ @override
+ Widget build(BuildContext context) {
+ return Transform.rotate(
+ angle: _progress.value * 2.0 * math.pi,
+ child: Container(width: 200.0, height: 200.0, color: Colors.green),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code-preamble ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//*****************************************************************************
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ late final AnimationController _controller = AnimationController(
+ duration: const Duration(seconds: 10),
+ vsync: this,
+ )..repeat();
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return SpinningContainer(controller: _controller);
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/decorated_box_transition.0.dart b/examples/api/lib/widgets/transitions/decorated_box_transition.0.dart
new file mode 100644
index 0000000..6c4f5b6
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/decorated_box_transition.0.dart
@@ -0,0 +1,113 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for DecoratedBoxTransition
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following code implements the [DecoratedBoxTransition] as seen in the video
+// above:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ final DecorationTween decorationTween = DecorationTween(
+ begin: BoxDecoration(
+ color: const Color(0xFFFFFFFF),
+ border: Border.all(style: BorderStyle.none),
+ borderRadius: BorderRadius.circular(60.0),
+ shape: BoxShape.rectangle,
+ boxShadow: const <BoxShadow>[
+ BoxShadow(
+ color: Color(0x66666666),
+ blurRadius: 10.0,
+ spreadRadius: 3.0,
+ offset: Offset(0, 6.0),
+ )
+ ],
+ ),
+ end: BoxDecoration(
+ color: const Color(0xFFFFFFFF),
+ border: Border.all(
+ style: BorderStyle.none,
+ ),
+ borderRadius: BorderRadius.zero,
+ // No shadow.
+ ),
+ );
+
+ late final AnimationController _controller = AnimationController(
+ vsync: this,
+ duration: const Duration(seconds: 3),
+ )..repeat(reverse: true);
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ color: Colors.white,
+ child: Center(
+ child: DecoratedBoxTransition(
+ position: DecorationPosition.background,
+ decoration: decorationTween.animate(_controller),
+ child: Container(
+ width: 200,
+ height: 200,
+ padding: const EdgeInsets.all(10),
+ child: const FlutterLogo(),
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/default_text_style_transition.0.dart b/examples/api/lib/widgets/transitions/default_text_style_transition.0.dart
new file mode 100644
index 0000000..2b5fa03
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/default_text_style_transition.0.dart
@@ -0,0 +1,97 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for DefaultTextStyleTransition
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following code implements the [DefaultTextStyleTransition] that shows
+// a transition between thick blue font and thin red font.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ late AnimationController _controller;
+ late TextStyleTween _styleTween;
+ late CurvedAnimation _curvedAnimation;
+
+ @override
+ void initState() {
+ super.initState();
+ _controller = AnimationController(
+ duration: const Duration(seconds: 2),
+ vsync: this,
+ )..repeat(reverse: true);
+ _styleTween = TextStyleTween(
+ begin: const TextStyle(
+ fontSize: 50, color: Colors.blue, fontWeight: FontWeight.w900),
+ end: const TextStyle(
+ fontSize: 50, color: Colors.red, fontWeight: FontWeight.w100),
+ );
+ _curvedAnimation = CurvedAnimation(
+ parent: _controller,
+ curve: Curves.elasticInOut,
+ );
+ }
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Center(
+ child: DefaultTextStyleTransition(
+ style: _styleTween.animate(_curvedAnimation),
+ child: const Text('Flutter'),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/fade_transition.0.dart b/examples/api/lib/widgets/transitions/fade_transition.0.dart
new file mode 100644
index 0000000..8e70c22
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/fade_transition.0.dart
@@ -0,0 +1,84 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for FadeTransition
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following code implements the [FadeTransition] using
+// the Flutter logo:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ late final AnimationController _controller = AnimationController(
+ duration: const Duration(seconds: 2),
+ vsync: this,
+ )..repeat(reverse: true);
+ late final Animation<double> _animation = CurvedAnimation(
+ parent: _controller,
+ curve: Curves.easeIn,
+ );
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ color: Colors.white,
+ child: FadeTransition(
+ opacity: _animation,
+ child: const Padding(padding: EdgeInsets.all(8), child: FlutterLogo()),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/positioned_transition.0.dart b/examples/api/lib/widgets/transitions/positioned_transition.0.dart
new file mode 100644
index 0000000..7668968
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/positioned_transition.0.dart
@@ -0,0 +1,100 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for PositionedTransition
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following code implements the [PositionedTransition] as seen in the video
+// above:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ late final AnimationController _controller = AnimationController(
+ duration: const Duration(seconds: 2),
+ vsync: this,
+ )..repeat(reverse: true);
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ const double smallLogo = 100;
+ const double bigLogo = 200;
+
+ return LayoutBuilder(
+ builder: (BuildContext context, BoxConstraints constraints) {
+ final Size biggest = constraints.biggest;
+ return Stack(
+ children: <Widget>[
+ PositionedTransition(
+ rect: RelativeRectTween(
+ begin: RelativeRect.fromSize(
+ const Rect.fromLTWH(0, 0, smallLogo, smallLogo), biggest),
+ end: RelativeRect.fromSize(
+ Rect.fromLTWH(biggest.width - bigLogo,
+ biggest.height - bigLogo, bigLogo, bigLogo),
+ biggest),
+ ).animate(CurvedAnimation(
+ parent: _controller,
+ curve: Curves.elasticInOut,
+ )),
+ child: const Padding(
+ padding: EdgeInsets.all(8), child: FlutterLogo()),
+ ),
+ ],
+ );
+ },
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/relative_positioned_transition.0.dart b/examples/api/lib/widgets/transitions/relative_positioned_transition.0.dart
new file mode 100644
index 0000000..fa74a67
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/relative_positioned_transition.0.dart
@@ -0,0 +1,98 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for RelativePositionedTransition
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following code implements the [RelativePositionedTransition] as seen in the video
+// above:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ late final AnimationController _controller = AnimationController(
+ duration: const Duration(seconds: 2),
+ vsync: this,
+ )..repeat(reverse: true);
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ const double smallLogo = 100;
+ const double bigLogo = 200;
+
+ return LayoutBuilder(
+ builder: (BuildContext context, BoxConstraints constraints) {
+ final Size biggest = constraints.biggest;
+ return Stack(
+ children: <Widget>[
+ RelativePositionedTransition(
+ size: biggest,
+ rect: RectTween(
+ begin: const Rect.fromLTWH(0, 0, bigLogo, bigLogo),
+ end: Rect.fromLTWH(biggest.width - smallLogo,
+ biggest.height - smallLogo, smallLogo, smallLogo),
+ ).animate(CurvedAnimation(
+ parent: _controller,
+ curve: Curves.elasticInOut,
+ )) as Animation<Rect>,
+ child: const Padding(
+ padding: EdgeInsets.all(8), child: FlutterLogo()),
+ ),
+ ],
+ );
+ },
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/rotation_transition.0.dart b/examples/api/lib/widgets/transitions/rotation_transition.0.dart
new file mode 100644
index 0000000..1c22fd6
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/rotation_transition.0.dart
@@ -0,0 +1,88 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for RotationTransition
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following code implements the [RotationTransition] as seen in the video
+// above:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ late final AnimationController _controller = AnimationController(
+ duration: const Duration(seconds: 2),
+ vsync: this,
+ )..repeat(reverse: true);
+ late final Animation<double> _animation = CurvedAnimation(
+ parent: _controller,
+ curve: Curves.elasticOut,
+ );
+
+ @override
+ void dispose() {
+ _controller.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: RotationTransition(
+ turns: _animation,
+ child: const Padding(
+ padding: EdgeInsets.all(8.0),
+ child: FlutterLogo(size: 150.0),
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/scale_transition.0.dart b/examples/api/lib/widgets/transitions/scale_transition.0.dart
new file mode 100644
index 0000000..789a348
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/scale_transition.0.dart
@@ -0,0 +1,88 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for ScaleTransition
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following code implements the [ScaleTransition] as seen in the video
+// above:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ late final AnimationController _controller = AnimationController(
+ duration: const Duration(seconds: 2),
+ vsync: this,
+ )..repeat(reverse: true);
+ late final Animation<double> _animation = CurvedAnimation(
+ parent: _controller,
+ curve: Curves.fastOutSlowIn,
+ );
+
+ @override
+ void dispose() {
+ super.dispose();
+ _controller.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Center(
+ child: ScaleTransition(
+ scale: _animation,
+ child: const Padding(
+ padding: EdgeInsets.all(8.0),
+ child: FlutterLogo(size: 150.0),
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/size_transition.0.dart b/examples/api/lib/widgets/transitions/size_transition.0.dart
new file mode 100644
index 0000000..dc21bfa
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/size_transition.0.dart
@@ -0,0 +1,88 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material_ticker.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SizeTransition
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with TickerProviderStateMixin {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ late final AnimationController _controller = AnimationController(
+ duration: const Duration(seconds: 3),
+ vsync: this,
+ )..repeat();
+ late final Animation<double> _animation = CurvedAnimation(
+ parent: _controller,
+ curve: Curves.fastOutSlowIn,
+ );
+
+ @override
+ void dispose() {
+ super.dispose();
+ _controller.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SizeTransition(
+ sizeFactor: _animation,
+ axis: Axis.horizontal,
+ axisAlignment: -1,
+ child: const Center(
+ child: FlutterLogo(size: 200.0),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/transitions/slide_transition.0.dart b/examples/api/lib/widgets/transitions/slide_transition.0.dart
new file mode 100644
index 0000000..a36758a
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/slide_transition.0.dart
@@ -0,0 +1,90 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center_freeform_state.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SlideTransition
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// The following code implements the [SlideTransition] as seen in the video
+// above:
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with SingleTickerProviderStateMixin {
+ late final AnimationController _controller = AnimationController(
+ duration: const Duration(seconds: 2),
+ vsync: this,
+ )..repeat(reverse: true);
+ late final Animation<Offset> _offsetAnimation = Tween<Offset>(
+ begin: Offset.zero,
+ end: const Offset(1.5, 0.0),
+ ).animate(CurvedAnimation(
+ parent: _controller,
+ curve: Curves.elasticIn,
+ ));
+
+ @override
+ void dispose() {
+ super.dispose();
+ _controller.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return SlideTransition(
+ position: _offsetAnimation,
+ child: const Padding(
+ padding: EdgeInsets.all(8.0),
+ child: FlutterLogo(size: 150.0),
+ ),
+ );
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/transitions/sliver_fade_transition.0.dart b/examples/api/lib/widgets/transitions/sliver_fade_transition.0.dart
new file mode 100644
index 0000000..825c046
--- /dev/null
+++ b/examples/api/lib/widgets/transitions/sliver_fade_transition.0.dart
@@ -0,0 +1,103 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center_freeform_state.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for SliverFadeTransition
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// Creates a [CustomScrollView] with a [SliverFixedExtentList] that uses a
+// [SliverFadeTransition] to fade the list in and out.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+class _MyStatefulWidgetState extends State<MyStatefulWidget>
+ with SingleTickerProviderStateMixin {
+ late final AnimationController controller = AnimationController(
+ duration: const Duration(milliseconds: 1000),
+ vsync: this,
+ );
+ late final Animation<double> animation = CurvedAnimation(
+ parent: controller,
+ curve: Curves.easeIn,
+ );
+
+ @override
+ void initState() {
+ super.initState();
+ animation.addStatusListener((AnimationStatus status) {
+ if (status == AnimationStatus.completed) {
+ controller.reverse();
+ } else if (status == AnimationStatus.dismissed) {
+ controller.forward();
+ }
+ });
+ controller.forward();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return CustomScrollView(slivers: <Widget>[
+ SliverFadeTransition(
+ opacity: animation,
+ sliver: SliverFixedExtentList(
+ itemExtent: 100.0,
+ delegate: SliverChildBuilderDelegate(
+ (BuildContext context, int index) {
+ return Container(
+ color: index.isEven ? Colors.indigo[200] : Colors.orange[200],
+ );
+ },
+ childCount: 5,
+ ),
+ ),
+ )
+ ]);
+ }
+}
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
diff --git a/examples/api/lib/widgets/tween_animation_builder/tween_animation_builder.0.dart b/examples/api/lib/widgets/tween_animation_builder/tween_animation_builder.0.dart
new file mode 100644
index 0000000..189a87b
--- /dev/null
+++ b/examples/api/lib/widgets/tween_animation_builder/tween_animation_builder.0.dart
@@ -0,0 +1,86 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for TweenAnimationBuilder
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+// 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.
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: _title,
+ home: Scaffold(
+ appBar: AppBar(title: const Text(_title)),
+ body: const Center(
+ child: MyStatefulWidget(),
+ ),
+ ),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ double targetValue = 24.0;
+
+ @override
+ Widget build(BuildContext context) {
+ return TweenAnimationBuilder<double>(
+ tween: Tween<double>(begin: 0, end: targetValue),
+ duration: const Duration(seconds: 1),
+ builder: (BuildContext context, double size, Widget? child) {
+ return IconButton(
+ iconSize: size,
+ color: Colors.blue,
+ icon: child!,
+ onPressed: () {
+ setState(() {
+ targetValue = targetValue == 24.0 ? 48.0 : 24.0;
+ });
+ },
+ );
+ },
+ child: const Icon(Icons.aspect_ratio),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
diff --git a/examples/api/lib/widgets/will_pop_scope/will_pop_scope.1.dart b/examples/api/lib/widgets/will_pop_scope/will_pop_scope.1.dart
new file mode 100644
index 0000000..b3a7922
--- /dev/null
+++ b/examples/api/lib/widgets/will_pop_scope/will_pop_scope.1.dart
@@ -0,0 +1,103 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Template: dev/snippets/config/templates/stateful_widget_material.tmpl
+//
+// Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring
+// of samples, and may be ignored if you are just exploring the sample.
+
+// Flutter code sample for WillPopScope
+//
+//***************************************************************************
+//* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+//
+
+//* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//***************************************************************************
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+/// This is the main application widget.
+class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ static const String _title = 'Flutter Code Sample';
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: _title,
+ home: MyStatefulWidget(),
+ );
+ }
+}
+
+/// This is the stateful widget that the main application instantiates.
+class MyStatefulWidget extends StatefulWidget {
+ const MyStatefulWidget({Key? key}) : super(key: key);
+
+ @override
+ State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+}
+
+/// This is the private State class that goes with MyStatefulWidget.
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+//********************************************************************
+//* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker)
+
+ bool shouldPop = true;
+ @override
+ Widget build(BuildContext context) {
+ return WillPopScope(
+ onWillPop: () async {
+ return shouldPop;
+ },
+ child: Scaffold(
+ appBar: AppBar(
+ title: const Text('Flutter WillPopScope demo'),
+ ),
+ body: Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: <Widget>[
+ OutlinedButton(
+ child: const Text('Push'),
+ onPressed: () {
+ Navigator.of(context).push<void>(
+ MaterialPageRoute<void>(
+ builder: (BuildContext context) {
+ return const MyStatefulWidget();
+ },
+ ),
+ );
+ },
+ ),
+ OutlinedButton(
+ child: Text('shouldPop: $shouldPop'),
+ onPressed: () {
+ setState(
+ () {
+ shouldPop = !shouldPop;
+ },
+ );
+ },
+ ),
+ const Text('Push to a new screen, then tap on shouldPop '
+ 'button to toggle its value. Press the back '
+ 'button in the appBar to check its behaviour '
+ 'for different values of shouldPop'),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+
+//* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker)
+//********************************************************************
+
+}
