美文网首页flutter 项目实战工具类
flutter 渐变色边框 GradientBorder

flutter 渐变色边框 GradientBorder

作者: 呆头呆脑雷 | 来源:发表于2023-06-05 15:26 被阅读0次

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

    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)],
    );
    

    相关文章

      网友评论

        本文标题:flutter 渐变色边框 GradientBorder

        本文链接:https://www.haomeiwen.com/subject/rxfwedtx.html