skip to Main Content

enter image description here calendar_date_picker2: ^0.5.3

Using this library I want to hide a dot below the date text

2

Answers


  1. You are probably using the code example from here. They added dayBuilder to showcase how you can customize the widget for certain days. To fix this, remove the dayBuilder from your config.

    CalendarDatePicker2WithActionButtonsConfig(
    ...
    dayBuilder: ..., // remove this
    )
    
    Login or Signup to reply.
  2. I hope you are using calendar_date_picker2:^0.5.3 package. If yes, please find the CalendarDatePicker2WithActionButtonsConfig function in the code below.

    _buildCalendarDialogButton() {
        const dayTextStyle =
            TextStyle(color: Colors.black, fontWeight: FontWeight.w700);
        final weekendTextStyle =
            TextStyle(color: Colors.grey[500], fontWeight: FontWeight.w600);
        final anniversaryTextStyle = TextStyle(
          color: Colors.red[400],
          fontWeight: FontWeight.w700,
          decoration: TextDecoration.underline,
        );
        final config = CalendarDatePicker2WithActionButtonsConfig(
          dayTextStyle: dayTextStyle,
          calendarType: CalendarDatePicker2Type.range,
          selectedDayHighlightColor: Colors.purple[800],
          closeDialogOnCancelTapped: true,
          firstDayOfWeek: 1,
    
          weekdayLabelTextStyle: const TextStyle(
            color: Colors.black87,
            fontWeight: FontWeight.bold,
          ),
          controlsTextStyle: const TextStyle(
            color: Colors.black,
            fontSize: 15,
            fontWeight: FontWeight.bold,
          ),
          centerAlignModePicker: true,
          customModePickerIcon: const SizedBox(),
          selectedDayTextStyle: dayTextStyle.copyWith(color: Colors.white),
          dayTextStylePredicate: ({required date}) {
            TextStyle? textStyle;
            if (date.weekday == DateTime.saturday ||
                date.weekday == DateTime.sunday) {
              textStyle = weekendTextStyle;
            }
            if (DateUtils.isSameDay(date, DateTime(2021, 1, 25))) {
              textStyle = anniversaryTextStyle;
            }
            return textStyle;
          },
          dayBuilder: ({
            required date,
            textStyle,
            decoration,
            isSelected,
            isDisabled,
            isToday,
          }) {
            Widget? dayWidget;
            if (date.day % 3 == 0 && date.day % 9 != 0) {
              dayWidget = Container(
                decoration: decoration,
                child: Center(
                  child: Stack(
                    alignment: AlignmentDirectional.center,
                    children: [
                      Text(
                        MaterialLocalizations.of(context).formatDecimal(date.day),
                        style: textStyle,
                      ),
                      /*Padding(
                        padding: const EdgeInsets.only(top: 27.5),
                        child: Container(
                          height: 4,
                          width: 4,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5),
                            color: isSelected == true
                                ? Colors.red
                                : Colors.grey[500],
                          ),
                        ),
                      ),*/
                    ],
                  ),
                ),
              );
            }
            return dayWidget;
          },
          yearBuilder: ({
            required year,
            decoration,
            isCurrentYear,
            isDisabled,
            isSelected,
            textStyle,
          }) {
            return Center(
              child: Container(
                decoration: decoration,
                height: 36,
                width: 72,
                child: Center(
                  child: Semantics(
                    selected: isSelected,
                    button: true,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          year.toString(),
                          style: textStyle,
                        ),
                        if (isCurrentYear == true)
                          Container(
                            padding: const EdgeInsets.all(5),
                            margin: const EdgeInsets.only(left: 5),
                            decoration: const BoxDecoration(
                              shape: BoxShape.circle,
                              color: Colors.redAccent,
                            ),
                          ),
                      ],
                    ),
                  ),
                ),
              ),
            );
          },
        );
        return Padding(
          padding: const EdgeInsets.all(15),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () async {
                  final values = await showCalendarDatePicker2Dialog(
                    context: context,
                    config: config,
                    dialogSize: const Size(325, 400),
                    borderRadius: BorderRadius.circular(15),
                    value: _dialogCalendarPickerValue,
                    dialogBackgroundColor: Colors.white,
                  );
                  if (values != null) {
                    // ignore: avoid_print
                    print(_getValueText(
                      config.calendarType,
                      values,
                    ));
                    setState(() {
                      _dialogCalendarPickerValue = values;
                    });
                  }
                },
                child: const Text('Open Calendar Dialog'),
              ),
            ],
          ),
        );
      }
    
    

    Now, all you need to do is remove/comment the code below, and that will eliminate the dot under the date text.

    Padding(
                        padding: const EdgeInsets.only(top: 27.5),
                        child: Container(
                          height: 4,
                          width: 4,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5),
                            color: isSelected == true
                                ? Colors.red
                                : Colors.grey[500],
                          ),
                        ),
                      ),
    

    Please verify, I trust this should resolve your concern.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search