[Flutter]ボタンを横に並べる方法

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

ボタンを横に並べる方法を紹介します。

方法

ボタンを横に並べる方法は２つあります。

ButtonBar

１つは、ButtonBarを使う方法です。

ButtonBarの引数「children」に、並べるボタンをカンマ区切りで追加します。

ButtonBar(
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
  ],
),

Row

もう１つは、Rowウェジェットを使う方法です。

Rowウェジェットは、「children」に指定したウェジェットを横に並べるウェジェットです。

Row(
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
  ],
)

まとめ

ボタンを横に並べるには、次の２つのウェジェットを使います。

• ButtonBarウェジェット
• Rowウェジェット