CODEWITHSUNDEEP
flutterflutter-layout
glaze
glaze

Reputation: 1319

Flutter - how do i make a custom underline for a date in my calendar?

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

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

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

Upvotes: 0

Views: 96

Answers (3)

glaze
glaze

Reputation: 1319

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

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

Upvotes: 0

Mateus Silva
Mateus Silva

Reputation: 1

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

Upvotes: 0

Mathiew Abbas
Mathiew Abbas

Reputation: 852

Unfortunately syncfusion is not open source so can't really test this but they seem to have an example here

Upvotes: 1

Related Questions