flutter/dev/snippets/config/templates/README.md
Yazeed Al-Khalaf d41b1fbb50
✒ Spell Check All .md Files Related to Flutter 💙 (#61564)
* 🐛 Fix Spelling Issues in Main README.md

* 🐛 Fix spelling issues in dev README.md

* 🐛 Fix spelling issues in complex_layout README.md

* 🐛 Fix spelling issues in macrobenchmarks README.md

* 🐛 Fix spelling issues in platform_views_layout README.md

* 🐛 Fix spelling issues in test_Apps/stocks README.md

* 🐛 Fix spelling issues in bots README.md

* ✒ Spell Check dev/ci README.md

* ✒ Spell Check dev/ci/docker_linux README.md

* ✒ Spell Check dev/devicelab README.md

* ✒ Spell Check dev/docs README.md

* ✒ Spell Check dev/snippets README.md

* ✒ Spell Check dev/snippets/config/templates README.md

* ✒ Spell Check dev/tools/gen_keycodes README.md

* ✒ Spell Check dev/tools/vitool README.md

* ✒ Spell Check examples/catalog README.md

* ✒ Spell Check examples/flutter_view README.md

* ✒ Spell Check examples/image_list README.md

* ✒ Spell Check examples/layers README.md

* ✒ Spell Check examples/platform_channel README.md

* ✒ Spell Check examples/platform_channel_swift README.md

* ✒ Spell Check examples/platform_view README.md

* ✒ Spell Check packages/_flutter_web_build_script README.md

* ✒ Spell Check packages/flutter_localizations README.md

* ✒ Spell Check packages/flutter_tools README.md

* ✒ Spell Check CODE_OF_CONDUCT.md

* ✒ Spell Check dev/integration_test/android_splash_screens/splash_Screen_load_rotate README.md

* ✒ Spell Check dev/integration_test/android_views README.md

* ✒ Spell Check dev/integration_tests/flutter_driver_screenshot_test README.md

* ✒ Spell Check dev/integration_tests/flutter_gallery README.md

* ✒ Spell Check dev/integration_tests/gradle_deprecated_settings README.md

* ✒ Spell Check dev/integration_tests/ios_add2app_life_cycle README.md

* ✒ Spell Check dev/integration_tests/ios_host_app README.md

* ✒ Spell Check dev/integration_tests/ios_platform_view_tests README.md

* ✒ Spell Check dev/automated_tests/flutter_test README.md

* ✒ Spell Check .github/PULL_REQUEST_TEMPLATE.md

* ✒ Spell Check .hithub/ISSUE_TEMPLATE/ACTIVATION.md

* ✒ Spell Check .github/ISSUE_TEMPLATE/BUG.md

* ✒ Spell Check .github/ISSUE_TEMPLATE/feature_request.md

* ✒ Spell Check .github/ISSUE_TEMPLATE/performance_others.md

* ✒ Spell Check .github/ISSUE_TEMPLATE/performance_speed.md

* ✒ Spell Check packages/flutter_tools/doc/daemon.md

* ✒ Spell Check packages/flutter_tools/fuchsia_enrtypoint_shim/README.md

* ✒ Minimize line to 80 columns

* ✒ Minimize line to 80 columns

* ✒ Fix Typo

* ✒ Chnaged numbers to 1 for testing purposes

* ✒ Changed numbers to 1 for testing purposes

*  Remove 'a' which is a typo

* ✒ Change a sentence to be better

* ✒ Remove 'a' which is a typo

* ✒ Fix small issue

* ✒ Fix small typo

* ✒ Fix some typos

*  Remove trailing space

*  Remove trailing space

* 🐛 Fix small typo

* ✒ Fix Typo

* 🐛 Fix small bug
2020-07-22 18:23:47 -07:00

144 lines
5.9 KiB
Markdown

## Creating Code Snippets
In general, creating application snippets can be accomplished with the following
syntax inside of the dartdoc comment for a Flutter class/variable/enum/etc.:
```dart
/// {@tool snippet --template=stateful_widget}
/// Any text outside of the code blocks will be accumulated and placed at the
/// top of the snippet box as a description. Don't try and say "see the code
/// above" or "see the code below", since the location of the description may
/// change in the future. You can use dartdoc [Linking] in the description, and
/// __Markdown__ too.
///
/// ```dart preamble
/// class Foo extends StatelessWidget {
/// const Foo({this.value = ''});
///
/// String value;
///
/// @override
/// Widget build(BuildContext context) {
/// return Text(value);
/// }
/// }
/// ```
/// This will get tacked on to the end of the description above, and shown above
/// the snippet. These two code blocks will be separated by `///...` in the
/// short version of the snippet code sample.
/// ```dart
/// String myValue = 'Foo';
///
/// @override
/// Widget build(BuildContext) {
/// return const Foo(myValue);
/// }
/// ```
/// {@end-tool}
```
This will result in the template having the section that's inside "```dart"
interpolated into the template's stateful widget's state object body.
For other sections of the template, the interpolation occurs by appending the string
that comes after `code-` into the code block. For example, the
[`stateful_widget`](stateful_widget.tmpl) template contains
`{{code-imports}}`. To interpolate code into `{{code-imports}}`, you would
have to do add the following:
```dart
/// ```dart imports
/// import 'package:flutter/rendering.dart';
/// ```
```
All code within a code block in a snippet needs to be able to be run through
dartfmt without errors, so it needs to be valid code (This shouldn't be an
additional burden, since all code will also be compiled to be sure it compiles).
## Available Templates
The templates available for use as an argument to the snippets tool are as
follows:
- [`freeform`](freeform.tmpl) :
This is a simple template for which you provide everything. It has no code of
its own, just the sections for `imports`, `main`, and `preamble`. You must
provide the `main` section to have a `main()`.
### WidgetsApp Templates
These templates create a `WidgetsApp` that encloses the snippet widget. These templates import
the widgets library.
- [`stateful_widget`](stateful_widget.tmpl) :
The default code block will be placed as the body of the `State` object of a
`StatefulWidget` subclass. Because the default code block is placed as the body
of a stateful widget, you will need to implement the `build()` method and any
state variables. It also has a `preamble` in addition to the default code
block, which will be placed at the top level of the Dart file, so bare
method calls are not allowed in the preamble. The default code block is
placed as the body of a stateful widget, so you will need to implement the
`build()` method, and any state variables. It also has an `imports`
section to import additional packages. Please only import things that are part
of Flutter or part of default dependencies for a `flutter create` project.
- [`stateful_widget_ticker`](stateful_widget_ticker.tmpl) : Identical to the
`stateful_widget` template, with the addition of the `TickerProviderStateMixin`
class, enabling easy generation of animated samples.
- [`stateless_widget`](stateless_widget.tmpl) : Identical to the
`stateful_widget` template, except that the default code block is
inserted as a method (which should be the `build` method) in a
`StatelessWidget`. The `@override` before the build method is added by
the template so must be omitted from the sample code.
### MaterialApp Templates
These templates follow the same conventions as the `WidgetsApp` templates above but use a
`MaterialApp` instead. These templates import the material library.
- [`stateful_widget_material`](stateful_widget_material.tmpl)
- [`stateful_widget_material_ticker`](stateful_widget_material_ticker.tmpl)
- [`stateless_widget_material`](stateless_widget_material.tmpl)
- [`stateful_widget_scaffold`](stateful_widget_scaffold.tmpl) : Adds a `Scaffold` widget as the home
of the enclosing `MaterialApp` to wrap the stateful widget snippet. The `Scaffold` widget contains
an `AppBar`.
- [`stateful_widget_scaffold_center`](stateful_widget_scaffold_center.tmpl) : Similar to
`stateful_widget_scaffold`, except that it wraps the stateful widget with a `Center`.
- [`stateful_widget_scaffold_center_freeform_state`](stateful_widget_scaffold_center_freeform_state.tmpl) :
Similar to `stateful_widget_scaffold_center` except that the code block has
to contain the entire state class defined as:
`class _MyStatefulWidgetState extends State<MyStatefulWidget>`
- [`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 `Center`.
### CupertinoApp Templates
These templates follow the same conventions as the `WidgetsApp` templates above but use a
`CupertinoApp` instead. These templates import the Cupertino library.
- [`stateful_widget_cupertino`](stateful_widget_cupertino.tmpl)
- [`stateful_widget_cupertino_ticker`](stateful_widget_cupertino_ticker.tmpl)
- [`stateless_widget_cupertino`](stateless_widget_cupertino.tmpl)
- [`stateful_widget_cupertinoPageScaffold`](stateful_widget_cupertino_page_scaffold.tmpl) : Similar to
`stateful_widget_cupertino`, except that it wraps the stateful widget with a
`CupertinoPageScaffold`.
- [`stateless_widget_cupertinoPageScaffold`](stateless_widget_cupertino_page_scaffold.tmpl) : Similar to
`stateless_widget_cupertino`, except that it wraps the stateless widget with a
`CupertinoPageScaffold`.