How Order of SafeArea affect Status Bar in Flutter

People may not notice the order of the SafeArea widget has a prominent impact on the status bar which shows the clock and battery level.

SafeArea widget will try its best to avoid influence (such as round corners, status bar, notch) by the operating system. Therefore, it will indent its child by enough padding to avoid the top status bar.

If you are using Scaffold with an AppBar, there is no need to wrap the Scaffold in a SafeArea. Flutter will calculate the correct spacing at the top screen and the background colour of the status bar will be the same as the AppBar’s.

On the other hand, if you wrap the the Scaffold in a SafeArea, the background of the status bar will become the black (system’s default value), not the AppBar’s background colour.

Here is the code snippet:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Welcome to Flutter'),
          ),
          body: const Center(
            child: Text('Hello World'),
          ),
        ),
      ), // SafeArea
    );
  }
}

Unless you want the background colour of the status bar to follow the operating system’s default value rather than the AppBar’s colour, a Scaffold should not be wrapped with a SafeArea.