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

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

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

方法

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

まず、ウェジェットをThemeでラップします。

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

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

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

あとはElvatedButtonの設定を、ElevatedButton.styleFromもしくはButtonStyleでします。

Theme(
  data: Theme.of(context).copyWith(
    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(設定), //ButtonStyleでも可
    )
  ),
  child: Page(・・・),
),

ElevatedButton.styleFromもしくはButtonStyleの設定が、ThemeとしてElevatedButtonに反映されます。

使用例

  @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'),
            ),
          ),
        ),
      ),
    );
  }