Flutter 2: Color issues - flutter

Question

I recently switched my code basis to Flutter 2.
Now I face certain problems with theming (colors):
The color of the device's status bar icons are black
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
}
Do you know why the described colors don't turn into white when using the new Flutter version?
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.

Answer 1

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.

Answer 2

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.

Answer 3

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.