Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Doc Samples For CheckboxListTile, RadioListTile and SwitchListTile #32703

Merged
merged 35 commits into from May 17, 2019
Merged
Changes from 14 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
367d837
Moved Radio documentation line to be above sample
shihaohong May 14, 2019
43db79b
Added LabeledRadio sample
shihaohong May 14, 2019
83f3d97
Improve sentence in doc
shihaohong May 14, 2019
9fe9216
Add missing comma
shihaohong May 14, 2019
64911ae
Add LabeledCheckbox sample
shihaohong May 14, 2019
402a7ac
Add LabeledSwitch sample
shihaohong May 14, 2019
314cb54
Update doc wording
shihaohong May 14, 2019
39d29f7
Switch Container to Padding in examples
shihaohong May 14, 2019
432cee6
Update SwitchListTile to include tappable RichText
shihaohong May 14, 2019
6c3f736
Refactor LabeledRadio to be LabeledLinkedRadio
shihaohong May 14, 2019
b438f3d
Remove InkWell from SwitchListTile example
shihaohong May 14, 2019
9c13cb0
Update to Checkbox RichText Example
shihaohong May 14, 2019
b42e570
Fix incorrect usage of checkbox widgets in switch sample
shihaohong May 14, 2019
c8bc7fd
Update helper widget references
shihaohong May 14, 2019
db8f0d1
Fix sample code import block
shihaohong May 15, 2019
2b7e669
Improve code sample class names
shihaohong May 15, 2019
b4edf2d
Added explanation to Semantics samples
shihaohong May 15, 2019
f420964
Fix accidental paragraph deletion
shihaohong May 15, 2019
5661391
Added second example to RadioListTile
shihaohong May 15, 2019
0ffd80e
Added second example to CheckboxListTile
shihaohong May 15, 2019
ca040d9
Fix location of tool sample starting point
shihaohong May 15, 2019
787b9cf
Added second example to SwitchListTile
shihaohong May 15, 2019
89247b6
Fix CustomLabeledRadio Example
shihaohong May 15, 2019
582f83e
Fix LabeledRadio example to use groupValue correctly on InkWell tap
shihaohong May 15, 2019
62d3cb0
Update description of linked label widgets
shihaohong May 16, 2019
8271570
Update print string in linked label examples
shihaohong May 16, 2019
8f1094e
Added reference to Semantics docs
shihaohong May 16, 2019
693f3ba
Update wording of RichText reference in sample
shihaohong May 16, 2019
73a26f8
Update semantics paragraph explanation
shihaohong May 16, 2019
c3ff428
Reverse order of switch/checkbox with label in samples
shihaohong May 16, 2019
cd1488d
increased padding, made const padding
shihaohong May 16, 2019
61542ba
code cleanup
shihaohong May 16, 2019
64f3519
Improve semantics section description
shihaohong May 16, 2019
a965b2b
Improve simple Switch/Radio/CheckboxListTile samples
shihaohong May 16, 2019
4eba4dc
Added assets to samples
shihaohong May 16, 2019
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -57,6 +57,88 @@ import 'theme_data.dart';
/// ```
/// {@end-tool}
///
/// ## CheckboxListTile isn't exactly what I want
///
/// If the way CheckboxListTile pads and positions its elements isn't quite
/// what you're looking for, you can create custom labeled checkbox widgets by
/// combining [Checkbox] with other widgets, such as [RichText] and [Padding].
///
/// {@tool snippet --template=stateful_widget_scaffold}
///
/// Here is an example of a custom LabeledLinkedCheckbox widget, but you can
/// easily make your own configurable widget.
///
/// ```dart code-imports
/// import 'package:flutter/gestures.dart';
/// ```
/// ```dart preamble
/// class LabeledLinkedCheckbox extends StatelessWidget {
This conversation was marked as resolved by shihaohong

This comment has been minimized.

Copy link
@chunhtai

chunhtai May 15, 2019

