[Flutter]ラジオボタンを横並びにする方法

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

ラジオボタンを横並びにする方法を紹介します。

方法

ラジオボタンを横並びにするには、Rowウェジェットを使います。

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('アイテム３')
      ],
    ),
  ],
),

Rowウェジェットの「children」にラジオボタンをカンマ区切りで指定します。

また、Rowウェジェットで、横並びにした時のレイアウトをしやすくするために、ラジオボタンをRowなどのウェジェットでまとめておきます。