Skip to content

F
Front-End
Unverified Commit 11d81b11 authored by Hans Muller's avatar Hans Muller Committed by GitHub
Browse files
Options

Add OutlineButton, Tristate Checkbox to Flutter Gallery (#15312)

parent 465929f7
Hide whitespace changes
Inline Side-by-side
Showing with 202 additions and 36 deletions
examples/flutter_gallery/lib/demo/material/buttons_demo.dart
View file @ 11d81b11
...@@ -18,6 +18,12 @@ const String _flatText = 'A flat button displays an ink splash on press ' ...@@ -18,6 +18,12 @@ const String _flatText = 'A flat button displays an ink splash on press '
const String _flatCode = 'buttons_flat'; 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 = const String _dropdownText =
'A dropdown button displays a menu that\'s used to select a value from a ' '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 ' 'small set of values. The button displays the current value and a down '
...@@ -62,6 +68,12 @@ class _ButtonsDemoState extends State<ButtonsDemo> { ...@@ -62,6 +68,12 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
demoWidget: buildFlatButton(), demoWidget: buildFlatButton(),
exampleCodeTag: _flatCode, exampleCodeTag: _flatCode,
), ),
new ComponentDemoTabData(
tabName: 'OUTLINE',
description: _outlineText,
demoWidget: buildOutlineButton(),
exampleCodeTag: _outlineCode,
),
new ComponentDemoTabData( new ComponentDemoTabData(
tabName: 'DROPDOWN', tabName: 'DROPDOWN',
description: _dropdownText, description: _dropdownText,
...@@ -91,19 +103,41 @@ class _ButtonsDemoState extends State<ButtonsDemo> { ...@@ -91,19 +103,41 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
Widget buildRaisedButton() { Widget buildRaisedButton() {
return new Align( return new Align(
alignment: const Alignment(0.0, -0.2), alignment: const Alignment(0.0, -0.2),
child: new ButtonBar( child: new Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
new RaisedButton( new ButtonBar(
child: const Text('RAISED BUTTON'), mainAxisSize: MainAxisSize.min,
onPressed: () { children: <Widget>[
// Perform some action new RaisedButton(
}, child: const Text('RAISED BUTTON'),
onPressed: () {
// Perform some action
},
),
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,
),
],
), ),
const RaisedButton(
child: const Text('DISABLED'),
onPressed: null,
)
], ],
), ),
); );
...@@ -112,19 +146,84 @@ class _ButtonsDemoState extends State<ButtonsDemo> { ...@@ -112,19 +146,84 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
Widget buildFlatButton() { Widget buildFlatButton() {
return new Align( return new Align(
alignment: const Alignment(0.0, -0.2), alignment: const Alignment(0.0, -0.2),
child: new ButtonBar( child: new Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
new FlatButton( new ButtonBar(
child: const Text('FLAT BUTTON'), mainAxisSize: MainAxisSize.min,
onPressed: () { children: <Widget>[
// Perform some action new FlatButton(
}, child: const Text('FLAT BUTTON'),
onPressed: () {
// Perform some action
},
),
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,
),
],
), ),
const FlatButton(
child: const Text('DISABLED'),
onPressed: null,
)
], ],
), ),
); );
......
examples/flutter_gallery/lib/demo/material/selection_controls_demo.dart
View file @ 11d81b11
...@@ -7,7 +7,9 @@ import 'package:flutter/material.dart'; ...@@ -7,7 +7,9 @@ import 'package:flutter/material.dart';
import '../../gallery/demo.dart'; import '../../gallery/demo.dart';
const String _checkboxText = 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'; const String _checkboxCode = 'selectioncontrols_checkbox';
...@@ -64,6 +66,7 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> { ...@@ -64,6 +66,7 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
bool checkboxValueA = true; bool checkboxValueA = true;
bool checkboxValueB = false; bool checkboxValueB = false;
bool checkboxValueC;
int radioValue = 0; int radioValue = 0;
bool switchValue = false; bool switchValue = false;
...@@ -82,24 +85,40 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> { ...@@ -82,24 +85,40 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
new Row( new Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
new Checkbox(value: checkboxValueA, onChanged: (bool value) { new Checkbox(
setState(() { value: checkboxValueA,
checkboxValueA = value; onChanged: (bool value) {
}); setState(() {
}), checkboxValueA = value;
new Checkbox(value: checkboxValueB, onChanged: (bool value) { });
setState(() { },
checkboxValueB = 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( new Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: const <Widget>[ children: const <Widget>[
// Disabled checkboxes // Disabled checkboxes
const Checkbox(value: true, onChanged: null), 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),
] ]
) )
] ]
......
examples/flutter_gallery/lib/gallery/example_code.dart
View file @ 11d81b11
...@@ -29,8 +29,45 @@ const RaisedButton( ...@@ -29,8 +29,45 @@ const RaisedButton(
child: const Text('BUTTON TITLE'), child: const Text('BUTTON TITLE'),
onPressed: null 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 // 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 // START buttons_flat
// Create a flat button. // Create a flat button.
...@@ -123,9 +160,20 @@ new Checkbox( ...@@ -123,9 +160,20 @@ new Checkbox(
onChanged: (bool value) { onChanged: (bool value) {
setState(() { setState(() {
checkboxValue = value; checkboxValue = value;
} });
); },
}); );
// Create a tristate checkbox.
new Checkbox(
tristate: true,
value: checkboxValue,
onChanged: (bool value) {
setState(() {
checkboxValue = value;
});
},
);
// Create a disabled checkbox. // Create a disabled checkbox.
// Checkboxes are disabled when onChanged isn't // Checkboxes are disabled when onChanged isn't
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab