Flutter background of unsafe area in SafeArea widget.

Wrap your SafeArea into a widget that adds a background:

Container(
  color: Colors.red,
  child: SafeArea(...),
),

Another way to do it.

import 'package:flutter/services.dart';

Scaffold(
  body: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light.copyWith(
      statusBarColor: Theme.of(context).primaryColor
    ),
    child: SafeArea(
      child: Container(...),
    ),
  ),
)

Following on from Rémi Rousselet's answer...

In my case, I created a new widget called ColoredSafeArea:

import 'package:flutter/material.dart';

class ColoredSafeArea extends StatelessWidget {
  final Widget child;
  final Color? color;

  const ColoredSafeArea({
    Key? key,
    required this.child,
    this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color ?? Theme.of(context).appBarTheme.backgroundColor,
      child: SafeArea(
        child: Container(
          color: Theme.of(context).colorScheme.background,
          child: child,
        ),
      ),
    );
  }
}

And use this in place of SafeArea in my Scaffold. I have it set up to use the current AppBar colour from my theme, by default. But you can use whatever works for you, of course.

Basically, this widget will change the SafeArea colour without affecting your app background colour, due to the Container within, which takes the background colour from the current theme's colorScheme. The advantage of this is that the background colour will work with any dark or light themes you have set up.