如何为Flutter应用程序栏添加渐变背景？

Question

这个问题在这里发布，因为在Stack Overflow上相关的问题只有变通方法，没有直接解决方法。

- Yadu

Answer 1

您可以使用以下代码来实现这一点。

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

请查看来自yadunandan的bGVBVpz演示，它位于CodePen上，并由@iamyadunandan创建。

- Yadu

---

太棒了，这真是太美妙了，为什么会有 https://pub.dev/packages/gradient_app_bar 这个东西存在呢？xD - Ben Butterworth

我猜这个功能是在该软件包之后引入的。 - Yadu

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

- zfnadia