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:

• To download and install Flutter.
• To download and install Android Studio or Visual Studio Code.
• It is recommended to install plugins for your code editor:
  • Flutter and Dart plugins installed for Android Studio.
  • Flutter extension installed for Visual Studio Code.

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:

flutter create flutter_gradient_example

Navigate to the new project directory:

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:

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:

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:

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:

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:

dependencies:
  flutter:
    sdk: flutter

  gradient_app_bar: ^0.1.3

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

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:

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

This example will use a LinearGradient with cyan and indigo.

Compile your code and have it run in an emulator:

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.