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

previously published at https://fluttercentral.com/Articles/Post/1202/Flutter_Gradient_AppBar

github repository:  https://github.com/Shubham-Narkhede/gradient_app_bar


Join Hacker Noon

Create your free account to unlock your custom reading experience.