4

I have got redirected from https://github.com/flutter/flutter/issues/28138 to here.

Generally my problem is that I don´t think that FloatingActionButton backgroundColor and FlatButton text color are inherited from right values defined in ThemeData.

  1. Create an app where you will use primary red color (appbar, button bg, card), yellow for accent (icons, appbar title), black for general text, white/light grey for backgrounds like scaffold body.
  2. Set AppBar BG color to red using using theme (primaryColor)
  3. Set AppBar title color to yellow using theme (accentColor)
  4. Set color of icons to same color as accentColor, since if primary color is used they will be invisible in AppBar
  5. Create a floatingActionButton with an icon.
  6. Icon in floatingActionButton is not visible because backgroundColor for the widget uses the ThemeData.accentColor, which is yellow, instead of the ThemeData.primaryColor

Both foreground and background defaults to accentColor.

 /// The color to use when filling the button.
 ///
 /// Defaults to **[ThemeData.accentColor**] for the current theme.
 final Color backgroundColor;

I found similar issue with FlatButton in Dialog, by default color of text is accent color, which is yellow (on white background), if i override it to primary, it´s red, but I don´t want to have it red since the delete button next to it is red. So I need to set it to normal, so it´s black which is correct, but:

flat_button.dart:127

 textStyle: theme.textTheme.button.copyWith(color: buttonTheme.getTextColor(this)),

My theme:

buttonTheme: ButtonThemeData(
            textTheme: ButtonTextTheme.normal,
            buttonColor: primary, // Red
          ),

textTheme: TextTheme(
           ...
            button: TextStyle(color: black), // Black
          ),

new FlatButton(
              //textTheme: ButtonTextTheme.normal,
              child: new Text("Ponechať"),
              onPressed: () {
                Navigator.of(context).pop();
                onKeep();
              },
            )

In theory my FlatButton in the popup dialog should be black and or red. But it´s yellow the accent color.

To reproduce try to following example: https://gist.github.com/erikkubica/45fc8acdce1f8a25cd5258e8b3a0e1f3

1 Answer 1

6

If you want the color of the floating button to be primary, add the following.

  floatingActionButton: FloatingActionButton(
    backgroundColor: Theme.of(context).primaryColor,

If you want to change the color of FlatButton in the dialog to black, add the following.

  theme: ThemeData(
    colorScheme: ColorScheme.light(
      primary: primary,
      secondary: Colors.black,
    ),

It may be better to instantiate it with ColorScheme() so that it does not affect other widgets.

3
  • I know about that floating action button supports setting BG color, I use it like this right now, since there is no way to set it using ThemeData, and I wanted to report this bug/missing feature to github, but they sent me here... So maybe there is a way? The thing with the color scheme I will try out when get to the office, will give you feedback. Feb 20, 2019 at 8:59
  • It is impossible only by the property of ThemeData. Is there a problem caused by using Theme.of(context).primaryColor?
    – ko2ic
    Feb 20, 2019 at 9:05
  • 1
    Imagine all widget backgrounds would be done like this, by setting backgroundColor property instead of possibility to specify a general design for type of widget in theme. Would be that a problem? Yes, this is why some material widgets are configurable using theme. Example i can set color directly to card, but i can also set ThemeData.cardColor in general and this applies to lot of widgets. Except floatingActionButton (and maybe there are more widgets). So this is not a "problem" it´s a missing feature. Btw. Button works thank you very much. Feb 20, 2019 at 9:57

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.