在您的代码中-在Scaffold下添加-backgroundColor: Colors.transparent,

child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
        ..

只需在AppBar中添加FlexibleSpace并装饰容器。然后应用程序栏是背景中的渐变。

appBar: AppBar(

      title: Text('Flutter Demo'),
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: <Color>[
              Colors.red,
              Colors.blue
            ],
          ),
        ),
      ),
    ),

我使用这段代码将background颜色设置为gradient

return MaterialApp(
        home: Scaffold(
          body: Container(
            decoration: new BoxDecoration(
                gradient: new LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color.fromARGB(255, 25,178,238),
                    Color.fromARGB(255, 21,236,229)
                  ],
                )),
            child: Align(
                alignment: Alignment.center,
                child: Image.asset(
                  "images/app_logo.png",
                  width: 128,
                  height: 128,
                )),
          ),
        ),
      );

您只需在应用栏中使用FlexibleSpace

appBar: AppBar(
      centerTitle: true,
      title: Text(widget.title),
      flexibleSpace: Container(
           decoration: BoxDecoration(
           gradient: LinearGradient(
           begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: <Color>[
              Colors.red,
              Colors.blue
            ])
           ),
          ),
         ),

您可以直接使用下面的代码为任何容器或视图的渐变颜色

class HomePage extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dashboard"),
      ),
      body: Container(
         alignment: Alignment.center,
         decoration: BoxDecoration(
         gradient: LinearGradient(colors: [Colors.red, Colors.blue, Colors.black])
         )
       ),
    );
  }
}

你不需要在appBar和Container中设置两次颜色，只需要像这样设置appBar，它们将具有相同的颜色：

appBar: AppBar(
  backgroundColor: Colors.transparent,
  elevation: 0, //this will make the shadow of the appBar disappear and show the exact color of the background you setted.
  //and here put the rest of the configurations you need for the appBar.
)

你也可以像这样给AppBar添加一个渐变，

new Scaffold(
      appBar: AppBar(
        title: Center(child: Text('Awesome AppBar')),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [
                  const Color(0xFF3366FF),
                  const Color(0xFF00CCFF),
                ],
                begin: const FractionalOffset(0.0, 0.0),
                end: const FractionalOffset(1.0, 0.0),
                stops: [0.0, 1.0],
                tileMode: TileMode.clamp),
          ),
        ),
        child: ...,
      ),
      body: ...,
    );

LinearGradient参数：

• colors：渐变中使用的颜色数组，在本例中为两种蓝色。
• begin、end：第一种颜色和最后一种颜色的位置，在这种情况下，
• FractionalOffset允许我们将x和y的坐标视为从0到1的范围。因为我们想要一个水平梯度，所以我们对两个测量值使用相同的Y，x从0.0（左）变为1.0（右）。
• stops：这个数组应该与颜色的大小相同。它定义了颜色将如何分布。[0.0，1.0]将从左到右填充它。[0.0，0.5]将填充从左到半条的颜色，等等。
• tileMode：如果止损点没有填满整个区域该怎么办。在本例中，我们添加了clamp（它将重用最后使用的颜色），但随着渐变从0.0变为1.0，它实际上并不必要。
• 您还可以向Container添加子项。例如：一些徽标图像

child: Align(
          alignment: Alignment.center,
          child: Image.asset(
            "images/logo.png",
            width: 128,
            height: 128,
          )),
    ),

希望这能帮上忙。