CODEWITHSUNDEEP
flutterdartdarkmodeflutter-theme
Midhun Murali
Midhun Murali

Reputation: 946

Flutter : How to set 2 different styles for text button in both light and dark mode

I am trying to create custom theme data something like this.

    class CustomTheme {
      static ThemeData get lightTheme {
        return ThemeData(
          textTheme: TextTheme(
            headline1: h1.copyWith(color: Color(0xff444444)),
            headline2: h2.copyWith(color: Color(0xff444444)),
            headline3: h3.copyWith(color: Color(0xff444444)),
            headline4: h4.copyWith(color: Color(0xff444444)),
            headline5: h5.copyWith(color: Color(0xff444444)),
            headline6: h6.copyWith(color: Color(0xff444444)),
            subtitle1: TextStyle(color: Color(0xff444444)),
            subtitle2: TextStyle(color: Color(0xff444444)),
            bodyText1: TextStyle(color: Color(0xff444444)),
            bodyText2: TextStyle(color: Color(0xff444444)),
          ),
textButtonTheme: TextButtonThemeData(
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(0.0),
          side: BorderSide(color: kButtonBorderColor)),
    backgroundColor: kButtonBackgroundColor,
  ),
),
        );
      }
      static ThemeData get darkTheme {
        return ThemeData(
          textTheme: TextTheme(
            headline1: h1.copyWith(color: Color(0xffebebeb)),
            headline2: h2.copyWith(color: Color(0xffebebeb)),
            headline3: h3.copyWith(color: Color(0xffebebeb)),
            headline4: h4.copyWith(color: Color(0xffebebeb)),
            headline5: h5.copyWith(color: Color(0xffebebeb)),
            headline6: h6.copyWith(color: Color(0xffebebeb)),
            subtitle1: TextStyle(color: Color(0xffebebeb)),
            subtitle2: TextStyle(color: Color(0xffebebeb)),
            bodyText1: TextStyle(color: Color(0xffebebeb)),
            bodyText2: TextStyle(color: Color(0xffebebeb)),
          ),
textButtonTheme: TextButtonThemeData(
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(0.0),
          side: BorderSide(color: kButtonBorderColor)),
    backgroundColor: kButtonBackgroundColorDark,
  ),
),
        );
      }
    }

My requirement is, I have two different button styles(2 for each light and dark mode) as shown below.

2 different buttons for light theme

For dark theme

As you can see from my code, I can only give one background colour for my button style for a light and dark theme. I cannot set an additional textbuttontheme in the theme data. How can I set these 2 button styles inside my theme data? or is there any other method to handle 2 different styles for both light and dark theme?

Upvotes: 3

Views: 1578

Answers (1)

Guillaume Roux
Guillaume Roux

Reputation: 7308

You can't do that. As you have seen by yourself already the ThemeData class only has 1 property for each type of button theme. My advice for you would be to create a custom widget for your button using the TextButtonTheme widget to override the default theme and the Theme.of(context).brightness to define if you are on light or dark mode.

Here is a code sample that could help you:

class MyStyledButton extends StatelessWidget {
  final Widget child;
  final VoidCallback? onPressed;

  MyStyledButton({
    required this.child,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    final currentTheme = Theme.of(context);
    final isDarkTheme = currentTheme.brightness == Brightness.dark;
    return TextButtonTheme(
      data: TextButtonThemeData(
        style: TextButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(0.0),
          ),
          backgroundColor: isDarkTheme ? Color(0xffebebeb) : Color(0xff444444),
        ),
      ),
      child: TextButton(
        child: child,
        onPressed: onPressed,
      ),
    );
  }
}

Upvotes: 3

Related Questions