Flutter-Gradient App Bar
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("Flutter Demo 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
here is output

This is my first article if you are like it then please clap mi thank you.
Here is my whole code : https://github.com/Shubham-Narkhede/gradient_app_bar