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

Time:07-01

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

CodePudding user response:

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

CodePudding user response:

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