边框上绘制渐变色

import 'package:flutter/material.dart';

class RectangularPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = const Color(0xFF25C700)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4;

    final rect = Rect.fromLTWH(0, 0, size.width, size.height);
    // canvas.drawRect(rect, paint);
    
    // 定义矩形的边框和填充区域
    RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(0)); // 设置矩形的圆角

    const gradient = LinearGradient(
      colors: [Colors.blue, Colors.green], // 渐变色的起始和结束颜色
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    );

    // 绘制渐变色填充
    paint.shader = gradient.createShader(rect);
    canvas.drawRRect(rRect, paint); // 使用绘制的渐变色填充矩形

    // 绘制矩形边框
    paint.color = Colors.black; // 设置边框颜色
    paint.style = PaintingStyle.stroke; // 只绘制边框
    paint.strokeWidth = 4; // 设置边框宽度
    canvas.drawRRect(rRect, paint); // 绘制边框
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容