container_gradient_border

A Flutter widget that applies a gradient border to any child widget using CustomPaint for pixel-accurate stroke rendering.

Preview

Features

• Any gradient type — LinearGradient, RadialGradient, SweepGradient
• Sizes to child automatically — no fixed height/width required
• True stroke border — drawn with CustomPaint, not a background bleed-through
• Focused input fields — swap gradient on focus using Focus widget
• Pill / fully-rounded shapes — set borderRadius: 999
• Transparent or solid background — control via containerColor
• Inner padding — padding parameter spaces content away from the border
• Multi-stop gradients — pass as many colors as needed
• Works on Android, iOS, Web, Windows, macOS, and Linux

Installation

dependencies:
  container_gradient_border: ^0.1.0

Usage

Linear gradient — card

ContainerGradientBorder(
  borderWidth: 3,
  borderRadius: 16,
  gradient: const LinearGradient(
    colors: [Colors.blue, Colors.purple],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  containerColor: Colors.white,
  padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
  child: const Text('Hello, Gradient Border!'),
)

Radial gradient — avatar / icon

ContainerGradientBorder(
  borderWidth: 4,
  borderRadius: 60,
  gradient: const RadialGradient(
    colors: [Colors.orange, Colors.red],
  ),
  containerColor: Colors.grey.shade100,
  child: const SizedBox(
    width: 100,
    height: 100,
    child: Icon(Icons.person, size: 56),
  ),
)

Sweep gradient — rainbow pill button

ContainerGradientBorder(
  borderWidth: 2,
  borderRadius: 999,
  gradient: const SweepGradient(
    colors: [
      Colors.red, Colors.orange, Colors.yellow,
      Colors.green, Colors.blue, Colors.purple, Colors.red,
    ],
  ),
  containerColor: Colors.black,
  padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 14),
  child: const Text('Rainbow Button', style: TextStyle(color: Colors.white)),
)

TextField with focus state

Wrap in a StatefulWidget, track focus with a bool, and swap the gradient on onFocusChange:

// inside State<...>.build:
bool _focused = false;

Focus(
  onFocusChange: (hasFocus) => setState(() => _focused = hasFocus),
  child: ContainerGradientBorder(
    borderWidth: 2,
    borderRadius: 10,
    gradient: LinearGradient(
      colors: _focused
          ? [Colors.deepPurple, Colors.pink]
          : [Colors.grey.shade300, Colors.grey.shade400],
    ),
    containerColor: Colors.white,
    child: const TextField(
      decoration: InputDecoration(
        hintText: 'Tap to focus...',
        border: InputBorder.none,
        contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
      ),
    ),
  ),
)

Parameters