obiwanzenobi/gradient-borders

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

Parameters

Parameter	Type	Default	Description
gradient	Gradient	required	The gradient to use for the border color.
width	double	1.0	The width of the border.
strokeAlign	double	BorderSide.strokeAlignInside	The alignment of the stroke relative to the border edge. Use BorderSide.strokeAlignInside (-1), BorderSide.strokeAlignCenter (0), or BorderSide.strokeAlignOutside (1).

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"),
  ),
),

Parameters

Parameter	Type	Default	Description
gradient	Gradient	required	The gradient to use for the border color.
width	double	1.0	The width of the border.
gapPadding	double	4.0	Horizontal padding around the label cutout in the border.
borderRadius	BorderRadius	BorderRadius.all(Radius.circular(4))	The border radius of the rounded corners.
borderAlignment	OutlineBorderAlignment	OutlineBorderAlignment.onEdge	Controls where the stroke is drawn relative to the widget edge. onEdge draws the border centered on the widget boundary; inside draws it fully inside.

image

You can also use GradientUnderlineInputBorder as part of your input decoration:

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

Sponsored by

The Code Brothers