Flutter: iPad status bar color cut in half

Rendering in flutter isn't subject to system calls or components, so 1 such solution may involve manually rendering the color you want and using the systemchrome setting simply for the brightness (should icons be white or black)

class StatusBarViewer extends StatefulWidget {
  final Widget child;
  const StatusBarViewer({required this.child, super.key});

  @override
  State<StatusBarViewer> createState() => _StatusBarViewerState();
}

class _StatusBarViewerState extends State<StatusBarViewer> {
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      SafeArea(
        child: widget.child,
      ),
      Align(
        alignment: Alignment.topCenter,
        child: Container(
            width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).viewPadding.top, color: Colors.blue),
      )
    ]);
  }
}

Something like this would allow you to have a "SafeArea" widget that you would naturally use elsewhere to handle changing the status bar, you could even do custom implementations of appbar to handle no using the safearea so you can custom fill it, but as you can see this works in an ipad simulator

The simplest solution you can have is Wrapping your MaterialApp in the main.dart with the ColoredBox widget, and giving a Color.

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

  @override
  Widget build(BuildContext context) {
    return ColoredBox( //added widget
       color: Color(0xffffffff), //add custom colors
       child: MaterialApp(
         title: 'Flutter Demo',
         debugShowCheckedModeBanner: false,
         theme: ThemeData(
           colorSchemeSeed: Colors.blue,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       ),
    );
  }
}