[Docs] Create 'center' snippets template (#40367)

* Create 'center' template

dev/snippets/config/templates/README.md

@@ -97,6 +97,15 @@ follows:
   `stateful_widget_material`, except that it wraps the stateful widget with a
   `Scaffold`.
 
+- [`stateful_widget_scaffold_center`](stateful_widget_scaffold_center.tmpl) : Similar to
+  `stateful_widget_scaffold`, except that it wraps the stateful widget with a
+  `Scaffold` _and_ a `Center`.
+
 - [`stateless_widget_scaffold`](stateless_widget_scaffold.tmpl) : Similar to
   `stateless_widget_material`, except that it wraps the stateless widget with a
   `Scaffold`.
+
+- [`stateless_widget_scaffold_center`](stateless_widget_scaffold_center.tmpl) : Similar to
+  `stateless_widget_scaffold`, except that it wraps the stateless widget with a
+  `Scaffold` _and_ a `Center`.
+

dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl

+// Flutter code sample for {{id}}
+
+{{description}}
+
+import 'package:flutter/material.dart';
+
+{{code-imports}}
+
+void main() => runApp(new MyApp());
+
+/// This Widget is the main application widget.
+class MyApp extends StatelessWidget {
+  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: Center(
+          child: MyStatefulWidget(),
+        ),
+      ),
+    );
+  }
+}
+
+{{code-preamble}}
+
+class MyStatefulWidget extends StatefulWidget {
+  MyStatefulWidget({Key key}) : super(key: key);
+
+  @override
+  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
+}
+
+class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+  {{code}}
+}

dev/snippets/config/templates/stateless_widget_scaffold_center.tmpl

+// Flutter code sample for {{id}}
+
+{{description}}
+
+import 'package:flutter/material.dart';
+
+{{code-imports}}
+
+void main() => runApp(new MyApp());
+
+/// This Widget is the main application widget.
+class MyApp extends StatelessWidget {
+  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: Center(
+          child: MyStatelessWidget(),
+        )
+      ),
+    );
+  }
+}
+
+
+{{code-preamble}}
+
+/// This is the stateless widget that the main application instantiates.
+class MyStatelessWidget extends StatelessWidget {
+  MyStatelessWidget({Key key}) : super(key: key);
+
+  @override
+  {{code}}
+}

packages/flutter/lib/src/material/checkbox_list_tile.dart

@@ -37,7 +37,7 @@ import 'theme_data.dart';
 /// To show the [CheckboxListTile] as disabled, pass null as the [onChanged]
 /// callback.
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 ///
 /// ![CheckboxListTile sample](https://flutter.github.io/assets-for-api-docs/assets/material/checkbox_list_tile.png)
 ///
@@ -53,15 +53,13 @@ import 'theme_data.dart';
 /// ```dart
 /// @override
 /// Widget build(BuildContext context) {
-///   return Center(
-///     child: CheckboxListTile(
-///       title: const Text('Animate Slowly'),
-///       value: timeDilation != 1.0,
-///       onChanged: (bool value) {
-///         setState(() { timeDilation = value ? 10.0 : 1.0; });
-///       },
-///       secondary: const Icon(Icons.hourglass_empty),
-///     ),
+///   return CheckboxListTile(
+///     title: const Text('Animate Slowly'),
+///     value: timeDilation != 1.0,
+///     onChanged: (bool value) {
+///       setState(() { timeDilation = value ? 10.0 : 1.0; });
+///     },
+///     secondary: const Icon(Icons.hourglass_empty),
 ///   );
 /// }
 /// ```
@@ -84,7 +82,7 @@ import 'theme_data.dart';
 /// into one. Therefore, it may be necessary to create a custom radio tile
 /// widget to accommodate similar use cases.
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 ///
 /// ![Checkbox list tile semantics sample](https://flutter.github.io/assets-for-api-docs/assets/material/checkbox_list_tile_semantics.png)
 ///
@@ -147,19 +145,15 @@ import 'theme_data.dart';
 ///
 /// @override
 /// Widget build(BuildContext context) {
