[Flutter]ElevatedButtonの色をThemeで設定するには？

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

ElevatedButtonの色をThemeで設定する方法を紹介します。

方法

ElevatedButtonの色をThemeで設定するには、ElevatedButtonThemeDateを使います。

まず、Themeの引数「data」のTheme.of(context).copyWith()を指定します。

次に、「copyWith」の引数「elevatedButtonTheme」にElevatedButtonThemeDataを指定します。

ElevatedButtonThemeDataの引数「style」には、ElevatedButton.styleFromもしくはButtonStyleを指定します。

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

Theme(
  data: Theme.of(context).copyWith(
    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
            primary: buttonColor, //ボタンの色を指定
        ),
    ),
  ),
  child: Drawer(・・・),
),

ElevatedButtonThemeDataを使えば、ElevatedButtonの色をThemeで設定することが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Theme(
        data: Theme.of(context).copyWith(
          elevatedButtonTheme: ElevatedButtonThemeData(
            style: ElevatedButton.styleFrom(
              primary: Colors.pink,
              elevation: 10,
              shadowColor: Colors.grey,
            ),
          ),
        ),
        child: Scaffold(
          body: Center(
            child: ElevatedButton(
              onPressed: () {},
              child: Text('Button'),
            ),
          ),
        ),
      ),
    );
  }