Updated June 2026. Tested on Flutter 3.x and Dart 3. Part of the Techalyst Flutter series.

Gradients are an easy way to add depth: a background that fades from one colour to another, a button with a bit of richness, a header that is not just flat fill. You do not need a package for any of this. Flutter has gradients built in, and they slot into the same BoxDecoration you already use for backgrounds and borders. If you have seen old tutorials reaching for a gradient AppBar plugin, you can skip it, the framework covers this on its own.

A linear gradient

The common one runs colours along a line. You give it a list of colours and where the line starts and ends:

Container(
  decoration: const BoxDecoration(
    gradient: LinearGradient(
      colors: [Color(0xFF027DFD), Color(0xFF00DC82)],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
)

begin and end set the direction. Top-left to bottom-right gives a diagonal, centerLeft to centerRight gives a horizontal fade. You can pass more than two colours, and stops controls where each one sits along the line, from 0 to 1, if you do not want them spread evenly:

LinearGradient(
  colors: [Colors.blue, Colors.green, Colors.yellow],
  stops: [0.0, 0.7, 1.0], // green sits most of the way along
)

Radial and sweep

Two other shapes cover the rest. RadialGradient spreads from a centre point outward in a circle, good for a spotlight or a glow. SweepGradient sweeps the colours around a centre like a clock hand, which is how you make a colour wheel or a circular progress effect:

const RadialGradient(colors: [Colors.white, Colors.blue]);
const SweepGradient(colors: [Colors.red, Colors.green, Colors.blue, Colors.red]);

They drop into BoxDecoration exactly like the linear one.

Gradient text and icons

A Container background is the easy case. To put a gradient on text or an icon, you paint the gradient through the shape of the glyphs with a ShaderMask:

ShaderMask(
  shaderCallback: (bounds) => const LinearGradient(
    colors: [Color(0xFF027DFD), Color(0xFF00DC82)],
  ).createShader(bounds),
  child: const Text(
    'Techalyst',
    style: TextStyle(fontSize: 40, color: Colors.white),
  ),
)

The child's colour has to be white (or any solid colour) for the mask to show through it cleanly. The gradient then fills the letters.

A gradient AppBar, no plugin

This is the one people install a package for, and it is unnecessary. An AppBar has a flexibleSpace, which is just a widget behind its content, so you put a gradient Container there:

AppBar(
  title: const Text('Home'),
  flexibleSpace: Container(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: [Color(0xFF027DFD), Color(0xFF00DC82)],
      ),
    ),
  ),
)

That is a fully gradient app bar with framework widgets only.

Wrapping up

Gradients in Flutter are a built-in, plugin-free feature. Drop a LinearGradient, RadialGradient or SweepGradient into a BoxDecoration to paint any container, use stops to place the colours where you want, and reach for a ShaderMask when you need the gradient on text or an icon. Even the gradient AppBar that tutorials install packages for is just a gradient Container in flexibleSpace. Once you see that decorations carry the gradient, you can put one anywhere a colour goes.