Flutter: Status bar color changes to default when navigating between screens

I'm encountering an issue in my Flutter app where the status bar color changes to the default color when navigating between screens. I have implemented a SystemUiOverlayFunc class to set the desired system UI overlay style. However, the problem persists.

Here's an overview of my code structure:

In main.dart, I have the following setup:

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';
import 'Screens/Homepage.dart';
import 'constantes/Colors.dart';
import 'constantes/SystemUiOverlayFunc.dart';

void main() {
  SystemUiOverlayFunc uiOverlayFunc = SystemUiOverlayFunc();
  uiOverlayFunc.systemUiOverlay();
  runApp(Main());
}

// ignore: use_key_in_widget_constructors
class Main extends StatelessWidget {
  final ColorFile colorFile = ColorFile();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        fontFamily: 'rabarBold',
      ),
      home: HomePage(),
    );
  }
}

The first screen (HomePage) is displayed with a custom app bar and a list of cards. Here's a simplified version of the code:

// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors
import 'package:bashakam_barawzanko/Screens/nmrakanm.dart';
import 'package:bashakam_barawzanko/constantes/Colors.dart';
import 'package:bashakam_barawzanko/constantes/systemUiOverlayFunc.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../components/card.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  ColorFile colorFile = ColorFile();
  SystemUiOverlayFunc uiOverlayFunc = SystemUiOverlayFunc();

  @override
  void initState() {
    super.initState();
    uiOverlayFunc.systemUiOverlay();
  }
@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: colorFile.kbodyColor,
        appBar: AppBar(
          backgroundColor: colorFile.kbodyColor,
          title: Center(
            child: Text(
              '🎓',
              style: TextStyle(
                fontSize: 18,
                color: colorFile.kWhiteTextColor,
              ),
            ),
          ),

  // The rest of the code for the HomePage widget
}

When I navigate to the second screen (Nmrakanm) using Navigator.push, the first screen's status bar color changes to the default color. Here's the code for the second screen:

// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors
import 'package:bashakam_barawzanko/constantes/Colors.dart';
import 'package:flutter/material.dart';
import '../constantes/SystemUiOverlayFunc.dart';

class Nmrakanm extends StatefulWidget {
  const Nmrakanm({super.key});

  @override
  State<Nmrakanm> createState() => _NmrakanmState();
}

class _NmrakanmState extends State<Nmrakanm> {
  ColorFile colorFile = ColorFile();
  SystemUiOverlayFunc uiOverlayFunc = SystemUiOverlayFunc();

  @override
  Widget build(BuildContext context) {
    uiOverlayFunc.systemUiOverlay();
    return Scaffold(
      backgroundColor: colorFile.kbodyColor,
      appBar: AppBar(
        iconTheme: IconThemeData(color: colorFile.kWhiteTextColor),
        backgroundColor: colorFile.kbodyColor,
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

In my code structure, I also have a SystemUiOverlayFunc class that looks like this:

import 'package:flutter/services.dart';
import 'package:bashakam_barawzanko/constantes/Colors.dart';

class SystemUiOverlayFunc {
  final ColorFile _colorFile = ColorFile();
  
  void systemUiOverlay() {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle.dark.copyWith(
        systemNavigationBarColor: _colorFile.kbodyColor,
        statusBarColor: _colorFile.kbodyColor,
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarIconBrightness: Brightness.light,
      ),
    );
  }
}

This class is responsible for setting the desired system UI overlay style by using the SystemChrome.setSystemUIOverlayStyle method.

In my app, I call systemUiOverlay() from the initState() method of my home screen and the build() method of the second screen. Despite implementing this, the status bar color reverts to the default color when navigating between screens.

I have a GIF that visually demonstrates the issue. Here is the link to the GIF. In the GIF, you can see the status bar color changing to the default color whenever I navigate from the home screen to the second screen.

I would appreciate any insights or suggestions on how to resolve this issue and ensure that the status bar color remains consistent during screen navigation.

I implemented a SystemUiOverlayFunc class in my Flutter app to set the desired system UI overlay style and ensure consistent status bar color during screen navigation. I called the systemUiOverlay() method in the initState() of the home screen and the build() method of the second screen. Additionally, I checked that the colors defined in ColorFile are correctly assigned to the status bar and navigation bar properties.

I expected that by setting the system UI overlay style with the desired colors in the SystemUiOverlayFunc class, the status bar color would remain the same when navigating between screens. This way, I can maintain a consistent visual appearance throughout the app.

What actually resulted:
Despite implementing the SystemUiOverlayFunc class and calling the systemUiOverlay() method in the appropriate places, the status bar color reverts to the default color when transitioning from the home screen to the second screen. This inconsistency in the status bar color is not the intended behavior."

Fixed! I was facing an issue where the status bar color was changing to the default color when navigating between screens in my Flutter app. After investigating the issue, I found that the problem was caused by the SafeArea widget.

The SafeArea widget ensures that the content of the screen is displayed within the safe area of the device, including the area below the status bar. However, in my case, it was interfering with the desired behavior of the status bar color.

To resolve the issue, I removed the SafeArea widget from the top of my Scaffold widget. By doing so, the status bar is no longer affected by the screen content, and the status bar color remains consistent when navigating between screens.

Here's the code snippet before and after removing the SafeArea widget:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  // ...
}

class _HomePageState extends State<HomePage> {
  // ...

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        // Your existing code...
      ),
    );
  }
}

After:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  // ...
}

class _HomePageState extends State<HomePage> {
  // ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Your existing code...
    );
  }
}

I hope this helps!