CODEWITHSUNDEEP
flutteruser-interfacecolorsthemes
S-Man
S-Man

Reputation: 23676

Flutter 2: Color issues

I recently switched my code basis to Flutter 2.

Now I face certain problems with theming (colors): enter image description here

  1. The color of the device's status bar icons are black
  2. The color of the TextField's context menu items are black

Previously they were white, so something seems to be changed in the new Flutter version.

I am using ThemaData.dark() and some specific colors. Especially I am setting cardColor to a dark grey to color the background of the TextField's context menu:

ThemeData buildTheme() {
  final ThemeColors colors = themeColors();
  final ThemeData base = ThemeData.dark(); 
  return ThemeData(
      scaffoldBackgroundColor: colors.primaryBackground(),        // == dark grey
      primaryColor: colors.primaryBackground(),                   // == dark grey
      accentColor: colors.accent(),                               // == orange
      textTheme: base.textTheme,
      buttonTheme: base.buttonTheme.copyWith(
          buttonColor: colors.accent(),                           // == orange
          textTheme: ButtonTextTheme.primary
      canvasColor: colors.inputBackground(),                      // == dark grey
      inputDecorationTheme: base.inputDecorationTheme.copyWith(
        hintStyle: TextStyle(color: colors.textFieldHintText()),  // == grey
        fillColor: colors.inputBackground(),                      // == dark grey
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: colors.focused())),     // == green
        enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: colors.accent())),      // == orange
      ),
      unselectedWidgetColor: colors.accent(),                     // == orange
      cardColor: colors.messageBackground());                     // == dark grey
}
  1. Do you know why the described colors don't turn into white when using the new Flutter version?
  2. Do you know what I can do to fix that? Maybe change another color field of ThemeData?

My only idea is to remove the cardColor change, which yields a white context menu. But this does not fix the text color problem of the status bar.

Upvotes: 1

Views: 2111

Answers (3)

kuhnroyal
kuhnroyal

Reputation: 7553

I think your are just missing a tiny part. You create a dark theme with ThemeData.dark() but then you create a light theme with return ThemeData(...)

Instead create the ThemeData directly with the intended brightness, all the values that you do not specify will be defaulted depending on the brightness value in the same way ThemeData.dark() does create them.

ThemeData buildTheme() {
  final ThemeColors colors = themeColors();
  return ThemeData(
      brightness: Brightness.dark,
      scaffoldBackgroundColor: colors.primaryBackground(),        // == dark grey
      primaryColor: colors.primaryBackground(),                   // == dark grey
      accentColor: colors.accent(),                               // == orange
      buttonTheme: ButtonThemeData(
          buttonColor: colors.accent(),                           // == orange
          textTheme: ButtonTextTheme.primary,
      ),
      canvasColor: colors.inputBackground(),                      // == dark grey
      inputDecorationTheme: InputDecorationTheme(
        hintStyle: TextStyle(color: colors.textFieldHintText()),  // == grey
        fillColor: colors.inputBackground(),                      // == dark grey
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: colors.focused())),     // == green
        enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: colors.accent())),      // == orange
      ),
      unselectedWidgetColor: colors.accent(),                     // == orange
      cardColor: colors.messageBackground(),                      // == dark grey
   );                     
}

If you look in the implementation of ThemeData here:

You find this: factory ThemeData.dark() => ThemeData(brightness: Brightness.dark);

And if you look here you can see that the default brightness is Brightness.light and in the following lines you can find out which defaults are created depending on the brightness value.

Be careful about using ThemeData.copyWith as there are no defaults set when calling this.

Upvotes: 1

Ben Butterworth
Ben Butterworth

Reputation: 28482

I wouldn't modify the status bar colour in AppBar because then when you use a different app bar in a different part of the app, you might change it there.

I find it nicer to change the theme brightness, which might fix the issue with the text color theming too:

...
        theme: ThemeData(
          brightness: Brightness.dark,
          ...
        )
...

or alternatively:

...
        theme: ThemeData.dark().copyWith(
          ...
        )
...

Otherwise you might just be using the wrong text theme.

Upvotes: 2

L. Gangemi
L. Gangemi

Reputation: 3290

For the statusBar only, you can set the brightness of the icons when defining the AppBar:

 AppBar(
        backwardsCompatibility: false,
        backgroundColor: Colors.grey.shade800,
        systemOverlayStyle: SystemUiOverlayStyle(
          statusBarColor: Colors.grey.shade800,
          statusBarIconBrightness: Brightness.light,
        ),
      ),

But with this settings your appbar wouldn't get the color from your theme.

You'll have to set background color and statusBarColor from there.

I did set Colors.grey.shade800 since I didn't have acces to your colors.

For the sistem UI, like the copy/paste, you can solve your problem by adding brightness: Brightness.dark inside your ThemeData.

Screenshot

Upvotes: 2

Related Questions