Flutter: change theme brightess on part of screen? - dart

Question

How can I make a theme get a Dark brightess on only a part of the screen? The brightness doest not work on the text.
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Theme(
data: ThemeData(brightness: Brightness.light),
child: Container(
child: Text("Bright Text"),
),
),
Theme(
data: ThemeData(brightness: Brightness.dark),
child: Container(
child: Text("Dark Text"),
),
),
],
),
);
}

Answer 1

It seems that this solution actually works, the reason you can't observe it in your original example is because the default text color in both color modes is the same — black (at least that's what I've got experimenting with it).
If you change your example to use a widget that uses a color that actually changes, you can clearly see it's working:
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Theme(
data: ThemeData(brightness: Brightness.light),
child: Container(
child: Icon(Icons.audiotrack), // always renders a black icon
),
Theme(
data: ThemeData(brightness: Brightness.dark),
child: Container(
child: Icon(Icons.audiotrack), // always renders a white icon
),
),
],
),
);
}
Sometimes you need to get the brightness of the current context to do some intricate configuration; the common way to do this: MediaQuery.of(context).platformBrightness will always give you the current color mode of the device/platform.
If you want to get the brightness that was "overridden" by the method above, you need to use Theme.of(context).brightness instead.