[Flutter]ListTileの右側にチェックボックスを表示するには？

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

ListTileの右側にチェックボックスを表示する方法を紹介します。

方法

ListTileの右側にチェックボックスを表示するには、引数「trailing」とCheckboxを使います。

具体的には、ListTileの引数「trailing」にCheckboxを指定します。

そして、Checkboxの引数「value」にチェック中かどうかのBool値、引数「onChanged」にはチェックボックスがタップされた時の処理を指定します。

ListTile(
  trailing: Checkbox(
    value: _value, //チェック中かどうか
    onChanged: (isChecked) {
      //タップされた時の処理
    },
  ),
  title: Text('タイトル'),
),

引数「trailing」とCheckboxを使えば、ListTileの右側にチェックボックスを表示することが出来ます。

使用例

以下は、使用例です。

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _value = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListTile(
          trailing: Checkbox(
            value: _value,
            onChanged: (isChecked) {
              setState(() {
                _value = isChecked!;
              });
            },
          ),
          title: Text('タイトル'),
        ),
      ),
    );
  }
}

[Flutter]ListTileの高さを変えるには？

ListTileの高さを変える方法を紹介します。

www.choge-blog.com

2021.12.15

[Flutter]ListTileの左側に画像を表示するには？

ListTileの左側に画像を表示する方法を紹介します。

www.choge-blog.com

2021.12.15

[Flutter]ListTileのパディングを設定するには？

ListTileのパディングを設定する方法を紹介します。

www.choge-blog.com

2021.12.15

[Flutter]ListTileの下側にだけ枠線をつけるには？

ListTileの下側にだけ枠線をつける方法を紹介します。

www.choge-blog.com

2021.12.15