firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hans Muller 2018-03-12 10:21:14 -07:00 committed by GitHub
parent 465929f71e
commit 11d81b11d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 202 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
examples/flutter_gallery/lib/demo/material/buttons_demo.dart
View File

@ -18,6 +18,12 @@ const String _flatText = 'A flat button displays an ink splash on press '
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 '
@ -62,6 +68,12 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
demoWidget: buildFlatButton(),
exampleCodeTag: _flatCode,
),
new ComponentDemoTabData(
tabName: 'OUTLINE',
description: _outlineText,
demoWidget: buildOutlineButton(),
exampleCodeTag: _outlineCode,
),
new ComponentDemoTabData(
tabName: 'DROPDOWN',
description: _dropdownText,
@ -91,7 +103,10 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
Widget buildRaisedButton() {
return new Align(
alignment: const Alignment(0.0, -0.2),
child: new ButtonBar(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new RaisedButton(
@ -103,7 +118,26 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
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,7 +146,10 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
Widget buildFlatButton() {
return new Align(
alignment: const Alignment(0.0, -0.2),
child: new ButtonBar(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new FlatButton(
@ -124,7 +161,69 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
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,
),
],
),
],
),
);

33
examples/flutter_gallery/lib/demo/material/selection_controls_demo.dart
View File

@ -7,7 +7,9 @@ import 'package:flutter/material.dart';
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 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
bool checkboxValueA = true;
bool checkboxValueB = false;
bool checkboxValueC;
int radioValue = 0;
bool switchValue = false;
@ -82,24 +85,40 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Checkbox(value: checkboxValueA, onChanged: (bool value) {
new Checkbox(
value: checkboxValueA,
onChanged: (bool value) {
setState(() {
checkboxValueA = value;
});
}),
new Checkbox(value: checkboxValueB, onChanged: (bool 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),
]
)
]

52
examples/flutter_gallery/lib/gallery/example_code.dart
View File

@ -29,8 +29,45 @@ const RaisedButton(
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 @@ new Checkbox(
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