[Flutter]OutlinedButtonの背景色をThemeで設定するには？

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

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

方法

OutlinedButtonの背景色をThemeで設定するには、OutlinedButtonThemeDateを使います。

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

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

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

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

Theme(
  data: Theme.of(context).copyWith(
    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
            backgroundColor: color, //背景色を指定
        ),
    ),
  ),
  child: Page(),
),

OutlinedButtonThemeDataを使えば、OutlinedButtonの背景色をThemeで設定することが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Theme(
        data: Theme.of(context).copyWith(
          outlinedButtonTheme: OutlinedButtonThemeData(
            style: OutlinedButton.styleFrom(
              backgroundColor: Colors.yellow[100],
            ),
          ),
        ),
        child: Scaffold(
          body: Center(
            child: OutlinedButton(
              onPressed: () {},
              child: Text('Button'),
            ),
          ),
        ),
      ),
    );
  }