-///   return Scaffold(
-///     body: Center(
-///       child: LinkedLabelCheckbox(
-///         label: 'Linked, tappable label text',
-///         padding: const EdgeInsets.symmetric(horizontal: 20.0),
-///         value: _isSelected,
-///         onChanged: (bool newValue) {
-///           setState(() {
-///             _isSelected = newValue;
-///           });
-///         },
-///       ),
-///     ),
+///   return LinkedLabelCheckbox(
+///     label: 'Linked, tappable label text',
+///     padding: const EdgeInsets.symmetric(horizontal: 20.0),
+///     value: _isSelected,
+///     onChanged: (bool newValue) {
+///       setState(() {
+///         _isSelected = newValue;
+///       });
+///     },
 ///   );
 /// }
 /// ```
@@ -172,7 +166,7 @@ import 'theme_data.dart';
 /// combining [Checkbox] with other widgets, such as [Text], [Padding] and
 /// [InkWell].
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 ///
 /// ![Custom checkbox list tile sample](https://flutter.github.io/assets-for-api-docs/assets/material/checkbox_list_tile_custom.png)
 ///
@@ -222,19 +216,15 @@ import 'theme_data.dart';
 ///
 /// @override
 /// Widget build(BuildContext context) {
-///   return Scaffold(
-///     body: Center(
-///       child: LabeledCheckbox(
-///         label: 'This is the label text',
-///         padding: const EdgeInsets.symmetric(horizontal: 20.0),
-///         value: _isSelected,
-///         onChanged: (bool newValue) {
-///           setState(() {
-///             _isSelected = newValue;
-///           });
-///         },
-///       ),
-///     ),
+///   return LabeledCheckbox(
+///     label: 'This is the label text',
+///     padding: const EdgeInsets.symmetric(horizontal: 20.0),
+///     value: _isSelected,
+///     onChanged: (bool newValue) {
+///       setState(() {
+///         _isSelected = newValue;
+///       });
+///     },
 ///   );
 /// }
 /// ```

packages/flutter/lib/src/material/chip.dart

