status bar color in flutter is uncontrollable

Question

I have tried to use SystemUiOverlayStyle to change the status bar color of my app but it doesn't change anything. I also tried using libraries and AnnotatedReagion widget but it is uncontrollable.

@override
  Widget build(BuildContext context) {
    final themeColor = Provider.of<ThemeNotifier>(context);
    final direction = Provider.of<Direction>(context).getAppDirection();
    // FlutterStatusbarcolor.setStatusBarColor(Colors.transparent);
    // SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.blue,
        systemNavigationBarIconBrightness: Brightness.dark,
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness: Brightness.dark));
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: SafeArea(
        child: Directionality(
          textDirection: direction,
          child: WillPopScope(
            // ignore: missing_return
            onWillPop: () {
              Nav.routeReplacement(context, SignUpPage());
            },
            child: Scaffold(
              resizeToAvoidBottomInset: false,
              // backgroundColor: Colors.white,
              appBar: AppBar(
                
                leading: Container(
                  width: 32,
                  padding: const EdgeInsets.only(top: 8.0),
                  child: IconButton(
                    icon: Icon(
                      Icons.chevron_left,
                      color: themeColor.getColor(),
                      size: 32,
                    ),
                    onPressed: () {
                      Navigator.pop(context);
                      // Navigator.pushAndRemoveUntil(
                      //     context,
                      //     MaterialPageRoute(builder: (context) => InitPage('')),
                      //     (route) => false);
                    },
                  ),
                ),
                backgroundColor: Color.fromARGB(255, 252, 252, 252),
                elevation: 0,
                centerTitle: true,
                title: Text(
                  "Nitrogen",
                  style: GoogleFonts.poppins(
                    fontSize: 26,
                    color: themeColor.getColor(),
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              body: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    AuthHeader(
                      translate('login_page.login'),
                      translate('login_page.existing'),
                    ),
                    LoginForm(),
                    SizedBox(
                      height: 20,
                    ),
                    routeLoginWidget(themeColor, context, direction),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

I thought the appbar may have caused the issue but after changing its color or removing it entirely didn't fix anything.

sometimes it flickers to the color I'm setting and then changes to completely white or black background with white icons.

can anyone tel me what I'm doing wrong?