Here is the code for a simple app with a red container:

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

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.red);
  }
}

For some reason it does not overlap the bottom system notch:

Note it does overlap the top system navigation just fine oddly enough.

How can I fix this so the red container overlaps the bottom system notch?

I have also tried the following, but did not work:

MaterialApp(
   home: Scaffold(
      extendBody: true,
      body: Container(color: Colors.red),
   ),
);