I can’t get rid of black bars outside the safe area on Android.

Here’s how it looks:

And here’s my code:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      theme: lightTheme,
      darkTheme: darkTheme,
      themeMode: ThemeMode.light,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text('Test'),
        ),
        body: const Center(
          child: Text('Test'),
        ),
      ),
    );
  }
}

Obviously my app is way more complex than that, but this simple example clearly demonstrates the issue. I took a landscape screenshot because it also highlights an other black bar on the left, where the camera is.

What I would like is for Flutter to be smart enough to overflow the background outside the safe area, but keep all content as it is. There’s also the case of bottom navigation bars (tab bars on iOS), those should extend their background past the safe area, but keep all content above.
Weirdly, the top of the app in portrait correctly overflows under the camera safe area, but not the bottom or landscape left and right… ????

I saw solutions such as changing the colors of the bar using something like SystemChrome.setSystemUIOverlayStyle, but I don’t think that’s a good fix (more of a hack TBH) because this color should change depending on the content of the screen, and setting a static color there leads to a lot more work to update it. Plus imagine if I wanted to do a gradient as a background color, that wouldn’t help at all. So I’m really looking for a definitive layout-based solution.

How should I update this code to get the correct appearance?