FlutterでHookWidgetを使用してRadioListTileを作成しよう！

こんにちは。エキサイトの奥田です。

Advent Calendarの季節が今年もやってきました。
昨年同様、エキサイトホールディングス Advent Calendarで毎日投稿される予定です。様々な話題が投稿されるのでぜひ閲覧してみてください！

今回はFlutterでHookWidgetを使用したラジオボタンの実装についての記事を書いていきます。

完成品

下記の画像のようなRadioButtonを含んだリストを作成します。挙動としては対象のリストをクリックした場合に対象のアイテムに選択状態が切り替わることを実現します。

実装内容

class MyHomePage extends HookWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final sampleList = [
      'サンプル1',
      'サンプル2',
      'サンプル3',
      'サンプル4',
      'サンプル5',
    ];

    //選択しているアイテムのindexを初期値0として保持
    final selectedIndex = useState(0);

    return Scaffold(
      appBar: AppBar(
        title: const Text('ラジオボタン'),
      ),
      body: ListView.builder(
        //対象アイテムの数を取得
        itemCount: sampleList.length,
        itemBuilder: (_, index) {
          final sampleItem = sampleList[index];
          return RadioListTile(
            title: Text(sampleItem),
            value: index,
            //ラジオボタンが対象とするグループを指定
            groupValue: selectedIndex.value,
            onChanged: (int? value) {
              //ラジオボタンが変更された場合に選択されたindexを渡す
              selectedIndex.value = index;
            },
          );
        },
      ),
    );
  }
}