[Flutter]ElevatedButton.iconの色を変えるには？

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

ElevatedButton.iconの色を変える方法を紹介します。

方法

ElevatedButton.iconの色を変えるには、引数「style」を使います。

まず、ElevatedButton.iconの引数「style」にElevatedButton.styleFromを指定します。

そして、styleFromの引数「primary」にElevatedButton.iconの色を指定します。

ElevatedButton.icon(
  style: ElevatedButton.styleFrom(
    primary: buttonColor, //ボタンの色を指定
  ),
  onPressed: () {},
  icon: Icon(Icons.flutter_dash),
  label: Text('Button'),
),

ElevatedButton.styleFromの引数「primary」に指定した色が、ElevatedButton.iconの色になります。

使用例

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      body: Center(
        child: ElevatedButton.icon(
          style: ElevatedButton.styleFrom(
            primary: Colors.red,
          ),
          onPressed: () {},
          icon: Icon(Icons.flutter_dash),
          label: Text('Button'),
        ),
      ),
    ),
  );
}