How to make the Flutter app bar with gradient background

Question

This question is being posted here as the related question here on stack overflow has only workarounds but no straight to the point approach.

Solution 1

this can be achieved with the fallowing code

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

See the Pen bGVBVpz by yadunandan (@iamyadunandan) on CodePen.

Solution 2

For a simple appbar with a gradient background and centered title,

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,
    ),

For a more complex appbar with a gradient background and action icons

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

Comments

[Ben Butterworth]

Excellent, this is beautiful, why does pub.dev/packages/gradient_app_bar exist? xD

[Yadu]

This feature was introduced after the package, I guess