changing status bar color works for some pages only

Question

am trying to change the status bar color of my app to dark

i have followed this How to change status bar color in Flutter?

and did this:

   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

but for some reason it works only for some pages and the others will still be white!!

for example this page:

  @override
  Widget build(BuildContext context) {
  final theme = Theme.of(context).copyWith(unselectedWidgetColor: Colors.red);
  Animation opacityAnimation =
  Tween(begin: 0.0, end: 1.0).animate(animationController);
  return new Directionality(
  textDirection: TextDirection.rtl,
  child: new Theme(
    data: theme,
    child: new Scaffold(
        key: scaffoldKey,
        drawer: globals.drawer(context),
        appBar: new AppBar(
          leading: IconButton(
            icon: Icon(
              CustomFont.burger,
              color: Color(0xff474747),
            ),
            onPressed: () {
              scaffoldKey.currentState.openDrawer();
            },
          ),
          centerTitle: true,
          elevation: 0.0,
          bottom: PreferredSize(
              child: Container(
                color: Color(0xff2CB57D),
                height: 0.20,
              ),
              preferredSize: Size.fromHeight(0.20)),
          backgroundColor: Colors.white,
          title: new Image.asset(
            'assets/appbar-icon.png',
            width: 55.0,
            height: 27.0,
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(
                CustomFont.home,
                color: Color(0xff474747),
              ),
              onPressed: () {
                globals.goToHome(context);
              },
            ),

          ],
        ),
        body: ......
  ),
);
}

the color of this page is always white no matter if i changed or not!

why is this happening? and how to solve it?