Gradient borders
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). |
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. |
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"),
),
),