Get Device Brightness when building ThemeData, outside of Material App with MediaQuery - flutter

Question

I want to display dark or light mode based on the settings of the device.
I need to get the brightness of the device when building my ThemeData, something like this:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final materialLightTheme = ThemeData(
primaryColor: Colors.blueAccent,
brightness: Brightness.light,
scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.light),
appBarTheme: AppBarTheme(
color: MyColors.backgroundColor1(Brightness.light)
),
);
final materialDarkTheme = ThemeData(
primaryColor: Colors.blueAccent,
brightness: Brightness.dark,
scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.dark),
appBarTheme: AppBarTheme(
color: MyColors.backgroundColor1(Brightness.dark)
),
);
Brightness brightness = MediaQuery.of(context).platformBrightness;
return MaterialApp(
themeMode: brightness == Brightness.light
? ThemeMode.light
: ThemeMode.dark,
theme: materialLightTheme,
darkTheme: materialDarkTheme,
home: MyHomePage(),
);
}
}
But it seems, MediaQuery is not available in the build Method outside of an Material App. I get the Error
MediaQuery.of() called with a context that does not contain a
MediaQuery.
How can I achieve this behaviour?

Answer 1

First for your use case, if you just want to apply dark and light theme based on system's dark mode, then it is automatically handled by the Flutter, just by providing the darkTheme property in your MaterialApp widget, whenever the system's dark mode is activated, the theme supplied in the darkTheme parameter will automatically activate.
However if you do want to access MediaQuery before you apply themes and other stuff to your app via MaterialApp, from what I know you need either MaterialApp or WidgetsApp before in the widget tree in order to get the MediaQuery.of(context). However, we can workaround that by using, two MaterialApp widgets one for just getting the MediaQuery in the second you apply the theming and all other stuff as below
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final materialLightTheme = ThemeData(
primaryColor: Colors.blueAccent,
brightness: Brightness.light,
scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.light),
appBarTheme: AppBarTheme(
color: MyColors.backgroundColor1(Brightness.light)
),
);
final materialDarkTheme = ThemeData(
primaryColor: Colors.blueAccent,
brightness: Brightness.dark,
scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.dark),
appBarTheme: AppBarTheme(
color: MyColors.backgroundColor1(Brightness.dark)
),
);
Brightness brightness = MediaQuery.of(context).platformBrightness;
return MaterialApp(
themeMode: brightness == Brightness.light
? ThemeMode.light
: ThemeMode.dark,
theme: materialLightTheme,
darkTheme: materialDarkTheme,
home: MyHomePage(),
);
}
}