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"));
}
}
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 ??
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 colour and that’s solve..
Here is my medium link: https://medium.com/me/stories/public