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

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

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

方法

OutlinedButtonの設定をThemeでするには、OutlinedButtonThemeDataを使います。

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

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

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

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

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

Theme(
  data: Theme.of(context).copyWith(
    outlinedButtonTheme: OutlinedButtonThemeData(
        style: OutlinedButton.styleFrom(設定), //ButtonStyleでも可
    )
  ),
  child: Page(・・・),
),

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

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Theme(
        data: Theme.of(context).copyWith(
          outlinedButtonTheme: OutlinedButtonThemeData(
            style: OutlinedButton.styleFrom(
              primary: Colors.white,
              backgroundColor: Colors.blue,
              elevation: 5,
              shadowColor: Colors.grey,
            ),
          ),
        ),
        child: Scaffold(
          body: Center(
            child: OutlinedButton(
              onPressed: () {},
              child: Text('Button'),
            ),
          ),
        ),
      ),
    );
  }