Remove bottom line on DateTimePicker

Question

HelloEverybody,

I hope that you are doing well. I am trying to remove bottom line on datetimepicker in Flutter but I do not find the solution. Some help would be greatly appreciated. Many thanks.

Card(
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(2.0, 2.0, 15.0, 1.0),
                        child: DateTimePicker(
                          decoration: InputDecoration(
                            border: InputBorder.none,
                          ),
                          type: DateTimePickerType.dateTimeSeparate,
                          dateMask: 'd MMM yyyy',
                          controller: _controlerTaskDueDate,
//initialValue: DateTime.now().toString(),
                          firstDate: DateTime(2020),
                          lastDate: DateTime(2200),
                          icon: Padding(
                            padding: const EdgeInsets.fromLTRB(5.0, 4.0, 0.0, 1.0),
                            child: Icon(Icons.event),
                          ),
                          dateLabelText: 'Due Date',
                          timeLabelText: "Due Time",

//use24HourFormat: false,
                          selectableDayPredicate: (date2) {
                            if (date2.weekday == 6 || date2.weekday == 7) {
                              return true;
                            }
                            return true;
                          },
                          onChanged: (valDueDate) => setState(() => _valueTaskDueDateChanged = valDueDate),
                          validator: (valDueDate) {
                            setState(() => _valueTaskDueDateToValidate = valDueDate);
                            return null;
                          },
                          onSaved: (valDueDate) => setState(() => _valueTaskDueDateSaved = valDueDate),
                        ),
                      ),
                    ),

user_13089096 · Answer

Within your DateTimePicker() widget, add this decoration:

decoration: InputDecoration(
  border: InputBorder.none,
),

UPDATE:

Since my previous answer was overriding the DateTimePicker decorations, I found this to work:

Theme(
  data: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      border: InputBorder.none,
    )
  ),
  child: //your card widget,
),

Remove bottom line on DateTimePicker

1 Answers