Search code examples
flutterflutter-layoutflutter-theme

How to overwrite textButtonTheme?


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?


Solution

  • 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"),
      ),
    ),
    

    ![enter image description here

    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"),
      ),
    ),