Hackernoon logoHow To Create Simple Gradient App Bar With Flutter by@shubham-narkhede

How To Create Simple Gradient App Bar With Flutter

Author profile picture

@shubham-narkhedeShubham Narkhede


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 {
  _AppBarState createState() => _AppBarState();

class _AppBarState extends State<AppBar> {
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Custom Gradient AppBar"),
        body: Text("XXXXXXX"));
We have used the 
 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 
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
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>[
In this above code, we use gradient method for color and that’s solve our problem


The Noonification banner

Subscribe to get your daily round-up of top tech stories!