How to Create a Gradient AppBar in Flutter

Hello! 😀

In this article, I would like to show you how to make the background of an appBar (the blue part in the image below) a gradient.





In this tutorial, we will take this ordinary appBar and make it stylish using a package called new_gradient_app_bar. By the way, there is a package with a very similar name called gradient_app_bar, but looking at GitHub, its last commit was in September 2019, so I personally think it's better to use new_gradient_app_bar.

Steps

1. Install the package
   First, add the description to pubspec.yaml according to pub.dev.
   
   

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  new_gradient_app_bar: ^0.2.0 # Add this

The package version is current as of the time of writing this article, so I recommend double-checking it on pub.dev!

Don't forget to run pub get as well.


2. Edit the file
After that, just import and use it in the file you want. This time, I'll edit the main.dart file.

main.dart

import 'package:flutter/material.dart';
import 'package:new_gradient_app_bar/new_gradient_app_bar.dart'; // Import

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: Scaffold(
        // From here
        appBar: NewGradientAppBar(
          title: Text('Sample App'),
          gradient: LinearGradient(
            colors: [Colors.lightBlue.shade200, Colors.deepPurple.shade200],
          ),
        ),
	// To here
        body: Container(),
      ),
    );
  }
}

The appBar settings are configured in the section between the comments. We use NewGradientAppBar() instead of the standard AppBar(). You can implement a gradient by setting a value for the gradient: property of NewGradientAppBar().

And here is the result of the code above.





It looks pretty good! 🎨

More Details

Let me explain the gradient settings in a bit more detail.

Color Settings

LinearGradient() can take two or more colors, like LinearGradient(colors: [color1, color2, color3]). If you change the settings as follows:

gradient: LinearGradient(
            colors: [
              Colors.lightBlue.shade200,
              Colors.yellow.shade200,
              Colors.deepPurple.shade200
            ],
          ),

It will look like this.

By the way, if you want to set your own colors, you can do so by setting the content of colors: [] to Color.fromRGBO(r, g, b, opacity). Let's try changing it as follows:

gradient: LinearGradient(
            colors: [
              Color.fromRGBO(255, 105, 180, 1.0),
              Color.fromRGBO(64, 224, 208, 1.0),
            ],

You can see that it is being rendered correctly, looking like this.

Setting Gradient Direction

You can specify the direction of the gradient by setting begin: and end: in LinearGradient(). Let's try changing the gradient direction from top to bottom.

gradient: LinearGradient(
            colors: [
              Colors.lightBlue.shade200,
              Colors.deepPurple.shade200,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),

It looks great.

Setting Gradient Stops

Finally, let's look at stops:. By setting stops: in LinearGradient(), you can specify the position of the color transitions. I think it will be easier to understand by looking at the actual output before and after setting it, so let's try it right away.

// Before setting
gradient: LinearGradient(
            colors: [
              Colors.lightBlue.shade200,
              Colors.pink.shade200,
              Colors.deepPurple.shade200,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),

// After setting
gradient: LinearGradient(
            colors: [
              Colors.lightBlue.shade200,
              Colors.pink.shade200,
              Colors.deepPurple.shade200,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            stops: [0.0, 0.75, 1.0], // Added
          ),

It might be subtle, but by adding the setting stops: [0.0, 0.75, 1.0], the deeper pink part has shifted downward. This means the gradient starts at the beginning (0.0) with Colors.lightBlue.shade200, transitions to Colors.pink.shade200 at the 75% mark, and ends (1.0) with Colors.deepPurple.shade200.

---

I tried several things, and it seems like something anyone can use easily, which is great! 🎶

That concludes the explanation on how to make the background of an appBar a gradient in Flutter.

Thank you for reading until the end.