1// Copyright 2015 The Chromium Authors. All rights reserved. 2// Use of this source code is governed by a BSD-style license that can be 3// found in the LICENSE file. 4 5import 'package:flutter/material.dart'; 6 7import '../../gallery/demo.dart'; 8 9const String _checkboxText = 10 'Checkboxes allow the user to select multiple options from a set. ' 11 'A normal checkbox\'s value is true or false and a tristate checkbox\'s ' 12 'value can also be null.'; 13 14const String _checkboxCode = 'selectioncontrols_checkbox'; 15 16const String _radioText = 17 'Radio buttons allow the user to select one option from a set. Use radio ' 18 'buttons for exclusive selection if you think that the user needs to see ' 19 'all available options side-by-side.'; 20 21const String _radioCode = 'selectioncontrols_radio'; 22 23const String _switchText = 24 'On/off switches toggle the state of a single settings option. The option ' 25 'that the switch controls, as well as the state it’s in, should be made ' 26 'clear from the corresponding inline label.'; 27 28const String _switchCode = 'selectioncontrols_switch'; 29 30class SelectionControlsDemo extends StatefulWidget { 31 static const String routeName = '/material/selection-controls'; 32 33 @override 34 _SelectionControlsDemoState createState() => _SelectionControlsDemoState(); 35} 36 37class _SelectionControlsDemoState extends State<SelectionControlsDemo> { 38 @override 39 Widget build(BuildContext context) { 40 final List<ComponentDemoTabData> demos = <ComponentDemoTabData>[ 41 ComponentDemoTabData( 42 tabName: 'CHECKBOX', 43 description: _checkboxText, 44 demoWidget: buildCheckbox(), 45 exampleCodeTag: _checkboxCode, 46 documentationUrl: 'https://docs.flutter.io/flutter/material/Checkbox-class.html', 47 ), 48 ComponentDemoTabData( 49 tabName: 'RADIO', 50 description: _radioText, 51 demoWidget: buildRadio(), 52 exampleCodeTag: _radioCode, 53 documentationUrl: 'https://docs.flutter.io/flutter/material/Radio-class.html', 54 ), 55 ComponentDemoTabData( 56 tabName: 'SWITCH', 57 description: _switchText, 58 demoWidget: buildSwitch(), 59 exampleCodeTag: _switchCode, 60 documentationUrl: 'https://docs.flutter.io/flutter/material/Switch-class.html', 61 ), 62 ]; 63 64 return TabbedComponentDemoScaffold( 65 title: 'Selection controls', 66 demos: demos, 67 ); 68 } 69 70 bool checkboxValueA = true; 71 bool checkboxValueB = false; 72 bool checkboxValueC; 73 int radioValue = 0; 74 bool switchValue = false; 75 76 void handleRadioValueChanged(int value) { 77 setState(() { 78 radioValue = value; 79 }); 80 } 81 82 Widget buildCheckbox() { 83 return Align( 84 alignment: const Alignment(0.0, -0.2), 85 child: Column( 86 mainAxisSize: MainAxisSize.min, 87 children: <Widget>[ 88 Row( 89 mainAxisSize: MainAxisSize.min, 90 children: <Widget>[ 91 Checkbox( 92 value: checkboxValueA, 93 onChanged: (bool value) { 94 setState(() { 95 checkboxValueA = value; 96 }); 97 }, 98 ), 99 Checkbox( 100 value: checkboxValueB, 101 onChanged: (bool value) { 102 setState(() { 103 checkboxValueB = value; 104 }); 105 }, 106 ), 107 Checkbox( 108 value: checkboxValueC, 109 tristate: true, 110 onChanged: (bool value) { 111 setState(() { 112 checkboxValueC = value; 113 }); 114 }, 115 ), 116 ], 117 ), 118 Row( 119 mainAxisSize: MainAxisSize.min, 120 children: const <Widget>[ 121 // Disabled checkboxes 122 Checkbox(value: true, onChanged: null), 123 Checkbox(value: false, onChanged: null), 124 Checkbox(value: null, tristate: true, onChanged: null), 125 ], 126 ), 127 ], 128 ), 129 ); 130 } 131 132 Widget buildRadio() { 133 return Align( 134 alignment: const Alignment(0.0, -0.2), 135 child: Column( 136 mainAxisSize: MainAxisSize.min, 137 children: <Widget>[ 138 Row( 139 mainAxisSize: MainAxisSize.min, 140 children: <Widget>[ 141 Radio<int>( 142 value: 0, 143 groupValue: radioValue, 144 onChanged: handleRadioValueChanged, 145 ), 146 Radio<int>( 147 value: 1, 148 groupValue: radioValue, 149 onChanged: handleRadioValueChanged, 150 ), 151 Radio<int>( 152 value: 2, 153 groupValue: radioValue, 154 onChanged: handleRadioValueChanged, 155 ), 156 ], 157 ), 158 // Disabled radio buttons 159 Row( 160 mainAxisSize: MainAxisSize.min, 161 children: const <Widget>[ 162 Radio<int>( 163 value: 0, 164 groupValue: 0, 165 onChanged: null, 166 ), 167 Radio<int>( 168 value: 1, 169 groupValue: 0, 170 onChanged: null, 171 ), 172 Radio<int>( 173 value: 2, 174 groupValue: 0, 175 onChanged: null, 176 ), 177 ], 178 ), 179 ], 180 ), 181 ); 182 } 183 184 Widget buildSwitch() { 185 return Align( 186 alignment: const Alignment(0.0, -0.2), 187 child: Row( 188 mainAxisSize: MainAxisSize.min, 189 children: <Widget>[ 190 Switch.adaptive( 191 value: switchValue, 192 onChanged: (bool value) { 193 setState(() { 194 switchValue = value; 195 }); 196 }, 197 ), 198 // Disabled switches 199 const Switch.adaptive(value: true, onChanged: null), 200 const Switch.adaptive(value: false, onChanged: null), 201 ], 202 ), 203 ); 204 } 205} 206