如何在颤动中为容器边框的特定边缘着色？

Question

大家好，我只想为容器的右上角和左下角着色 我没有找到使用颤振的方法

Container( 
          child: Text("Your Text"),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10.0),

          ),
          boxShadow: [
              BoxShadow(
                color: primaryColor.withOpacity(0.2),
                spreadRadius: 4,
                blurRadius: 7,
                offset: Offset(0, 3), // changes position of shadow
              ),

            ],
        ),

下图描述了我想要实现的目标。 请帮助我，从两天前开始我就一直坚持下去

Answer 1

您可以尝试的一种方法是使用CustomPainter。这里我们先画一个圆角的普通矩形。然后在上面用红色重新绘制 2 个角。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 100,
      child: CustomPaint(
        painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    
    double w = size.width;
    double h = size.height;
    double r = 15;                      //<-- corner radius
    
    Paint blackPaint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5;

    Paint redPaint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5;
    
    RRect fullRect = RRect.fromRectAndRadius(
          Rect.fromCenter(center: Offset(w/2, h/2), width: w, height: h),
          Radius.circular(r),
        );
    
    Path topRightArc = Path()
      ..moveTo(w - r, 0)
      ..arcToPoint(Offset(w, r), radius: Radius.circular(r));
    
    Path bottomLeftArc = Path()
      ..moveTo(r, h)
      ..arcToPoint(Offset(0, h - r), radius: Radius.circular(r));
    
    canvas.drawRRect(fullRect, blackPaint);
    canvas.drawPath(topRightArc, redPaint);
    canvas.drawPath(bottomLeftArc, redPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

结果：