@@ -175,7 +175,7 @@ abstract class DeletableChipAttributes {
   /// that the user tapped the delete button. In order to delete the chip, you
   /// have to do something similar to the following sample:
   ///
-  /// {@tool snippet --template=stateful_widget_scaffold}
+  /// {@tool snippet --template=stateful_widget_scaffold_center}
   ///
   /// This sample shows how to use [onDeleted] to remove an entry when the
   /// delete button is tapped.
@@ -231,7 +231,7 @@ abstract class DeletableChipAttributes {
   /// ```dart
   /// @override
   /// Widget build(BuildContext context) {
-  ///   return Center(child: CastList());
+  ///   return CastList();
   /// }
   /// ```
   /// {@end-tool}

packages/flutter/lib/src/material/dropdown.dart

@@ -532,7 +532,7 @@ class DropdownButtonHideUnderline extends InheritedWidget {
 /// dropdown's value. It should also call [State.setState] to rebuild the
 /// dropdown with the new value.
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 ///
 /// This sample shows a `DropdownButton` with a customized icon, text style,
 /// and underline and whose value is one of "One", "Two", "Free", or "Four".
@@ -544,35 +544,31 @@ class DropdownButtonHideUnderline extends InheritedWidget {
 ///
 /// @override
 /// Widget build(BuildContext context) {
-///   return Scaffold(
-///     body: Center(
-///       child: DropdownButton<String>(
-///         value: dropdownValue,
-///         icon: Icon(Icons.arrow_downward),
-///         iconSize: 24,
-///         elevation: 16,
-///         style: TextStyle(
-///           color: Colors.deepPurple
-///         ),
-///         underline: Container(
-///           height: 2,
-///           color: Colors.deepPurpleAccent,
-///         ),
-///         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(),
-///       ),
+///   return DropdownButton<String>(
+///     value: dropdownValue,
+///     icon: Icon(Icons.arrow_downward),
+///     iconSize: 24,
+///     elevation: 16,
+///     style: TextStyle(
+///       color: Colors.deepPurple
 ///     ),
+///     underline: Container(
+///       height: 2,
+///       color: Colors.deepPurpleAccent,
+///     ),
+///     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(),
 ///   );
 /// }
 /// ```

packages/flutter/lib/src/material/icon_button.dart

@@ -38,7 +38,7 @@ const double _kMinButtonSize = kMinInteractiveDimension;
 /// requirements in the Material Design specification. The [alignment] controls
 /// how the icon itself is positioned within the hit region.
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 ///
 /// This sample shows an `IconButton` that uses the Material icon "volume_up" to
 /// increase the volume.
@@ -49,24 +49,20 @@ const double _kMinButtonSize = kMinInteractiveDimension;
 ///
 /// ```dart
 /// Widget build(BuildContext context) {
-///   return Scaffold(
-///     body: Center(
-///       child: Column(
-///         mainAxisSize: MainAxisSize.min,
-///         children: <Widget>[
-///           IconButton(
-///             icon: Icon(Icons.volume_up),
-///             tooltip: 'Increase volume by 10',
-///             onPressed: () {
-///               setState(() {
-///                 _volume += 10;
-///               });
-///             },
-///           ),
-///           Text('Volume : $_volume')
-///         ],
+///   return Column(
+///     mainAxisSize: MainAxisSize.min,
+///     children: <Widget>[
+///       IconButton(
+///         icon: Icon(Icons.volume_up),
+///         tooltip: 'Increase volume by 10',
+///         onPressed: () {
+///           setState(() {
+///             _volume += 10;
+///           });
+///         },
 ///       ),
-///     ),
+///       Text('Volume : $_volume')
+///     ],
 ///   );
 /// }
 /// ```

packages/flutter/lib/src/material/ink_well.dart

@@ -791,7 +791,7 @@ class _InkResponseState<T extends InkResponse> extends State<T> with AutomaticKe
 ///
 /// An example of this situation is as follows:
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 ///
 /// Tap the container to cause it to grow. Then, tap it again and hold before
 /// the widget reaches its maximum size to observe the clipped ink splash.
@@ -800,21 +800,19 @@ class _InkResponseState<T extends InkResponse> extends State<T> with AutomaticKe
 /// double sideLength = 50;
 ///
 /// Widget build(BuildContext context) {
-///   return Center(
-///     child: AnimatedContainer(
-///       height: sideLength,
-///       width: sideLength,
-///       duration: Duration(seconds: 2),
-///       curve: Curves.easeIn,
-///       child: Material(
-///         color: Colors.yellow,
-///         child: InkWell(
-///           onTap: () {
-///             setState(() {
-///               sideLength == 50 ? sideLength = 100 : sideLength = 50;
-///             });
-///           },
-///         ),
+///   return AnimatedContainer(
+///     height: sideLength,
+///     width: sideLength,
+///     duration: Duration(seconds: 2),
+///     curve: Curves.easeIn,
+///     child: Material(
+///       color: Colors.yellow,
+///       child: InkWell(
+///         onTap: () {
+///           setState(() {
+///             sideLength == 50 ? sideLength = 100 : sideLength = 50;
+///           });
+///         },
 ///       ),
 ///     ),
 ///   );

packages/flutter/lib/src/material/radio.dart

@@ -27,7 +27,7 @@ const double _kInnerRadius = 4.5;
 /// will respond to [onChanged] by calling [State.setState] to update the
 /// radio button's [groupValue].
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 ///
 /// Here is an example of Radio widgets wrapped in ListTiles, which is similar
 /// to what you could get with the RadioListTile widget.
@@ -52,31 +52,29 @@ const double _kInnerRadius = 4.5;
 /// SingingCharacter _character = SingingCharacter.lafayette;
 ///
 /// Widget build(BuildContext context) {
-///   return Center(
-///     child: Column(
-///       children: <Widget>[
-///         ListTile(
-///           title: const Text('Lafayette'),
-///           leading: Radio(
-///             value: SingingCharacter.lafayette,
-///             groupValue: _character,
-///             onChanged: (SingingCharacter value) {
-///               setState(() { _character = value; });
-///             },
-///           ),
+///   return Column(
+///     children: <Widget>[
+///       ListTile(
+///         title: const Text('Lafayette'),
+///         leading: Radio(
+///           value: SingingCharacter.lafayette,
+///           groupValue: _character,
+///           onChanged: (SingingCharacter value) {
+///             setState(() { _character = value; });
+///           },
 ///         ),
-///         ListTile(
-///           title: const Text('Thomas Jefferson'),
-///           leading: Radio(
-///             value: SingingCharacter.jefferson,
-///             groupValue: _character,
-///             onChanged: (SingingCharacter value) {
-///               setState(() { _character = value; });
-///             },
-///           ),
+///       ),
+///       ListTile(
+///         title: const Text('Thomas Jefferson'),
+///         leading: Radio(
+///           value: SingingCharacter.jefferson,
+///           groupValue: _character,
+///           onChanged: (SingingCharacter value) {
+///             setState(() { _character = value; });
+///           },
 ///         ),
-///       ],
-///     ),
+///       ),
+///     ],
 ///   );
 /// }
 /// ```

packages/flutter/lib/src/material/switch_list_tile.dart

@@ -46,7 +46,7 @@ enum _SwitchListTileType { material, adaptive }
 /// To show the [SwitchListTile] as disabled, pass null as the [onChanged]
 /// callback.
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 ///
 /// ![SwitchListTile sample](https://flutter.github.io/assets-for-api-docs/assets/material/switch_list_tile.png)
 ///
@@ -58,13 +58,11 @@ enum _SwitchListTileType { material, adaptive }
 ///
 /// @override
 /// Widget build(BuildContext context) {
-///   return Center(
-///     child: SwitchListTile(
-///       title: const Text('Lights'),
-///       value: _lights,
-///       onChanged: (bool value) { setState(() { _lights = value; }); },
-///       secondary: const Icon(Icons.lightbulb_outline),
-///     ),
+///   return SwitchListTile(
+///     title: const Text('Lights'),
+///     value: _lights,
+///     onChanged: (bool value) { setState(() { _lights = value; }); },
+///     secondary: const Icon(Icons.lightbulb_outline),
 ///   );
 /// }
 /// ```
@@ -87,7 +85,7 @@ enum _SwitchListTileType { material, adaptive }
 /// into one. Therefore, it may be necessary to create a custom radio tile
 /// widget to accommodate similar use cases.
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 ///
 /// ![Switch list tile semantics sample](https://flutter.github.io/assets-for-api-docs/assets/material/switch_list_tile_semantics.png)
 ///
@@ -150,19 +148,15 @@ enum _SwitchListTileType { material, adaptive }
 ///
 /// @override
 /// Widget build(BuildContext context) {
-///   return Scaffold(
-///     body: Center(
-///       child: LinkedLabelSwitch(
-///         label: 'Linked, tappable label text',
-///         padding: const EdgeInsets.symmetric(horizontal: 20.0),
-///         value: _isSelected,
-///         onChanged: (bool newValue) {
-///           setState(() {
-///             _isSelected = newValue;
-///           });
-///         },
-///       ),
-///     ),
+///   return LinkedLabelSwitch(
+///     label: 'Linked, tappable label text',
+///     padding: const EdgeInsets.symmetric(horizontal: 20.0),
+///     value: _isSelected,
+///     onChanged: (bool newValue) {
+///       setState(() {
+///         _isSelected = newValue;
+///       });
+///     },
 ///   );
 /// }
 /// ```
@@ -175,7 +169,7 @@ enum _SwitchListTileType { material, adaptive }
 /// combining [Switch] with other widgets, such as [Text], [Padding] and
 /// [InkWell].
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 ///
 /// ![Custom switch list tile sample](https://flutter.github.io/assets-for-api-docs/assets/material/switch_list_tile_custom.png)
 ///
@@ -227,19 +221,15 @@ enum _SwitchListTileType { material, adaptive }
 ///
 /// @override
 /// Widget build(BuildContext context) {
-///   return Scaffold(
-///     body: Center(
-///       child: LabeledSwitch(
-///         label: 'This is the label text',
-///         padding: const EdgeInsets.symmetric(horizontal: 20.0),
-///         value: _isSelected,
-///         onChanged: (bool newValue) {
-///           setState(() {
-///             _isSelected = newValue;
-///           });
-///         },
-///       ),
-///     ),
+///   return LabeledSwitch(
+///     label: 'This is the label text',
+///     padding: const EdgeInsets.symmetric(horizontal: 20.0),
+///     value: _isSelected,
+///     onChanged: (bool newValue) {
+///       setState(() {
+///         _isSelected = newValue;
+///       });
+///     },
 ///   );
 /// }
 /// ```

packages/flutter/lib/src/widgets/basic.dart

@@ -5496,7 +5496,7 @@ class WidgetToRenderBoxAdapter extends LeafRenderObjectWidget {
 /// If it has a child, this widget defers to the child for sizing behavior. If
 /// it does not have a child, it grows to fit the parent instead.
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 /// This example makes a [Container] react to being touched, showing a count of
 /// the number of pointer downs and ups.
 ///
@@ -5531,28 +5531,26 @@ class WidgetToRenderBoxAdapter extends LeafRenderObjectWidget {
 ///
 /// @override
 /// Widget build(BuildContext context) {
-///   return Center(
-///     child: ConstrainedBox(
-///       constraints: new BoxConstraints.tight(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>[
-///               Text('You have pressed or released in this area this many times:'),
-///               Text(
-///                 '$_downCounter presses\n$_upCounter releases',
-///                 style: Theme.of(context).textTheme.display1,
-///               ),
-///               Text(
-///                 'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
-///               ),
-///             ],
-///           ),
+///   return ConstrainedBox(
+///     constraints: new BoxConstraints.tight(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>[
+///             Text('You have pressed or released in this area this many times:'),
+///             Text(
+///               '$_downCounter presses\n$_upCounter releases',
+///               style: Theme.of(context).textTheme.display1,
+///             ),
+///             Text(
+///               'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
+///             ),
+///           ],
 ///         ),
 ///       ),
 ///     ),
@@ -5745,7 +5743,7 @@ class _PointerListener extends SingleChildRenderObjectWidget {
 /// If it has a child, this widget defers to the child for sizing behavior. If
 /// it does not have a child, it grows to fit the parent instead.
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 /// This example makes a [Container] react to being entered by a mouse
 /// pointer, showing a count of the number of entries and exits.
 ///
@@ -5778,28 +5776,26 @@ class _PointerListener extends SingleChildRenderObjectWidget {
 ///
 /// @override
 /// Widget build(BuildContext context) {
-///   return Center(
-///     child: ConstrainedBox(
-///       constraints: new BoxConstraints.tight(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>[
-///               Text('You have entered or exited this box this many times:'),
-///               Text(
-///                 '$_enterCounter Entries\n$_exitCounter Exits',
-///                 style: Theme.of(context).textTheme.display1,
-///               ),
-///               Text(
-///                 'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
-///               ),
-///             ],
-///           ),
+///   return ConstrainedBox(
+///     constraints: new BoxConstraints.tight(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>[
+///             Text('You have entered or exited this box this many times:'),
+///             Text(
+///               '$_enterCounter Entries\n$_exitCounter Exits',
+///               style: Theme.of(context).textTheme.display1,
+///             ),
+///             Text(
+///               'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
+///             ),
+///           ],
 ///         ),
 ///       ),
 ///     ),

packages/flutter/lib/src/widgets/tween_animation_builder.dart

@@ -59,7 +59,7 @@ import 'value_listenable_builder.dart';
 ///
 /// ## Example Code
 ///
-/// {@tool snippet --template=stateful_widget_scaffold}
+/// {@tool snippet --template=stateful_widget_scaffold_center}
 /// This example shows an [IconButton] that "zooms" in when the widget first
 /// builds (its size smoothly increases from 0 to 24) and whenever the button
 /// is pressed, it smoothly changes its size to the new target value of either
@@ -70,24 +70,22 @@ import 'value_listenable_builder.dart';
 ///
 /// @override
 /// Widget build(BuildContext context) {
-///   return Center(
-///     child: TweenAnimationBuilder(
-///       tween: Tween<double>(begin: 0, end: targetValue),
-///       duration: 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: Icon(Icons.aspect_ratio),
-///     ),
+///   return TweenAnimationBuilder(
+///     tween: Tween<double>(begin: 0, end: targetValue),
+///     duration: 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: Icon(Icons.aspect_ratio),
 ///   );
 /// }
 /// ```