[Flutter]チェックボックス(checkbox)を使ったリストビュー(ListView)を表示する方法

どうも、ちょげ(@chogetarou)です。

チェックボックスを使ったリストビューを表示する方法を紹介します。

方法
まとめ

方法

チェックボックスを使ったリストビューを表示するには、CheckBoxListTileウェジェットを使います。

CheckBoxListTileを使うには、まず引数「title」にチェックボックスのテキストを指定します。

次に、引数「value」にチェック中かどうかを判定する「bool値」を指定します。

最後に、引数「onChanged」でタップしたらチェックの状態が変わるようにします。

また、チェックボックスを表示する位置は、引数「controlAffinity」で指定します。

CheckboxListTile(
  title: /*テキスト*/,
  value:/*bool値*/,
  onChanged: (bool? value) {
    //チェックボックスの状態を変更
  },
  controlAffinity: /*チェックボックスの位置*/,
)

CheckboxListTileを使うことで、簡単にチェックボックスをリストビューで実装することが出来ます。

以下は、使用例です。

  var _isChecked = List.filled(20, false);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          for (var i = 0; i < 20; i++)
            CheckboxListTile(
              title: Text("item : $i"),
              value: _isChecked[i],
              onChanged: (bool? value) {
                setState(() {
                  _isChecked[i] = value!;
                });
              },
              controlAffinity: ListTileControlAffinity.leading,
            )
        ],
        itemExtent: 50,
      ),
    );
  }