Flutter Gradient Generator

2LinearGradient

A LinearGradient transitions colors smoothly along a straight vector defined from a begin alignment to an end alignment.

LinearGradient(
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  colors: [
    Color(0xFF6A11CB),
    Color(0xFF2575FC),
  ],
  stops: [0.0, 1.0], // Optional: distribution of color stops
  tileMode: TileMode.clamp, // clamp, repeated, mirror, decal
  transform: GradientRotation(0.785), // Optional rotation
)

3RadialGradient

A RadialGradient paints color transitions emanating outwards in concentric circles from a center point up to a given radius.

RadialGradient(
  center: Alignment.center,
  radius: 0.8,
  focal: Alignment(-0.2, -0.2), // Optional focal light point
  focalRadius: 0.1,
  colors: [
    Color(0xFFFF007F),
    Color(0xFF7928CA),
  ],
  tileMode: TileMode.clamp,
)

4SweepGradient

A SweepGradient (analogous to conic gradients in web design) sweeps color transitions clockwise in an angular arc around a center point.

import 'dart:math' as math;

SweepGradient(
  center: Alignment.center,
  startAngle: 0.0,
  endAngle: math.pi * 2,
  colors: [
    Color(0xFF00F5D4),
    Color(0xFF7B2CBF),
    Color(0xFFF15BB5),
    Color(0xFF00F5D4), // Wrap back to first color for seamless seam
  ],
)

Flutter Performance Best Practices

• Use const LinearGradient(...) whenever colors and alignments are static to allow Flutter to avoid re-allocating memory during widget rebuilds.
• When using ShaderMask for animated or scrolling lists, wrap it in a RepaintBoundary to prevent redundant GPU shader recompilations on every tick.
• For complex gradient headers that never change, prefer caching into a static constant or rendering on a cached canvas layer.