How to overwrite textButtonTheme?

Question

I have defined theme for TextButton.

theme: ThemeData(
            visualDensity: VisualDensity.adaptivePlatformDensity,
            brightness: Brightness.light,
            scaffoldBackgroundColor: const Color(0xfff9f9f9),
            primaryColor: const Color(0xffff5f62),
            textButtonTheme: TextButtonThemeData(
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
                        side: const BorderSide(
                          color: Colors.black54,
                        ),
                        borderRadius: BorderRadius.circular(20))),
                    backgroundColor: MaterialStateProperty.all(Colors.white))),
            fontFamily: 'Sarabun',
            textTheme: const TextTheme(
              button: TextStyle(color: Colors.black),
            ),
          ),

but I want to use TextButton with his default look. How to overwrite this?

Answer 1

You can wrap with Theme widget and provide ThemeData(), this will provide default look.

Theme(
  data: ThemeData(),
  child: TextButton(
    onPressed: () {},
    child: Text("wrapped with Theme"),
  ),
),

If you like to customize initial theme, use

Theme(
  data: Theme.of(context).copyWith(//things you like to override.),
  child: TextButton(
    onPressed: () {},
    child: Text("wrapped with Theme"),
  ),
),

Answer 2

use .copyWith() it basically creates a copy of text style but with the given fields replaced with the new values.

see docs for more explanation

Answer 3

 return TextButton(
  onPressed: () {},
  child: Text('TextButton'),
  style: TextButton.styleFrom(),
);