Gradient borders

style: very good analysis

Various borders that use gradient instead of boring plain colors.

Usage

Box borders:

Change your container borders to use fancy gradients:

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    border: const GradientBoxBorder(
      gradient: LinearGradient(colors: [Colors.blue, Colors.red]),
      width: 4,
    ),
    borderRadius: BorderRadius.circular(16)
  ),
),

Works with both: border radius, and with BoxShape.circle

image

Input borders

You can use GradientOutlineInputBorder as a part of your input decoration:

TextField(
  decoration: InputDecoration(
    border: GradientOutlineInputBorder(
      gradient: LinearGradient(colors: [Colors.red, Colors.blue]),
      width: 2,
    ),
    focusedBorder: GradientOutlineInputBorder(
     gradient: LinearGradient(colors: [Colors.yellow, Colors.green]),
      width: 2
    ),
    label: Text("Example"),
  ),
),

image

The Code Brothers

Libraries

gradient_borders
box_borders/gradient_box_border
input_borders/gradient_outline_input_border