【Flutter】入力に関するウィジェット
TextField
TextFieldについては別の記事を参照してください。
DropdownButton
class MyWidget extends StatefulWidget {
@override
_MyWidget createState() => _MyWidget();
}
class _MyWidget extends State<MyWidget> {
String _selected = 'A';
void _onChanged(String? value) {
setState(() {
_selected = value!;
});
}
@override
Widget build(BuildContext context) {
return Container(
items: <String>['A', 'B', 'C', 'D', 'E']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
value: _selected,
onChanged: _onChanged,
),
);
}
}DropdownButtonには、ジェネリクス（<>）で値がどのような型であるかを指定します。
プロパティとしてはitems、value、onChangedが必須となります。
itemsには、DropdownMenuItemを使ってドロップダウンのリストを設定します。
DropdownMenuItemにもジェネリクスを使って値の型を指定し、選択した時の値（value）と表示するテキストなど（child）を設定します。
valueには、現在選択している値を設定します。
onChangedはドロップダウンボタンを押した際に発生するイベントで、選択状態を設定したりします。
nullを設定することで、disabled となります。disabled の設定については、この後記載するウィジェットでも同じです。
DropdownButtonには、その他に以下のプロパティがあります。
dropdownColor：ドロップダウンの背景色icon：ドロップダウンボタンのアイコンiconSize：アイコンサイズiconEnabledColor：enabled 時のアイコンの色iconDisabledColor：disabled 時のアイコンの色itemHeight：選択項目の高さisDense：ドロップダウンボタンの高さを低く設定isExpanded：幅を親に合わせるstyle：テキストのスタイルunderline：ドロップダウンボタンの下線
dropdownColor: Colors.red,
icon: Icon(Icons.arrow_downward),
iconSize: 20,
iconEnabledColor: Colors.green,
iconDisabledColor: Colors.red,
itemHeight: 20,
isDense: true,
isExpanded: true,
style: TextStyle(color: Colors.blue),
underline: Container(height: 1, color: Colors.green),Checkbox
class MyWidget extends StatefulWidget {
@override
_MyWidget createState() => _MyWidget();
}
class _MyWidget extends State<MyWidget> {
bool _checked = false;
@override
Widget build(BuildContext context) {
return Container(
child: Checkbox(
value: _checked,
onChanged: (bool? value) => {
setState(() {
_checked = value!;
})
},
),
);
}
}Checkboxでは、valueとonChangedが必須プロパティとなります。
valueはチェックの状態を表し、bool 値を指定します。
onChangedはチェックボックスを押した際に発生するイベントで、メソッドを指定することでチェックの状態を変化させたりします。
CheckBoxには、その他に以下のようなプロパティがあります。
activeColor：チェック時の背景色checkColor：チェック時のチェックの色shape：チェックボックスの形状side：未チェック時の線のスタイル
activeColor: Colors.red,
checkColor: Colors.yellow,
shape: CircleBorder(),
side: BorderSide(color: Colors.green),Switch
class MyWidget extends StatefulWidget {
@override
_MyWidget createState() => _MyWidget();
}
class _MyWidget extends State<MyWidget> {
bool _checked = false;
@override
Widget build(BuildContext context) {
return Container(
child: Switch(
value: _checked,
onChanged: (bool? value) => {
setState(() {
_checked = value!;
})
},
),
);
}
}Switchは、Checkboxと同じくvalueとonChangedが必須プロパティとなります。
説明も同じため割愛します。
Switchには、その他に以下のようなプロパティがあります。
activeColor：ON 状態の時の ● の色activeTrackColor：ON 状態の時の背景色
activeColor: Colors.red,
activeTrackColor: Colors.yellow,Radio
class _MyWidget extends State<MyWidget> {
String _selected = 'A';
void _onChanged(String? value) {
setState(() {
_selected = value!;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Radio(
value: 'A',
groupValue: _selected,
onChanged: _onChanged,
),
Radio(
value: 'B',
groupValue: _selected,
onChanged: _onChanged,
),
],
);
}
}Radioでは、value、groupValue、onChangedが必須プロパティとなります。
valueは、ラジオボタンに対応する値を設定し、groupValueに現在の値の状態を設定します。groupValueに同じ State を設定したラジオボタンは同じグループとなり、valueとgroupValueが一致した場合に選択状態となります。
onChangedはラジオボタンが押された際のイベントで、選択状態を設定したりします。
Radioは、activeColorプロパティによって選択時の色を変更できます。
activeColor: Colors.red,Slider
class _MyWidget extends State<MyWidget> {
double _value = 0;
void _onChanged(double? value) {
setState(() {
_value = value!;
});
}
@override
Widget build(BuildContext context) {
return Container(
child: Slider(
divisions: 10,
max: 100,
min: 0,
value: _value,
onChanged: _onChanged,
),
);
}
}Sliderでは、valueとonChangedが必須プロパティとなります。
valueは現在の値であり、double型を指定します。
スライダーを動かすことでonChangedが発火し、現在の値を設定したりします。
スライダーが選択できる値は、divisions、max、minで設定します。
例であれば、0〜100 を 10 区切りで設定できることになります。
Sliderには、その他に以下のようなプロパティがあります。
activeColor：現在の値以下の部分の色inactiveColor：現在の値を超える部分の色label：スライダーを動かした時に表示するテキストonChangeStart：スライダーを動かし始めた際に発火するイベントonChangeEnd：スライダーを動かし終わった際に発火するイベント
activeColor: Colors.red,
inactiveColor: Colors.yellow,
label: '動かしてます',
onChangeStart: (double? value) => {},
onChangeEnd: (double? value) => {},