mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00

* 🐛 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
144 lines
5.9 KiB
Markdown
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`.
|