チェックボックス
チェックボックス（Checkbox）はラジオと違い、複数の値を選択できる入力コントロールです。一般的には、チェック済みのtrueとチェックがないfalseの2つの状態を管理します。しかし、このチェックボックスはtrue/false/nullの3つの状態も管理可能です。
これらの利用ケースを使った実行例が図2です。例えば、図2での（Group C）が複数のグループのチェック状態ですべてにチェック済みとすべてにチェック無し、そして一部チェック済みという状態が必要です。このような状態を管理することもこのチェックボックスを使って行えます。このような利用例がリスト6です。
class _CheckboxWidget extends State<CheckboxWidget> {
// （1） 選択した状態を管理する変数
List _checkedValues = [];
List _childValues = [];
// : （省略）
// （2） チェックボックスの利用
Checkbox createCheck(int dataValue){
return Checkbox(
value: _checkedValues.contains(dataValue),
onChanged: (bool? value) {
setState(() {
if(value != null && value){
if(!_checkedValues.contains(dataValue)){
_checkedValues.add(dataValue);
}
}
else{
if(_checkedValues.contains(dataValue)){
_checkedValues.remove(dataValue);
}
}
});
},
);
}
// （3） グループを扱うチェックボックス
Checkbox createOtherCheckbox(){
return Checkbox(
// （4） true/false/nullの3つの状態を管理する
tristate: true,
// （5） 3つの状態に設定する
value: _childValues.length == 2 ? true : (_childValues.length == 0)? false : null,
onChanged: (bool? value){
setState(() {
// （6） チェックされたらすべて選択済みにする、それ以外は選択無しにする
if(value != null){
if(value){
_childValues = [1,2];
}
else{
_childValues = [];
}
}
else{
_childValues = [];
}
});
},
);
}
// : （省略）
// （7） 利用できないチェックボックス
Checkbox createDisableCheckbox(bool checked){
return Checkbox(
value: checked,
onChanged: null,
);
}
}
（1）でチェックボックスの状態を管理するListを用意します。通常のtrueとfalseを管理するチェックボックスが（2）のコードです。valueがtrueの場合にはチェック済みであり、falseの場合にチェック無しを示します。そして、（3）がグループを扱うためのチェックボックスのコード例で、このチェックボックスではtrue/false/nullを管理する必要があります。
そこで、（4）tristateにtrueを設定して3つの状態を管理可能にします。（5）でvalueがtrueの場合にはすべてチェック済み、falseですべてチェック無し、nullで部分的にチェックされた状態を示すようにします。また、nullの場合には、表示が「-」のようになります。
また、3つの状態の場合には、チェック状態がtrueからnull、nullからfalse、falseからtrueに変化します。少々、複雑なルールに感じますが、この例のようにnullが部分選択と解釈すれば理解しやすいと思います。そして、この状態にそって値が変わるので（6）のように状態に合わせて管理するグループの選択状態を作成します。選択できない状態にするには、他のコンポーネントと同様に（7）のようにonChangedにnullを設定すれば可能です。
まとめ
約2回にわたりテキスト入力コンポーネント（TextFormField）について説明してきました。テキスト入力というのがもっとも自由度が求められるために、それに合わせて制御も複雑になりがちです。そのため、同じことを行う方法が複数用意されています。
また、郵便番号など複数のテキスト入力を組み合わせて1つの入力のように扱うこともよくあります。そのような複雑なコンポーネントを作る際には、今回だけの情報では足りない部分が出てくることもあると思います。
その場合には、今回紹介できなかったプロパティなども含めて調べてみてください。次回も引き続き、その他の入力コンポーネントを紹介します。
