flutter/examples/material_gallery/lib/demo/selection_controls_demo.dart
2016-04-08 14:33:34 -07:00

249 lines
6.2 KiB
Dart
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import '../gallery/demo.dart';
const String _checkboxText =
"# Checkboxes\n"
"Checkboxes allow the user to select multiple options from a set.";
const String _checkboxCode =
"""// Member variable holding the checkbox's value.
bool checkboxValue = false;
// Create a checkbox.
new Checkbox(
value: checkboxValue,
onChanged: (bool value) {
setState(() {
checkboxValue = value;
}
);
})
// Create a disabled checkbox.
// Checkboxes are disabled when onChanged isn't
// specified or null.
new Checkbox(value: false)""";
const String _radioText =
"# Radio buttons\n"
"Radio buttons allow the user to select one option from a set. Use radio "
"buttons for exclusive selection if you think that the user needs to see "
"all available options side-by-side.";
const String _radioCode =
"""// Member variable holding value.
int radioValue = 0;
// Method setting value.
void handleRadioValueChanged(int value) {
setState(() {
radioValue = value;
});
}
// Creates a set of radio buttons.
new Row(
children: <Widget>[
new Radio<int>(
value: 0,
groupValue: radioValue,
onChanged: handleRadioValueChanged
),
new Radio<int>(
value: 1,
groupValue: radioValue,
onChanged: handleRadioValueChanged
),
new Radio<int>(
value: 2,
groupValue: radioValue,
onChanged: handleRadioValueChanged
)
]
);
// Creates a disabled radio button.
new Radio<int>(
value: 0,
groupValue: 0
);""";
const String _switchText =
"# Switches\n"
"On/off switches toggle the state of a single settings option. The option "
"that the switch controls, as well as the state its in, should be made "
"clear from the corresponding inline label.";
const String _switchCode =
"""// Member variable holding value.
bool switchValue = false;
// Create a switch.
new Switch(
value: switchValue,
onChanged: (bool value) {
setState(() {
switchValue = value;
}
);
})
// Create a disabled switch.
// Switches are disabled when onChanged isn't
// specified or null.
new Switch(value: false)""";
class SelectionControlsDemo extends StatefulWidget {
@override
_SelectionControlsDemoState createState() => new _SelectionControlsDemoState();
}
class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
@override
Widget build(BuildContext context) {
List<ComponentDemoTabData> demos = <ComponentDemoTabData>[
new ComponentDemoTabData(
tabName: "CHECKBOX",
description: _checkboxText,
widget: buildCheckbox(),
exampleCode: _checkboxCode
),
new ComponentDemoTabData(
tabName: "RADIO",
description: _radioText,
widget: buildRadio(),
exampleCode: _radioCode
),
new ComponentDemoTabData(
tabName: "SWITCH",
description: _switchText,
widget: buildSwitch(),
exampleCode: _switchCode
)
];
return new TabbedComponentDemoScaffold(
title: 'Selection Controls',
demos: demos
);
}
bool checkboxValueA = true;
bool checkboxValueB = false;
int radioValue = 0;
bool switchValue = false;
void handleRadioValueChanged(int value) {
setState(() {
radioValue = value;
});
}
Widget buildCheckbox() {
return new Align(
alignment: new FractionalOffset(0.5, 0.4),
child: new Column(
mainAxisAlignment: MainAxisAlignment.collapse,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.collapse,
children: <Widget>[
new Checkbox(value: checkboxValueA, onChanged: (bool value) {
setState(() {
checkboxValueA = value;
});
}),
new Checkbox(value: checkboxValueB, onChanged: (bool value) {
setState(() {
checkboxValueB = value;
});
})
]
),
new Row(
mainAxisAlignment: MainAxisAlignment.collapse,
children: <Widget>[
// Disabled checkboxes
new Checkbox(value: true),
new Checkbox(value: false)
]
)
]
)
);
}
Widget buildRadio() {
return new Align(
alignment: new FractionalOffset(0.5, 0.4),
child: new Column(
mainAxisAlignment: MainAxisAlignment.collapse,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.collapse,
children: <Widget>[
new Radio<int>(
value: 0,
groupValue: radioValue,
onChanged: handleRadioValueChanged
),
new Radio<int>(
value: 1,
groupValue: radioValue,
onChanged: handleRadioValueChanged
),
new Radio<int>(
value: 2,
groupValue: radioValue,
onChanged: handleRadioValueChanged
)
]
),
// Disabled radio buttons
new Row(
mainAxisAlignment: MainAxisAlignment.collapse,
children: <Widget>[
new Radio<int>(
value: 0,
groupValue: 0
),
new Radio<int>(
value: 1,
groupValue: 0
),
new Radio<int>(
value: 2,
groupValue: 0
)
]
)
]
)
);
}
Widget buildSwitch() {
return new Align(
alignment: new FractionalOffset(0.5, 0.4),
child: new Row(
mainAxisAlignment: MainAxisAlignment.collapse,
children: <Widget>[
new Switch(value: switchValue, onChanged: (bool value) {
setState(() {
switchValue = value;
});
}),
// Disabled switches
new Switch(value: true),
new Switch(value: false)
]
)
);
}
}