Flutter-Gradient App Bar

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

Final Output

Before starting anything, In every code, we need a page to 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 flexible` Space we can use a widget. So now we simply use a Container and give 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 like it then please clap mi thank you.

Here is my whole code: https://github.com/Shubham-Narkhede/gradient_app_bar