How to change the text color of the button theme in Flutter

Question

If I add a theme to my app like this:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xff393e46),
        primaryColorDark: Color(0xff222831),
        accentColor: Color(0xff00adb5),
        backgroundColor: Color(0xffeeeeee),
        buttonTheme: ButtonThemeData(
          buttonColor: Color(0xff00adb5),
        )
      ),
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }
}

How do I change the text color for the button theme?

Suragch · Accepted Answer · 2019-05-17 22:12:34Z

55

If you use ButtonTextTheme.primary Flutter will automatically select the right color for you.

For example, if you make the buttonColor dark like this

  ThemeData(
    . . . 
    buttonTheme: ButtonThemeData(
      buttonColor: Colors.deepPurple,     //  <-- dark color
      textTheme: ButtonTextTheme.primary, //  <-- this auto selects the right color
    )
  ),

The text is automatically light. And if you make the buttonColor light, then the text is dark.

  ThemeData(
    . . . 
    buttonTheme: ButtonThemeData(
      buttonColor: Colors.yellow,         //  <-- light color
      textTheme: ButtonTextTheme.primary, //  <-- dark text for light background
    )
  ),

answered May 17, 2019 at 22:12

Suragch

516k340 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Michel Feinstein Over a year ago

This works great for many colors, but some it doesn't, or in some cases we want a different color than black and white... how to define it then?

Suragch Over a year ago

@mFeinstein, you can use colorScheme as Andrey Gordeev shows.

Michel Feinstein Over a year ago

Great! Thanks! PS: Could you take a look on my question here: stackoverflow.com/questions/59294421/…

Shajeel Afzal Over a year ago

How to apply primary color to buttonColor property rather than hardcoding it? Anyway?

Suragch Over a year ago

@ShajeelAfzal, you can get the primary color from the theme like this: Theme.of(context).primaryColor.

|

Zandahlen · Accepted Answer · 2021-04-26 11:46:51Z

35

I believe the more updated answer is mainly found here: https://flutter.dev/docs/release/breaking-changes/buttons

elevatedButtonTheme: ElevatedButtonThemeData(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.black,), //button color
    foregroundColor: MaterialStateProperty.all<Color>(Color(0xffffffff),), //text (and icon)
  ),
),

Depending on the button change...

elevatedButtonTheme: ElevatedButtonThemeData()
outlinedButtonTheme: OutlinedButtonThemeData()
textButtonTheme: textButtonThemeData()

answered Apr 26, 2021 at 11:46

Zandahlen

3503 silver badges4 bronze badges

1 Comment

Roman Nazarevych Over a year ago

Important, theme must be build with ThemeData.from(colorScheme: ColorScheme.light())

Andrey Gordeev · Accepted Answer · 2019-12-12 06:16:05Z

29

Suragch's answer is correct, but sometimes we want to set a completely custom color as button text color. It is achievable by providing a custom colorScheme with secondary color set:

buttonTheme: ButtonThemeData(
  buttonColor: Color(0xffff914d), // Background color (orange in my case).
  textTheme: ButtonTextTheme.accent,
  colorScheme:
    Theme.of(context).colorScheme.copyWith(secondary: Colors.white), // Text color
),

answered Dec 12, 2019 at 6:16

Andrey Gordeev

32.7k16 gold badges143 silver badges169 bronze badges

2 Comments

Nixon Kosgei Over a year ago

this works well, what if I don't want to pass in context for whatever reasons

Muhirwa Gabo Oreste Over a year ago

some of the properties about themeData are now deprecated, and no longer work! the new version of flutter don't allow that code to work properly!

0llie · Accepted Answer · 2021-02-27 08:26:29Z

12

Related: As I stumbled upon this when looking specifically for TextButton color, setting the MaterialApp theme solved that:

theme: ThemeData(
      textButtonTheme: TextButtonThemeData(
        style: TextButton.styleFrom(
          primary: Colors.blueGrey[900],
        ),
      ),
    ),

found on https://www.woolha.com/tutorials/flutter-using-textbutton-widget-examples

answered Feb 27, 2021 at 8:26

0llie

8,8852 gold badges27 silver badges14 bronze badges

Comments

CopsOnRoad · Accepted Answer · 2022-10-01 06:01:08Z

11

Update (New buttons):

Enabled state:

Disabled state:

ButtonTheme won't work for new buttons like ElevatedButton. For that you should set elevatedButtonTheme.

Less customizations:

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.red, // Button color
        foregroundColor: Colors.white, // Text color
      ),
    ),
  ),
)

More customizations:

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.dark,
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith<Color?>((s) {
          if (s.contains(MaterialState.disabled)) return Colors.brown; // Disabled button color
          return Colors.red; // Enabled button color
        }),
        foregroundColor: MaterialStateProperty.resolveWith<Color?>((s) {
          if (s.contains(MaterialState.disabled)) return Colors.white30; // Disabled text color
          return Colors.white; // Enabled text color
        }),
      ),
    ),
  ),
)

Similarly, you can do this for OutlinedButton and TextButton by replacing ElevatedButton and its properties.

edited Oct 1, 2022 at 6:01

answered Nov 24, 2021 at 14:28

CopsOnRoad

271k97 gold badges702 silver badges471 bronze badges

1 Comment

Ahmad Khan Over a year ago

You can use disabledBackgroundColor & disabledForegroundColor properties instead of adding if else.

ken · Accepted Answer · 2020-05-04 06:01:45Z

Andrey Gordeev's answer works. However I was curious what's going on so do a check on it as lacking a bit of explanation. Basically you need to set the textTheme to accent in order to use the colorScheme to set the button color. You can also override the button color using the primary in the colorScheme.

From the source code

The colors for new button classes can be defined exclusively in termsof [colorScheme].  
When it's possible, the existing buttons will (continue to) gradually migrate to it.

buttonTheme: ButtonThemeData(
    textTheme: ButtonTextTheme.accent,
    colorScheme: Theme.of(context).colorScheme.copyWith(
          primary: Colors.orange,
          // secondary will be the textColor, when the textTheme is set to accent
          secondary: Colors.white,
    ),
),

Maxime Lechevallier · Accepted Answer · 2020-04-29 20:16:55Z

2

I advice you to set it in the app theme, so it will be applied everywhere:

src/theme/style.dart

final appTheme = () => ThemeData(
      accentColor: Colors.white,
      buttonTheme: ButtonThemeData(
        buttonColor: Colors.orange,
        textTheme: ButtonTextTheme.accent,
      ),
    );

Then use it in your src/app.dart as theme: appTheme(),

Try it :

RaisedButton(
  onPressed: () => print('pressed'),
  child: Text('Press me'),
)

edited Apr 29, 2020 at 20:16

answered Apr 29, 2020 at 19:48

Maxime Lechevallier

1,20814 silver badges19 bronze badges

Comments

Arindam Roychowdhury · Accepted Answer · 2023-05-19 00:30:39Z

1

The way I did it. I wanted specific color for text and background only for this button.

            ElevatedButton(
                  style: const ButtonStyle(
                    foregroundColor:
                        MaterialStatePropertyAll<Color>(Colors.white),
                    backgroundColor:
                        MaterialStatePropertyAll<Color>(Colors.green),
                  ),
                  onPressed: () {
                    appState.toggleFavorite();
                  },
                  child: Text('Fav'),
                )

answered May 19, 2023 at 0:30

Arindam Roychowdhury

6,6115 gold badges60 silver badges66 bronze badges

Collectives™ on Stack Overflow

How to change the text color of the button theme in Flutter

8 Answers 8

6 Comments

1 Comment

2 Comments

Comments

Update (New buttons):

Less customizations:

More customizations:

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

6 Comments

1 Comment

2 Comments

Comments

Update (New buttons):

Less customizations:

More customizations:

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related