Types of Gradient in flutters ?

Overview

Flutter provides three types of gradients for smooth color transitions: LinearGradient, RadialGradient, and SweepGradient. They're used in

BoxDecoration

ShaderMask

1. LinearGradient

Colors transition along a straight line (horizontal, vertical, diagonal).

dartCopy
Container(
  height: 200,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
)

Parameters:

colors

stops

begin

Alignment.centerLeft

end

Alignment.centerRight

tileMode

clamp

repeat

mirror

TileMode.clamp

Examples:

dartCopy
// Horizontal gradient
LinearGradient(
  colors: [Colors.red, Colors.yellow],
  begin: Alignment.centerLeft,
  end: Alignment.centerRight,
)

// Vertical gradient
LinearGradient(
  colors: [Colors.green, Colors.blue],
  begin: Alignment.topCenter,
  end: Alignment.bottomCenter,
)

// Diagonal gradient with stops
LinearGradient(
  colors: [Colors.pink, Colors.orange, Colors.yellow],
  stops: [0.0, 0.5, 1.0], // Pink 0-50%, orange 50%, yellow 50-100%
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
)

2. RadialGradient

Colors radiate from a center point outward in a circular pattern.

dartCopy
Container(
  height: 200,
  decoration: BoxDecoration(
    gradient: RadialGradient(
      colors: [Colors.yellow, Colors.orange, Colors.red],
      center: Alignment.center,
      radius: 0.8,
    ),
  ),
)

Parameters:

colors

stops

center

Alignment.center

radius

0.5

focal

focalRadius

0.0

Examples:

dartCopy
// Centered circle
RadialGradient(
  colors: [Colors.white, Colors.blue],
  center: Alignment.center,
  radius: 0.5,
)

// Off-center gradient
RadialGradient(
  colors: [Colors.lightBlue, Colors.darkBlue],
  center: Alignment.topRight,
  radius: 1.0,
)

// Elliptical gradient with focal point
RadialGradient(
  colors: [Colors.yellow, Colors.orange],
  center: Alignment.center,
  focal: Alignment.topCenter,
  focalRadius: 0.1,
)

3. SweepGradient

Colors sweep in a circular arc around a center point (like a color wheel).

dartCopy
Container(
  height: 200,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    gradient: SweepGradient(
      colors: [Colors.red, Colors.yellow, Colors.green, Colors.blue, Colors.red],
      center: Alignment.center,
    ),
  ),
)

Parameters:

colors

stops

center

Alignment.center

startAngle

0.0

endAngle

2π

Examples:

dartCopy
// Full circle sweep (rainbow)
SweepGradient(
  colors: [
    Colors.red,
    Colors.orange,
    Colors.yellow,
    Colors.green,
    Colors.blue,
    Colors.purple,
    Colors.red, // Complete the circle
  ],
)

// Half-circle sweep
SweepGradient(
  colors: [Colors.cyan, Colors.indigo],
  startAngle: 0.0,
  endAngle: 3.14, // π radians = 180°
)

// Rotated sweep
import 'dart:math';

SweepGradient(
  colors: [Colors.pink, Colors.purple],
  startAngle: pi / 4, // Start at 45°
  endAngle: pi * 2,
)

Gradient in Different Widgets

Container

dartCopy
Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
    borderRadius: BorderRadius.circular(16),
  ),
  child: Center(child: Text('Gradient Box')),
)

AppBar

dartCopy
AppBar(
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.deepPurple, Colors.purpleAccent],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
  ),
  title: Text('Gradient AppBar'),
)

Gradient Text

dartCopy
ShaderMask(
  shaderCallback: (bounds) => LinearGradient(
    colors: [Colors.pink, Colors.orange],
  ).createShader(bounds),
  child: Text(
    'Gradient Text',
    style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: Colors.white),
  ),
)

FloatingActionButton

dartCopy
FloatingActionButton(
  onPressed: () {},
  child: Container(
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      gradient: RadialGradient(colors: [Colors.yellow, Colors.orange]),
    ),
    child: Icon(Icons.add),
  ),
)

Comparison Table

LinearGradient

RadialGradient

SweepGradient

Best Practices

dartCopy
// ✅ Use stops for precise control
LinearGradient(
  colors: [Colors.red, Colors.blue],
  stops: [0.3, 0.7], // Red dominates first 30%, blue last 30%
)

// ✅ Match begin/end for desired angle
LinearGradient(
  colors: [Colors.green, Colors.teal],
  begin: Alignment.topCenter,    // Top
  end: Alignment.bottomCenter,   // To bottom
)

// ✅ Complete the circle for smooth SweepGradient
SweepGradient(
  colors: [Colors.red, Colors.blue, Colors.red], // First = last
)

Learn more: Flutter Gradients