Flutter - 如何为日历中的日期制作自定义下划线？

Question

I want to make this design with an underline for a holiday in my calendar widget.

This is what I have so far. I don't know how to add spacing and round off the sides of the underline.

I am using SfDateRangePicker, here is the code so far:

              monthCellStyle: DateRangePickerMonthCellStyle(
              specialDatesTextStyle: TextStyle(
                  fontStyle: FontStyle.normal,
                  fontSize: 13,
                  fontWeight: FontWeight.w500,
                  color: Colors.black,
                  decoration: TextDecoration.underline,
                  decorationThickness: 4,
                  decorationColor: Colors.red[800]),

Answer 1

不幸的是syncfusion不是开源的，所以不能真正测试这个，但他们似乎有一个例子here

Answer 2

I don't know if it will be enough for what you want to accomplish, but you can get around this problem with this style. If you decrease the value "-2" the spacing will increase.
OBS: [credits]: Is it possible to underline text with some height between text and underline line?

 Text(
      "Your Text here",
      style: TextStyle(
        shadows: [
         Shadow(color: Colors.black, 
                offset: Offset(0, -2))
                ],
        color: Colors.transparent,
        decoration: TextDecoration.underline,
        decorationColor: Colors.blue,
        decorationThickness: 4,
        decorationStyle: TextDecorationStyle.solid,
                ),
              ),

Answer 3

I ended up following Mathiew's answer to create the design i needed. This is how i got it to look:

For anyone interested here is the code i ended up using:

 class _MonthCellDecoration extends Decoration {
  const _MonthCellDecoration(this.showIndicator,
      {this.borderColor, this.backgroundColor, this.indicatorColor});

  final Color borderColor;
  final Color backgroundColor;
  final bool showIndicator;
  final Color indicatorColor;

  @override
  BoxPainter createBoxPainter([VoidCallback onChanged]) {
    return _MonthCellDecorationPainter(showIndicator,
        borderColor: borderColor,
        backgroundColor: backgroundColor,
        indicatorColor: indicatorColor);
  }
}

class _MonthCellDecorationPainter extends BoxPainter {
  _MonthCellDecorationPainter(this.showIndicator,
      {this.borderColor, this.backgroundColor, this.indicatorColor});

  final Color borderColor;
  final Color backgroundColor;
  final bool showIndicator;
  final Color indicatorColor;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final Rect bounds = offset & configuration.size;
    _drawDecoration(canvas, bounds);
  }

  void _drawDecoration(Canvas canvas, Rect bounds) {
    final Paint paint = Paint()..color = backgroundColor;
    canvas.drawRRect(
        RRect.fromRectAndRadius(bounds, const Radius.circular(5)), paint);
    paint.style = PaintingStyle.stroke;
    paint.strokeWidth = 3;
    paint.strokeCap = StrokeCap.round;
    if (borderColor != null) {
      paint.color = borderColor;
      canvas.drawRRect(
          RRect.fromRectAndRadius(bounds, const Radius.circular(5)), paint);
    }

    if (showIndicator) {
      paint.color = indicatorColor;
      paint.style = PaintingStyle.fill;
      canvas.drawLine(Offset(bounds.left + 18, bounds.bottom - 7),
          Offset(bounds.right - 18, bounds.bottom - 7), paint);
    }
  }
}

And to use it just add this code to the monthCellStyle property

specialDatesDecoration: _MonthCellDecoration(true,
   backgroundColor: Colors.transparent,
   indicatorColor: Colors.red),