Flutter-Gradient App Bar

Shubham Narkhede
Nov 4 · 2 min read

In this tutorial, you will learn how to make gradient app bar in flutter ?

Final Output

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

Shubham Narkhede

Written by

Passionate #Flutter, #Android Developer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade