[Flutter]ElevatedButtonをアイコン付きにするには？

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

ElevatedButtonをアイコンとテキストのセットにする方法を紹介します。

方法

ElevatedButtonをアイコン付きにするには、ElevatedButton.iconコンストラクタを使います。

まず、ElevatedButton.iconを用意します。

次に、ElevatedButton.iconの引数「icon」にアイコン、引数「label」にテキストを指定します。

そして、引数「onPressed」にタップされた時の処理を指定します。

ElevatedButton.icon(
  onPressed: () {
      //タップ時の処理
  },
  icon: Icon(アイコン),
  label: Text('テキスト'),
),

ElevatedButton.iconコンストラクタを使うことで、ElevatedButtonをアイコン付きにすることが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ElevatedButton.icon(
            onPressed: () {
              print("Button Tap");
            },
            icon: Icon(Icons.touch_app),
            label: Text('Button'),
          ),
        ),
      ),
    );
  }