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

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

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

方法

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

Row

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

Rowウェジェットは、「children」にカンマ区切りで指定した複数のボタンを、横並びに表示することが出来ます。

child: Row(
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Button1'),
    ),
    SizedBox(width: 10),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button1'),
    ),
    SizedBox(width: 10),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button1'),
    ),
  ],
),

ButtonBar

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

ButtonBarの引数「children」に、カンマ区切りで複数のボタンを指定します。

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

まとめ

ボタンを横並びにする方法は、次の２つです。

• Rowウェジェットを使う方法
• ButtonBarウェジェットを使う方法