如何使Flutter应用栏具有渐变背景

Question

这个问题发布在这里，因为这里关于堆栈溢出的相关问题只有解决方法，但没有直截了当的方法。

Answer 1

这可以通过下面的代码来实现

AppBar(
  flexibleSpace: Container(
   decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.cyan, Colors.yellow], stops: [0.5, 1.0],
      ),
    ),
  ),
),

请参阅 CodePen 上yadunandan ( @iamyadunandan ) 的 Pen bGVBVpz 。

Answer 2

对于具有渐变背景和居中标题的简单应用栏，

AppBar(
      automaticallyImplyLeading: false, // hides default back button
      flexibleSpace: Container(
          decoration: BoxDecoration(
        gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.topRight,
            colors: [
              Color(0xffB1097C),
              Color(0xff0947B1),
            ]),
      )),
      title: Text("WishList", style: TextStyle(fontSize: 20.0, color: Colors.white)),
      centerTitle: true,
    ),

对于具有渐变背景和操作图标的更复杂的应用栏

AppBar(
  automaticallyImplyLeading: false, // hides default back button
  flexibleSpace: Container(
      decoration: BoxDecoration(
    gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.topRight,
        colors: [
          Color(0xffB1097C),
          Color(0xff0947B1),
        ]),
  )),
  title: Text("Welcome guest", style: TextStyle(fontSize: 20.0, color: Colors.white)),
  actions: [
    IconButton(
        icon: SvgPicture.asset("enter svg path",height: 20.0, width: 20.0),
        onPressed: () {
          print("Icon 1 pressed");
        }),
    IconButton(
      icon: SvgPicture.asset("enter svg path", height: 20.0, width: 20.0),
      onPressed: () {
        print("Icon 2 pressed");
      },
    )
  ],
)