Flutter図鑑

Checkbox

Checkbox Widgetはユーザーから一つまたは複数の情報を選択させる場合に有効です。
ここではFlutterから提供されているCheckbox Widgetの使い方と応用例を解説します。

基本的な使用方法

  • Checkbox

Checkboxは一般的なシンプルなチェックボックスのWidgetです。
onChangeの値をNullにすることで、フィールドを非活性にすることができます。

Checkbox(
  value: isChecked,
  onChanged: (val) {
    if (val == null) return;
    setState(() {
      isChecked = val;
    });
  }
),
Checkbox(
  value: isChecked, 
  onChanged: null
)

ラベル付きのチェックボックス

  • CheckboxListTile

CheckboxListTileはラベル付きのCheckboxを作成したい場合に有効です。
titleを使用することで、Checkboxにラベルをつけることができます。

Checkbox()と同様に、onChangeの値をNullにすることで、フィールドを非活性にすることができます。

SizedBox(
  width: 300,
  child: CheckboxListTile(
    title: const Text("IconLabel"),
    subtitle: const Text("Label with description"),
    secondary: const Icon(Icons.notifications_none_rounded),
    value: isChecked,
    onChanged: (value) {
      if (value == null) return;
      setState(() {
        isChecked = value;
      });
    },
  ),
),

色の変更

activeColor: value=true の時の背景の色
hoverColor: カーソルホバー時の背景の色
などの値を変更することで、Checkbox Widgetでは細かく色を指定することができます。

Checkbox(
  activeColor: Colors.blue,
  hoverColor: Colors.blue[50],
  value: isChecked,
  onChanged: (value) {
    if (value == null) return;
    setState(() {
      isChecked = value;
    });
  }
),

Validation

  • FormField

Checkbox Widgetで入力値の検証を行うためにはFormFieldを使用することで対応できます。
Form()で囲い、formKeyを設定しなければならないことに注意してください。

validatorの値を組み換えれば自在にValidationを作成することができます。

FormField(
  autovalidateMode: AutovalidateMode.always,
  initialValue: false,
  validator: (value) {
    if (value != true) {
      return "You need to accept terms!";
    }
    return null;
  },
  builder: (FormFieldState<bool> state) {
    return SizedBox(
      width: 300,
      child: CheckboxListTile(
          title: const Text("Agree Terms of Service"),
          subtitle: state.hasError
              ? Text(
                  state.errorText!,
                  style: const TextStyle(color: Colors.red),
                )
              : null
          value: state.value,
          onChanged: (val) {
            state.didChange(val);
          }),
    );
  }
)

API

さらに詳しく知りたい場合は、以下の公式ドキュメントから参照してください。

Previous
Next