How To Create Simple Gradient App Bar With Flutter

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("Custom Gradient 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 our problem

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

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