// Tutorial //

How To Use Gradients in Flutter with BoxDecoration and GradientAppBar

Published on April 22, 2019 · Updated on March 18, 2021
Default avatar
By PaulHalliday
Developer and author at DigitalOcean.
How To Use Gradients in Flutter with BoxDecoration and GradientAppBar

Introduction

Color gradients take a starting color and position and ending color and position. Then it performs a transition between the colors. With consideration for color theory, they can make an application more visually interesting than a plain design.

In this article, you will use BoxDecoration’s LinearGradient and gradient_app_bar package to apply gradients to a Flutter application.

Prerequisites

To complete this tutorial, you will need:

This tutorial was verified with Flutter v1.22.2, Android SDK v30.0.2, and Android Studio v4.1.

Step 1 — Setting Up the Project

Once you have your environment set up for Flutter, you can run the following to create a new application:

  1. flutter create flutter_gradient_example

Navigate to the new project directory:

  1. cd flutter_gradient_example

Using flutter create will produce a demo application that will display the number of times a button is clicked.

Step 2 — Using LinearGradient

Open main.dart with your code editor and modify the code to add a BoxDecoration:

lib/main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Gradient Example'),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [
                Colors.blue,
                Colors.red,
              ],
            )
          ),
          child: Center(
            child: Text(
              'Hello Gradient!',
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

The key to this is the addition of a decoration and BoxDecoration to the Container widget. This allows you to define a LinearGradient which can be given colors, as well as a begin and end Alignment.

Compile your code and have it run in an emulator:

Screenshot of the Flutter app running in an emulator with a linear gradient starting at the top of the screen with blue and gradually transitioning to red at the bottom of the screen.

This creates a linear gradient that starts at the top of the screen with blue and gradually transitions to red at the bottom of the screen.

Step 3 — Using stops with LinearGradient

It is also possible to have additional colors and finer control over where on the screen the color transition should take effect.

Revisit main.dart in your code editor and add stops:

lib/main.dart
class MyHomePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Gradient Example'),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              stops: [
                0.1,
                0.4,
                0.6,
                0.9,
              ],
              colors: [
                Colors.yellow,
                Colors.red,
                Colors.indigo,
                Colors.teal,
              ],
            )
          ),
          child: Center(
            child: Text(
              'Hello Gradient!',
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Compile your code and have it run in an emulator:

Screenshot of the Flutter app running in an emulator with a linear gradient starting at the top-right of the screen with yellow and gradually transitioning to red, indigo, and finally teal at the bottom-left of the screen.

This creates a linear gradient that starts at 0.0 of the way down the screen with yellow, then at 0.4 of the way down the screen it transitions to red, then at 0.6 of the way down the screen it transitions to indigo, then at 1.0 of the way down the screen it transitions to teal.

Step 4 — Using GradientAppBar

BoxDecoration does not apply to the AppBar. However, it is possible to use the GradientAppBar package to add color gradients to the AppBar.

Oepn pubspec.yaml in your code editor and add gradient_app_bar:

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  gradient_app_bar: ^0.1.3

Then, revisit main.dart and add the import for gradient_app_bar:

lib/main.dart
import 'package:flutter/material.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';

Finally, you can replace the AppBar with the GradientAppBar and subsequent colors:

lib/main.dart
appBar: GradientAppBar(
  title: Text('Flutter Gradient Example'),
  gradient: LinearGradient(
    colors: [
      Colors.cyan,
      Colors.indigo,
    ],
  ),
),

This example will use a LinearGradient with cyan and indigo.

Note: An earlier version of GradientAppBar used backgroundColorStart and backgroundColorEnd which are obsolete as of version 0.1.0.

Compile your code and have it run in an emulator:

Screenshot of the Flutter app running in an emulator with a linear gradient starting at the left of the screen with cyan and gradually transitioning to indigo at the right of the screen.

This creates a linear gradient that starts at the left of the screen with cyan and gradually transitions to indigo at the right of the screen.

Conclusion

In this article, you used LinearGradient and GradientAppBar to apply gradients to a Flutter application.

If you’d like to learn more about Flutter, check out our Flutter topic page for exercises and programming projects.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!