iDecode
iDecode

Reputation: 29016

Why color property isn't passed to a TextButton?

Minimal reproducible code:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Theme(
        data: ThemeData(
          textButtonTheme: TextButtonThemeData(
            style: ButtonStyle(
              textStyle: MaterialStateProperty.resolveWith(
                (Set<MaterialState> states) {
                  final headline = Theme.of(context).textTheme.headline6;
                  final textStyle = headline.copyWith(
                    fontSize: 40, // Works
                    backgroundColor: Colors.red, // Works
                    color: Colors.white, // Doesn't work
                  );
                  return textStyle;
                },
              ),
            ),
          ),
        ),
        child: TextButton(
          onPressed: () {},
          style: Theme.of(context).textButtonTheme.style,
          child: Text('Button'),
        ),
      ),
    ),
  );
}

Output:

enter image description here

As you can see fontSize and backgroundColor, both are applied to the TextButton but only the color is not applied. How can that be possible?

Note: I'm not looking for making it work the other way (there are many ways of doing it). I just want to know why the color isn't passed.

Upvotes: 0

Views: 42

Answers (1)

s_erfani
s_erfani

Reputation: 494

If you want to change the text's color you should do this :

                    final textStyle = headline.copyWith(
                    fontSize: 40,
                    backgroundColor: Colors.red,
                    foreground: Paint()..color = Colors.white,
                    );

and if you check text_style documentaion they say:

/// One of [color] or [foreground] must be null, and if this has [foreground]
/// specified it will be given preference over any color parameter.

I think the foreground has some default color or something that overriding the "color" so it won't change.

Upvotes: 1

Related Questions