Contributor

I didn't think twice when i made up this name, LinkedLabelCheckbox may be a better name.

This comment has been minimized.

Copy link
@shihaohong

shihaohong May 15, 2019

Author Contributor

I'll change it, I think it's better if the readers are less confused by the naming 😄

/// const LabeledLinkedCheckbox({
/// this.label,
/// this.padding,
/// this.value,
/// this.onChanged,
/// });
///
/// final String label;
/// final EdgeInsets padding;
/// final bool value;
/// final Function onChanged;
///
/// @override
/// Widget build(BuildContext context) {
/// return Padding(
/// padding: padding,
/// child: Row(
/// children: <Widget>[
/// Checkbox(
/// value: value,
/// onChanged: (bool newValue) {
/// onChanged(newValue);
/// },
/// ),
/// RichText(
/// text: TextSpan(
/// text: label,
/// style: TextStyle(
/// color: Colors.blueAccent,
/// decoration: TextDecoration.underline,
/// ),
/// recognizer: TapGestureRecognizer()
/// ..onTap = () {
/// print('Link has been tapped.');
This conversation was marked as resolved by shihaohong

This comment has been minimized.

Copy link
@HansMuller

HansMuller May 15, 2019

Contributor

Maybe 'Label has been tapped'

/// },
/// ),
/// ),
/// ],
/// ),
/// );
/// }
/// }
/// ```
/// ```dart
/// bool isSelected = false;
///
/// @override
/// Widget build(BuildContext context) {
/// return Scaffold(
/// body: Center(
/// child: LabeledLinkedCheckbox(
/// label: 'Linked, tappable label text',
/// padding: EdgeInsets.symmetric(horizontal: 5.0),
/// value: isSelected,
/// onChanged: (bool newValue) {
/// setState(() {
/// isSelected = newValue;
/// });
/// },
/// ),
/// ),
/// );
/// }
/// ```
/// {@end-tool}
///
/// See also:
///
/// * [ListTileTheme], which can be used to affect the style of list tiles,
@@ -42,6 +42,8 @@ const double _kInnerRadius = 4.5;
/// This causes the buttons to rebuild with the updated `groupValue`, and
/// therefore the selection of the second button.
///
/// Requires one of its ancestors to be a [Material] widget.
///
/// ```dart preamble
/// enum SingingCharacter { lafayette, jefferson }
/// ```
@@ -80,8 +82,6 @@ const double _kInnerRadius = 4.5;
/// ```
/// {@end-tool}
///
/// Requires one of its ancestors to be a [Material] widget.
///
/// See also:
///
/// * [RadioListTile], which combines this widget with a [ListTile] so that
@@ -72,6 +72,106 @@ import 'theme_data.dart';
/// ```
/// {@end-tool}
///
/// ## RadioListTile isn't exactly what I want
///
/// If the way RadioListTile pads and positions its elements isn't quite what
/// you're looking for, you can create custom labeled radio widgets by
/// combining [Radio] with other widgets, such as [RichText] and [Padding].
///
/// {@tool snippet --template=stateful_widget_scaffold}
///
/// Here is an example of a custom LabeledLinked Radio widget, but you can
/// easily make your own configurable widget.
///
/// ```dart code-imports
/// import 'package:flutter/gestures.dart';
/// ```
/// ```dart preamble
/// class LabeledLinkedRadio extends StatelessWidget {
/// const LabeledLinkedRadio({
/// this.label,
/// this.padding,
/// this.groupValue,
/// this.value,
/// this.onChanged,
/// });
///
/// final String label;
/// final EdgeInsets padding;
/// final bool groupValue;
/// final bool value;
/// final Function onChanged;
///
/// @override
/// Widget build(BuildContext context) {
/// return Padding(
/// padding: padding,
/// child: Row(
/// children: <Widget>[
/// Radio<bool>(
/// groupValue: groupValue,
/// value: value,
/// onChanged: (bool newValue) {
/// onChanged(newValue);
/// }
/// ),
/// RichText(
/// text: TextSpan(
/// text: label,
/// style: TextStyle(
/// color: Colors.blueAccent,
/// decoration: TextDecoration.underline,
/// ),
/// recognizer: TapGestureRecognizer()
/// ..onTap = () {
/// print('Link has been tapped.');
/// },
/// ),
/// ),
/// ],
/// ),
/// );
/// }
/// }
/// ```
/// ```dart
/// bool isRadioSelected = false;
///
/// @override
/// Widget build(BuildContext context) {
/// return Scaffold(
/// body: Column(
/// mainAxisAlignment: MainAxisAlignment.center,
/// children: <Widget>[
/// LabeledLinkedRadio(
/// label: 'First tappable label text',
/// padding: EdgeInsets.symmetric(horizontal: 5.0),
/// value: true,
/// groupValue: isRadioSelected,
/// onChanged: (bool newValue) {
/// setState(() {
/// isRadioSelected = newValue;
/// });
/// },
/// ),
/// LabeledLinkedRadio(
/// label: 'Second tappable label text',
/// padding: EdgeInsets.symmetric(horizontal: 5.0),
/// value: false,
/// groupValue: isRadioSelected,
/// onChanged: (bool newValue) {
/// setState(() {
/// isRadioSelected = newValue;
/// });
/// },
/// ),
/// ],
/// ),
/// );
/// }
/// ```
/// {@end-tool}
///
/// See also:
///
/// * [ListTileTheme], which can be used to affect the style of list tiles,
@@ -67,6 +67,88 @@ enum _SwitchListTileType { material, adaptive }
/// ```
/// {@end-tool}
///
/// ## SwitchListTile isn't exactly what I want
///
/// If the way SwitchListTile pads and positions its elements isn't quite what
/// you're looking for, you can create custom labeled switch widgets by
/// combining [Switch] with other widgets, such as [RichText] and [Padding].
///
/// {@tool snippet --template=stateful_widget_scaffold}
///
/// Here is an example of a custom LabeledLinkedCheckbox widget, but you can
/// easily make your own configurable widget.
///
/// ```dart code-imports
/// import 'package:flutter/gestures.dart';
/// ```
/// ```dart preamble
/// class LabeledLinkedSwitch extends StatelessWidget {
/// const LabeledLinkedSwitch({
/// this.label,
/// this.padding,
/// this.value,
/// this.onChanged,
/// });
///
/// final String label;
/// final EdgeInsets padding;
/// final bool value;
/// final Function onChanged;
///
/// @override
/// Widget build(BuildContext context) {
/// return Padding(
/// padding: padding,
/// child: Row(
/// children: <Widget>[
/// Switch(
/// value: value,
/// onChanged: (bool newValue) {
/// onChanged(newValue);
/// },
/// ),
/// RichText(
/// text: TextSpan(
/// text: label,
/// style: TextStyle(
/// color: Colors.blueAccent,
/// decoration: TextDecoration.underline,
/// ),
/// recognizer: TapGestureRecognizer()
/// ..onTap = () {
/// print('Link has been tapped.');
/// },
/// ),
/// ),
/// ],
/// ),
/// );
/// }
/// }
/// ```
/// ```dart
/// bool isSelected = false;
///
/// @override
/// Widget build(BuildContext context) {
/// return Scaffold(
/// body: Center(
/// child: LabeledLinkedSwitch(
/// label: 'Linked, tappable label text',
/// padding: EdgeInsets.symmetric(horizontal: 5.0),
/// value: isSelected,
/// onChanged: (bool newValue) {
/// setState(() {
/// isSelected = newValue;
/// });
/// },
/// ),
/// ),
/// );
/// }
/// ```
/// {@end-tool}
///
/// See also:
///
/// * [ListTileTheme], which can be used to affect the style of list tiles,
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.