[Flutter]アイコンとテキストのボタンを作る方法

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

アイコンとテキストを一緒にしているボタンを作る方法を紹介します。

方法

アイコンとテキストが一緒になっているボタンを作るには、ElevatedButtonもしくはTextButtonのiconコンストラクタを使います。

ElevatedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.search), //アイコン
  label: Text('検索'), //テキスト
),
TextButton.icon(
  onPressed: () {},
  icon: Icon(Icons.settings), //アイコン
  label: Text('設定'), //テキスト
)

ElevatedIconもしくはTextButtonの引数「icon」でアイコン、引数「label」でテキストの設定をします。

このように「iconコンストラクタ」を使うことで、ボタン内にアイコンとテキストを並べて表示することが出来ます。

まとめ

アイコンとテキストが一緒になっているボタンを作るには、ElevatedButtonやTextButtonの「icon」コンストラクタを使います。

「iconコンストラクタ」の引数の「icon」と「label」を使うことで、簡単にアイコンとテキストのボタンを作ることが出来ます。

Just a moment...

stackoverflow.com