firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
* Create 'center' template
This commit is contained in:
MH Johnson 2019-09-15 20:38:44 -04:00 committed by GitHub
parent 0ef89bb969
commit 0d3bb515f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 277 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dev/snippets/config/templates/README.md
View File

@ -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`.

40
dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl Normal file
View File

@ -0,0 +1,40 @@
// 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}}
}

38
dev/snippets/config/templates/stateless_widget_scaffold_center.tmpl Normal file
View File

@ -0,0 +1,38 @@
// 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}}
}

66
packages/flutter/lib/src/material/checkbox_list_tile.dart
View File

@ -37,7 +37,7 @@ import 'theme_data.dart';
/// To show the [CheckboxListTile] as disabled, pass null as the [onChanged]
/// callback.
///
/// {@tool 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;
/// });
/// },
/// );
/// }
/// ```

4
packages/flutter/lib/src/material/chip.dart
View File

@ -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}

54
packages/flutter/lib/src/material/dropdown.dart
View File

@ -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(),
/// );
/// }
/// ```

32
packages/flutter/lib/src/material/icon_button.dart
View File

@ -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')
/// ],
/// );
/// }
/// ```

30
packages/flutter/lib/src/material/ink_well.dart
View File

@ -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;
/// });
/// },
/// ),
/// ),
/// );

46
packages/flutter/lib/src/material/radio.dart
View File

@ -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; });
/// },
/// ),
/// ],
/// ),
/// ),
/// ],
/// );
/// }
/// ```

62
packages/flutter/lib/src/material/switch_list_tile.dart
View File

@ -46,7 +46,7 @@ enum _SwitchListTileType { material, adaptive }
/// To show the [SwitchListTile] as disabled, pass null as the [onChanged]
/// callback.
///
/// {@tool 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;
/// });
/// },
/// );
/// }
/// ```

88
packages/flutter/lib/src/widgets/basic.dart
View File

@ -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)})',
/// ),
/// ],
/// ),
/// ),
/// ),

36
packages/flutter/lib/src/widgets/tween_animation_builder.dart
View File

@ -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),
/// );
/// }
/// ```