gradient static method

FocusEffectBuilder gradient({
  1. required List<Color> focusedColors,
  2. List<Color>? unfocusedColors,
  3. BorderRadius? borderRadius,
  4. Duration duration = const Duration(milliseconds: 250),
})

Gradient background effect.

Changes the widget background to a gradient when focused, and optionally when unfocused. This effect is great for colorful, modern focus indicators.

Example:

FocusEffects.gradient(
  focusedColors: [Colors.blue, Colors.purple],
  unfocusedColors: [Colors.grey.shade600],
)

Parameters:

  • focusedColors: Required list of colors for focused gradient
  • unfocusedColors: Optional list for unfocused gradient
  • borderRadius: Border radius for the container
  • duration: Animation duration (defaults to 250ms)

Returns: A FocusEffectBuilder that applies the gradient effect

Implementation

static FocusEffectBuilder gradient({
  required List<Color> focusedColors,
  List<Color>? unfocusedColors,
  BorderRadius? borderRadius,
  Duration duration = const Duration(milliseconds: 250),
}) {
  return (context, isFocused, child) {
    return AnimatedContainer(
      duration: duration,
      decoration: BoxDecoration(
        borderRadius: borderRadius ?? BorderRadius.circular(16),
        gradient: isFocused
            ? LinearGradient(colors: focusedColors)
            : (unfocusedColors != null
                ? LinearGradient(colors: unfocusedColors)
                : null),
        color: !isFocused && unfocusedColors == null
            ? Colors.grey.shade800
            : null,
      ),
      child: child,
    );
  };
}