Flutter - How to set a gradient for statusBarColor (using SafeArea)?

Question

Is it possible to explicitly set gradient color for the status bar? 'statusBarColor' expects Color, but what about gradient? How to paint status bar in gradient? If I use SafeArea, status bar is white. But my SliverAppBar is painted in gradient color.

Scaffold(
        body: SafeArea(
          child: CustomScrollView(
            slivers: [
              SliverAppBar(
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text(
                    'My App',
                    style: TextStyle(
                      fontSize: 16.0,
                    ),
                  ),
                  background: Container(
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        colors: <Color>[
                          Color(0xFF50AC5B),
                          Color(0xFF92C156),
                        ],
                      ),
                    ),
                  ),
                ),
                elevation: 0.0,
                floating: true,
              ),
              SliverList(
                delegate: SliverChildListDelegate(
                  [
                    //...
                  ],
                ),
              ),
            ],
          ),
        ),
        backgroundColor: const Color(0xFFFBFDFF),
    );
  }
}

Answer 1

Wrap your SafeArea into a Container that adds a background gradient

            child: Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: <Color>[
                    Color(0xFF50AC5B),
                    Color(0xFF92C156),
                  ],
                ),
              ),
              child: SafeArea(
                child: // your code,
              ),
            ),

or just turn off your SafeArea in the top portion of the app if it's not required there, like this:

          SafeArea(
            top: false,
            child: // your code,
          ),

Let me know if any of this solution works.

Answer 2

Below worked and tested code :

Explanation :

How we get this red shaded status bar?

We have wrapped SafeArea widget by scaffold. In body property we have using container with gradient color so it occupies whole screen...If we use body without appbar it takes whole screen as a body. then we can use remaining body spaces by some other Widgets(as per our requirement)

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Color.fromRGBO(232, 66, 66, 1.0),
              Color.fromRGBO(231, 33, 33, 1.0),
              Color.fromRGBO(238, 5, 5, 1.0)
            ],
          )
        ),
        child: SafeArea(
          child: CustomScrollView(
            slivers: [
              SliverAppBar(
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: const Text(
                    'My App',
                    style: TextStyle(
                      fontSize: 16.0,
                    ),
                  ),
                  background: Container(
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        colors: <Color>[
                          Color(0xFF50AC5B),
                          Color(0xFF92C156),
                        ],
                      ),
                    ),
                  ),
                ),
                elevation: 0.0,
                floating: true,
              ),
              SliverList(
                delegate: SliverChildListDelegate(
                  [
                    Container(
                      color: Colors.white,
                      height: MediaQuery.of(context).size.height,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }