In this tutorial, you will learn how to make gradient app bar in flutter ? Before start anything, In every code we need a page for contain our whole source code. So let’s start…
import "package:flutter/material.dart";
 
class AppBar extends StatefulWidget {
  @override
  _AppBarState createState() => _AppBarState();
}

class _AppBarState extends State<AppBar> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Custom Gradient AppBar"),
        ),
        body: Text("XXXXXXX"));
  }
}
We have used the 
AppBar
 in our code above, just a simple one. It will show an app bar with a title. It is easy to use. It usually uses with the appBar parameter of the 
Scaffold
.
Now the quetion arises is it possible to convert a simple appbar in gradient appbar ??
Yes, it is possible, let’s see
Here in the appbar there is simple property which is flexibleSpace. In that flexibleSpace we can use a widget. So now we simply use a 
Container
and gives a gradient layout using linear or any other gradient method.
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
            ])          
         ),        
     ),      
 ),
In this above code, we use gradient method for color and that’s solve our problem
previously published at https://fluttercentral.com/Articles/Post/1202/Flutter_Gradient_AppBar
github repository:  https://github.com/Shubham-Narkhede/gradient_app_bar