Description:
gradient borders
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)
),
),
copied to clipboard
Works with both: border radius, and with BoxShape.circle
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"),
),
),
copied to clipboard
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"),
),
),
copied to clipboard
Sponsored by #
The Code Brothers
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Customer Reviews
There are no reviews.
