flutter 渐变色边框 GradientBorder

圆角设置,渐变色边框,这里使用线性渐变。 走向你的高光时刻吧。

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)],
);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容