如何在Flutter中添加body和app bar相同的渐变

Question

我尝试将相同的 LinearGradient 添加到 appbar 和 body。 而是两种渐变色。

我想渐变没有任何不同。

return Container(
  decoration: BoxDecoration(
    gradient: CustomGradient.appBarGradient //body gradient
  ),
  child:Scaffold(
  resizeToAvoidBottomPadding: false,
  backgroundColor: Palette.transparent,
  appBar: AppBar(
    elevation: 0.0,
    centerTitle: true,
    title: //text,
    flexibleSpace: Container( //appBar gradient
           decoration: BoxDecoration(
             gradient: CustomGradient.appBarGradient
      ),
    ),
  ),
  body:

Answer 1

只需让您的appBar透明即可。

例子：

return Container(
  decoration: BoxDecoration(
    gradient: CustomGradient.appBarGradient,
  ),
  child: Scaffold(
    resizeToAvoidBottomPadding: false,
    backgroundColor: Colors.transparent,
    appBar: AppBar(
      elevation: 0.0,
      centerTitle: true,
      title: Text("test"),
      backgroundColor: Colors.transparent,
    ),
    body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          for (var i = 0; i < 10; i++) Text("Hello world", textScaleFactor: 4),
        ],
      ),
    ),
  ),
);

如果您希望您的正文内容在appBar后面扩展，请在您的Scaffold中使用extendBodyBehindAppBar: true （并在您的appBar中保留backgroundColor: Colors.transparent, elevation: 0 ）。

您还有其他解决方案，例如将appBar与 body 中的内容堆叠在一起，或者为appBar和body创建 2 个不同的渐变，第一个的结束颜色与第二个的起始颜色相同。