[Flutter]１つの要素を選択できるリストビュー(ListView)

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

１つの要素を選択できるリストビューを実装する方法を紹介します。

方法

１つの要素を選択できるリストビューを実装するには、StatefulWidgetとListTileを使います。

まず、選択している要素を判別するための変数を用意します。

var selectedIndex = -1;

次に、リストの要素にListTileを指定します。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return ListTile(
        title: Text('$index'),
      );
  },
),

そして、引数「onTap」に選択されたインデックスが変数に格納される処理を追加します。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return ListTile(
        onTap: () {
          setState(() {
            selectedIndex = index;
          });
        },
        title: Text('$index'),
      );
  },
),

最後に、ListTileの引数「selected」に選択されているかどうかの「bool値」を指定します。

また、引数「selectedColor」に選択されている時の色を指定します。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return ListTile(
        selected: selectedIndex == index ? true : false,
        selectedTileColor: /*選択されている時の色*/,
        onTap: () {
          setState(() {
            selectedIndex = index;
          });
        },
        title: Text('$index'),
      );
  },
),

これで１つの要素を選択できるリストビューを実装できます。

以下は、使用例です。

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

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

class _HomeState extends State<Home> {
  var selectedIndex = -1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 20,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              selected: selectedIndex == index ? true : false,
              selectedTileColor: Colors.pink.withOpacity(0.2),
              onTap: () {
                setState(() {
                  selectedIndex = index;
                });
              },
              title: Text('$index'),
            ),
          );
        },
      ),
    );
  }
}

まとめ

１つの要素を選択できるリストビューを実装するには、ListTileを使います。