Tutorial

How To Use Gradients in Flutter with BoxDecoration and GradientAppBar

Updated on March 18, 2021
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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  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 {
  @override
  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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors

Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel