Flutter-如何为状态背彩设置梯度（使用SafeArea）？

Question

是否可以明确设置状态栏的梯度颜色？ “状态巴尔科勒”期望颜色，但是渐变呢？如何在梯度中绘制状态栏？如果我使用SafeArea，则状态栏为白色。但是我的sliverappbar涂有梯度颜色。

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

以下工作和测试代码：

说明：

我们如何获得这个红色阴影状态栏？

我们已经用脚手架包裹了Safearea小部件。在身体属性中，我们使用具有梯度颜色的容器，因此它占据了整个屏幕...如果我们没有Appbar的身体，则将整个屏幕作为一个主体。然后，我们可以使用其他一些小部件（根据我们的要求）

@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,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Answer 2

则将Safearea包裹到一个添加背景梯度的容器中

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

如果不需要，

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

，或者在应用程序的顶部关闭Safearea，例如这样：让我知道任何解决方案是否有效。