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

flutter button theme
flutter button theme text color
flutter text color
flutter raised button text color theme
flutter colors
flutter text theme
flutter button theme text size
flutter theme

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?

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

Use themes to share colors and font styles, I haven't found a way to globally change button text style besides what I 'Flutter Demo', theme: ThemeData( primaryColor: color, buttonColor:� Flutter’s Material widgets also use your Theme to set the background colors and font styles for AppBars, Buttons, Checkboxes, and more. Creating an app theme. To share a Theme across an entire app, provide a ThemeData to the MaterialApp constructor. If no theme is provided, Flutter creates a default theme for you.

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

textColor property - MaterialButton class - material , Material Theme System Updates (flutter.dev Using the Theme to override a Button property like textColor For example, you might really want to only change the ContainedButton's text color, and for all possible states� Flutter supports run time UI(User Interface) updating technique using State. If we update any variable value using normal assign format then the UI did not update automatically. But using State updating method we can Change Text Font Color Size Style on Button Click in Flutter Dart Android iOS App.

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

Theme.textTheme.button.color is ignored by RaisedButton , How to Theme Flutter buttons. To change the border color when pressed, use property highlightBorderColor. It is just an Icon (no text). The sample Google flutter code below illustrate how to change button background color in flutter. The code is based on flutter version 1.0.0. Main.dart (App entry point)

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

Updating the Material Buttons and their Themes � Issue #54776 , Let's see how we can make use of themes inside of our Flutter apps using but accentColorBrightness will change the text or icon on the button. title: 'Flutter Demo', theme: ThemeData( primaryColor: Colors.purple[800],� If you want to change the theme of your app at compile time you can modify ThemeData. There is an attribute called Brightness which changes a bunch of colors from light to dark if set to Brightness.dark. We want it to dynamically change that variable during runtime. We therefore introduce state to the top level widget.

Theme Flutter Buttons, Web; Android; iOS; Flutter Text buttons are typically used for less-pronounced actions, including those located in dialogs getBackgroundTintList, @android: color/transparent (see all states ) Default style theme attribute: ?attr/ borderlessButtonStyle Note The contained button is the default style if the style is not set. Change text color of Flutter Text Widget. In this tutorial, you will learn how to change the color of text in Text widget of Flutter. You can change the color of text by specifying color property for style in Text widget. Sample Code Snippet. Following is a sample code snippet where we changed the color to text to blue.

Using Themes in Flutter, change back button icon color flutter change color back button appbar flutter flutter appbar flutter theme text theme flutter flutter themedata. I am able to set the � So u asked u wanna set color or text in app bar. So it works if u set color in style property of Text method. Let me show you how it works. And also I will show you 3 ways of setting color. It doesn't matter if u use theme property or not because setting color of Text works as diffrent. Thats way I didn't use Theme property in examples. 1th:

Buttons - Material Design, So how you can implement this in Flutter's Text widget? textTheme.button Like if you want a different color or any other fonts then what? enum ButtonTextTheme { /// Button text is black or white depending on [ThemeData.brightness]. normal, /// Button text is [ThemeData.accentColor]. accent, /// Button text is based on [ThemeData.primaryColor]. primary, } For normal as well as accentColor, the description is in fact working.

Comments
  • 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?
  • @mFeinstein, you can use colorScheme as Andrey Gordeev shows.
  • Great! Thanks! PS: Could you take a look on my question here: stackoverflow.com/questions/59294421/…
  • How to apply primary color to buttonColor property rather than hardcoding it? Anyway?
  • @ShajeelAfzal, you can get the primary color from the theme like this: Theme.of(context).primaryColor.
  • this works well, what if I don't want to pass in context for whatever reasons