Paul Kruger
Paul Kruger

Reputation: 2314

Flutter change all raised button text color in theme

I would like all my RaisedButton widgets to have a different textColor, how do I change only this in the MaterialApp ThemeData?

Upvotes: 2

Views: 2180

Answers (2)

Anis R.
Anis R.

Reputation: 6922

For anyone with a light-themed app but wants white text on buttons, you can adjust the buttonTheme in your app's entry point (i.e. where you declare your MaterialApp). Something like:

return MaterialApp(
  theme: ThemeData.light().copyWith(
    buttonTheme: ThemeData.dark().buttonTheme
  ),
);

Upvotes: 0

Hugo Passos
Hugo Passos

Reputation: 8447

If you take a look at MaterialButton, you'll see that it uses the method getTextColor() from ButtonThemeData, and this method considers the enum ButtonTextTheme to define the text color. The enum entries are normal, accent and primary. You can set a global text color for your RaisedButtons based on those colors, merely.

To implement that:

ThemeData theme = Theme.of(context);

return MaterialApp(
  ...
  theme: theme.copyWith(
    buttonTheme: theme.buttonTheme.copyWith(
      textTheme: ButtonTextTheme.accent,
    ),
  ),
);

If you want to set a custom color that doesn't match normal, accent or primary, the best option you got is creating a custom Widget with this color, so you don't need to set it in every RaisedButton individually.

Check it out:

class ButtonWithCustomTextColor extends RaisedButton {
  ButtonWithCustomTextColor({
    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    // Place your custom color here
    Color textColor = Colors.blue,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  }) : super(
    key: key,
    onPressed: onPressed,
    onHighlightChanged: onHighlightChanged,
    textTheme: textTheme,
    textColor: textColor,
    disabledTextColor: disabledTextColor,
    color: color,
    disabledColor: disabledColor,
    highlightColor: highlightColor,
    splashColor: splashColor,
    colorBrightness: colorBrightness,
    elevation: elevation,
    highlightElevation: highlightElevation,
    disabledElevation: disabledElevation,
    padding: padding,
    shape: shape,
    clipBehavior: clipBehavior,
    materialTapTargetSize: materialTapTargetSize,
    animationDuration: animationDuration,
    child: child,
  );
}

Upvotes: 1

Related Questions