圆角设置,渐变色边框,这里使用线性渐变。 走向你的高光时刻吧。
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class WeGradientBorder extends OutlinedBorder {
final LinearGradient gradient;
/// The radii for each corner.
final BorderRadiusGeometry borderRadius;
const WeGradientBorder({
this.gradient = kLinearGradient,
super.side = const BorderSide(width: 1),
this.borderRadius = const BorderRadius.all(Radius.circular(16.0)),
});
const WeGradientBorder.vertical({
this.gradient = kVerticalLinearGradient,
super.side = const BorderSide(width: 1),
this.borderRadius = const BorderRadius.all(Radius.circular(16.0)),
});
@override
ShapeBorder scale(double t) {
return WeGradientBorder(
gradient: gradient,
side: side.scale(t),
borderRadius: borderRadius * t,
);
}
@override
ShapeBorder? lerpFrom(ShapeBorder? a, double t) {
if (a is WeGradientBorder) {
return WeGradientBorder(
gradient: gradient,
side: BorderSide.lerp(a.side, side, t),
borderRadius:
BorderRadiusGeometry.lerp(a.borderRadius, borderRadius, t)!,
);
}
return super.lerpFrom(a, t);
}
@override
ShapeBorder? lerpTo(ShapeBorder? b, double t) {
if (b is WeGradientBorder) {
return WeGradientBorder(
gradient: gradient,
side: BorderSide.lerp(side, b.side, t),
borderRadius:
BorderRadiusGeometry.lerp(borderRadius, b.borderRadius, t)!,
);
}
return super.lerpTo(b, t);
}
/// Returns a copy of this RoundedRectangleBorder with the given fields
/// replaced with the new values.
@override
WeGradientBorder copyWith(
{BorderSide? side, BorderRadiusGeometry? borderRadius}) {
return WeGradientBorder(
gradient: gradient,
side: side ?? this.side,
borderRadius: borderRadius ?? this.borderRadius,
);
}
@override
Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
final RRect borderRect = borderRadius.resolve(textDirection).toRRect(rect);
final RRect adjustedRect = borderRect.deflate(side.strokeInset);
return Path()..addRRect(adjustedRect);
}
@override
Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
return Path()..addRRect(borderRadius.resolve(textDirection).toRRect(rect));
}
@override
void paintInterior(Canvas canvas, Rect rect, Paint paint,
{TextDirection? textDirection}) {
if (borderRadius == BorderRadius.zero) {
canvas.drawRect(rect, paint);
} else {
canvas.drawRRect(
borderRadius.resolve(textDirection).toRRect(rect), paint);
}
}
@override
bool get preferPaintInterior => true;
@override
void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
switch (side.style) {
case BorderStyle.none:
break;
case BorderStyle.solid:
if (side.width == 0.0) {
canvas.drawRRect(borderRadius.resolve(textDirection).toRRect(rect),
side.toPaint());
} else {
final Paint paint = Paint()
..color = side.color
..shader = gradient.createShader(rect);
final RRect borderRect =
borderRadius.resolve(textDirection).toRRect(rect);
final RRect inner = borderRect.deflate(side.strokeInset);
final RRect outer = borderRect.inflate(side.strokeOutset);
canvas.drawDRRect(outer, inner, paint);
}
break;
}
}
@override
bool operator ==(Object other) {
if (other.runtimeType != runtimeType) {
return false;
}
return other is RoundedRectangleBorder &&
other.side == side &&
other.borderRadius == borderRadius;
}
@override
int get hashCode => Object.hash(side, borderRadius);
@override
String toString() {
return '${objectRuntimeType(this, 'GradientBorder')}($side, $borderRadius)';
}
}
const kLinearGradient = LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
stops: [0, 0.5, 1.0],
colors: [Color(0x33AF7520), Color(0xFFFFE093), Color(0x33AF7520)],
);
const kVerticalLinearGradient = LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0, 0.5, 1.0],
colors: [Color(0x33AF7520), Color(0xFFFFE093), Color(0x33AF7520)],
);
网友评论