Add OutlineButton, Tristate Checkbox to Flutter Gallery (#15312)
diff --git a/examples/flutter_gallery/lib/demo/material/buttons_demo.dart b/examples/flutter_gallery/lib/demo/material/buttons_demo.dart index cf58a49..e63ac88 100644 --- a/examples/flutter_gallery/lib/demo/material/buttons_demo.dart +++ b/examples/flutter_gallery/lib/demo/material/buttons_demo.dart
@@ -18,6 +18,12 @@ const String _flatCode = 'buttons_flat'; +const String _outlineText = + 'Outline buttons become opaque and elevate when pressed. They are often ' + 'paired with raised buttons to indicate an alternative, secondary action.'; + +const String _outlineCode = 'buttons_outline'; + const String _dropdownText = 'A dropdown button displays a menu that\'s used to select a value from a ' 'small set of values. The button displays the current value and a down ' @@ -63,6 +69,12 @@ exampleCodeTag: _flatCode, ), new ComponentDemoTabData( + tabName: 'OUTLINE', + description: _outlineText, + demoWidget: buildOutlineButton(), + exampleCodeTag: _outlineCode, + ), + new ComponentDemoTabData( tabName: 'DROPDOWN', description: _dropdownText, demoWidget: buildDropdownButton(), @@ -91,19 +103,41 @@ Widget buildRaisedButton() { return new Align( alignment: const Alignment(0.0, -0.2), - child: new ButtonBar( + child: new Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ - new RaisedButton( - child: const Text('RAISED BUTTON'), - onPressed: () { - // Perform some action - }, + new ButtonBar( + mainAxisSize: MainAxisSize.min, + children: <Widget>[ + new RaisedButton( + child: const Text('RAISED BUTTON'), + onPressed: () { + // Perform some action + }, + ), + const RaisedButton( + child: const Text('DISABLED'), + onPressed: null, + ), + ], ), - const RaisedButton( - child: const Text('DISABLED'), - onPressed: null, - ) + new ButtonBar( + mainAxisSize: MainAxisSize.min, + children: <Widget>[ + new RaisedButton.icon( + icon: const Icon(Icons.add, size: 18.0), + label: const Text('RAISED BUTTON'), + onPressed: () { + // Perform some action + }, + ), + new RaisedButton.icon( + icon: const Icon(Icons.add, size: 18.0), + label: const Text('DISABLED'), + onPressed: null, + ), + ], + ), ], ), ); @@ -112,19 +146,84 @@ Widget buildFlatButton() { return new Align( alignment: const Alignment(0.0, -0.2), - child: new ButtonBar( + child: new Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ - new FlatButton( - child: const Text('FLAT BUTTON'), - onPressed: () { - // Perform some action - }, + new ButtonBar( + mainAxisSize: MainAxisSize.min, + children: <Widget>[ + new FlatButton( + child: const Text('FLAT BUTTON'), + onPressed: () { + // Perform some action + }, + ), + const FlatButton( + child: const Text('DISABLED'), + onPressed: null, + ), + ], ), - const FlatButton( - child: const Text('DISABLED'), - onPressed: null, - ) + new ButtonBar( + mainAxisSize: MainAxisSize.min, + children: <Widget>[ + new FlatButton.icon( + icon: const Icon(Icons.add_circle_outline, size: 18.0), + label: const Text('FLAT BUTTON'), + onPressed: () { + // Perform some action + }, + ), + new FlatButton.icon( + icon: const Icon(Icons.add_circle_outline, size: 18.0), + label: const Text('DISABLED'), + onPressed: null, + ), + ], + ), + ], + ), + ); + } + + Widget buildOutlineButton() { + return new Align( + alignment: const Alignment(0.0, -0.2), + child: new Column( + mainAxisSize: MainAxisSize.min, + children: <Widget>[ + new ButtonBar( + mainAxisSize: MainAxisSize.min, + children: <Widget>[ + new OutlineButton( + child: const Text('OUTLINE BUTTON'), + onPressed: () { + // Perform some action + }, + ), + const RaisedButton( + child: const Text('DISABLED'), + onPressed: null, + ), + ], + ), + new ButtonBar( + mainAxisSize: MainAxisSize.min, + children: <Widget>[ + new OutlineButton.icon( + icon: const Icon(Icons.add, size: 18.0), + label: const Text('OUTLINE BUTTON'), + onPressed: () { + // Perform some action + }, + ), + new OutlineButton.icon( + icon: const Icon(Icons.add, size: 18.0), + label: const Text('DISABLED'), + onPressed: null, + ), + ], + ), ], ), );
diff --git a/examples/flutter_gallery/lib/demo/material/selection_controls_demo.dart b/examples/flutter_gallery/lib/demo/material/selection_controls_demo.dart index 1f9ca58..a5f8aaf 100644 --- a/examples/flutter_gallery/lib/demo/material/selection_controls_demo.dart +++ b/examples/flutter_gallery/lib/demo/material/selection_controls_demo.dart
@@ -7,7 +7,9 @@ import '../../gallery/demo.dart'; const String _checkboxText = - 'Checkboxes allow the user to select multiple options from a set.'; + 'Checkboxes allow the user to select multiple options from a set. ' + 'A normal checkbox\'s value is true or false and a tristate checkbox\'s ' + 'value can also be null.'; const String _checkboxCode = 'selectioncontrols_checkbox'; @@ -64,6 +66,7 @@ bool checkboxValueA = true; bool checkboxValueB = false; + bool checkboxValueC; int radioValue = 0; bool switchValue = false; @@ -82,24 +85,40 @@ new Row( mainAxisSize: MainAxisSize.min, children: <Widget>[ - new Checkbox(value: checkboxValueA, onChanged: (bool value) { - setState(() { - checkboxValueA = value; - }); - }), - new Checkbox(value: checkboxValueB, onChanged: (bool value) { - setState(() { - checkboxValueB = value; - }); - }) - ] + new Checkbox( + value: checkboxValueA, + onChanged: (bool value) { + setState(() { + checkboxValueA = value; + }); + }, + ), + new Checkbox( + value: checkboxValueB, + onChanged: (bool value) { + setState(() { + checkboxValueB = value; + }); + }, + ), + new Checkbox( + value: checkboxValueC, + tristate: true, + onChanged: (bool value) { + setState(() { + checkboxValueC = value; + }); + }, + ), + ], ), new Row( mainAxisSize: MainAxisSize.min, children: const <Widget>[ // Disabled checkboxes const Checkbox(value: true, onChanged: null), - const Checkbox(value: false, onChanged: null) + const Checkbox(value: false, onChanged: null), + const Checkbox(value: null, tristate: true, onChanged: null), ] ) ]
diff --git a/examples/flutter_gallery/lib/gallery/example_code.dart b/examples/flutter_gallery/lib/gallery/example_code.dart index 41de273..678f14f 100644 --- a/examples/flutter_gallery/lib/gallery/example_code.dart +++ b/examples/flutter_gallery/lib/gallery/example_code.dart
@@ -29,8 +29,45 @@ child: const Text('BUTTON TITLE'), onPressed: null ); + +// Create a button with an icon and a +// title. +new RaisedButton.icon( + icon: const Icon(Icons.add, size: 18.0), + label: const Text('BUTTON TITLE'), + onPressed: () { + // Perform some action + }, +); // END +// START buttons_outline +// Create an outline button. +new OutlineButton( + child: const Text('BUTTON TITLE'), + onPressed: () { + // Perform some action + } +); + +// Create a disabled button. +// Buttons are disabled when onPressed isn't +// specified or is null. +const OutlineButton( + child: const Text('BUTTON TITLE'), + onPressed: null +); + +// Create a button with an icon and a +// title. +new OutlineButton.icon( + icon: const Icon(Icons.add, size: 18.0), + label: const Text('BUTTON TITLE'), + onPressed: () { + // Perform some action + }, +); +// END // START buttons_flat // Create a flat button. @@ -123,9 +160,20 @@ onChanged: (bool value) { setState(() { checkboxValue = value; - } - ); -}); + }); + }, +); + +// Create a tristate checkbox. +new Checkbox( + tristate: true, + value: checkboxValue, + onChanged: (bool value) { + setState(() { + checkboxValue = value; + }); + }, +); // Create a disabled checkbox. // Checkboxes are disabled when onChanged isn't