flutterでラジオボタンを横並びにしたい

実現したいこと

前提

flutterでwebアプリのUIを作っています。
ラジオボタンやチェックボックスを横並びにしたいのですが、ネット上の下記のようなコードを参考にしていますが、
ラジオボタンやチェックボックスを増やし、ウィンドウサイズを小さくしていくとはみ出してしまいますが良い解決方法を
導き出せていません。

発生している問題・エラーメッセージ

画面サイズを小さくすることで、ラジオボタンやチェックボックスのテキストを折り返し表示するか、ウィンドウサイズが大きく時は横並びに、小さくしていくと画面サイズに合わせてチェックボックスごと折り返し表示したいと考えています。
flutterに知見のある方、ご教授お願い致します。

該当のソースコード

Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
children: [
Radio(
value: 0,
groupValue: 0,
onChanged: (value) {},
),
Text('アイテム１')
],
),
Row(
children: [
Radio(
value: 1,
groupValue: 0,
onChanged: (value) {},
),
Text('アイテム２')
],
),
Row(
children: [
Radio(
value: 2,
groupValue: 0,
onChanged: (value) {},
),
Text('アイテム３')
],
),
],
),

行動規範の内容に同意します

回答1件

ベストアンサー

Wrapを使ってみてください。
https://api.flutter.dev/flutter/widgets/Wrap-class.html

この場合の折り返しは、ウィジェット、テキスト文字列の順で行われます。
下の例は、チェックボックス＋テキスト文字列をペアにして折り返しができるようにしてみました。

dart
1Wrap(
2          children: [
3            Wrap(
4              crossAxisAlignment: WrapCrossAlignment.center,
5              children: [
6                Radio(
7                  value: 0,
8                  groupValue: 0,
9                  onChanged: (value) {},
10                ),
11                const Text('アイテム１ aldjkalsdjlfkasjdflka'),
12              ],
13            ),
14            Wrap(
15              crossAxisAlignment: WrapCrossAlignment.center,
16              children: [
17                Radio(
18                  value: 1,
19                  groupValue: 0,
20                  onChanged: (value) {},
21                ),
22                const Text('アイテム２ aldjkalsdjlfkasjdflka'),
23              ],
24            ),
25            Wrap(
26              crossAxisAlignment: WrapCrossAlignment.center,
27              children: [
28                Radio(
29                  value: 2,
30                  groupValue: 0,
31                  onChanged: (value) {},
32                ),
33                const Text('アイテム３ aldjkalsdjlfkasjdflka'),
34              ],
35            ),
36          ],
37        )