gradient_borders 1.0.4
SDKflutter
Platformandroidioswindowslinuxmacosweb
Gradient borders for inputs and containers. Borders package integrated with a basic flutter widgets as a container and input decorations. Easy in use, platform independent.
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"),
),
),