flutterdartdart-pub

How to remove selected "start date" and "end date" and "Select range" text within date range picker in Flutter


Screenshot

I implemented the date range picker. Here I need to modify the UI a little bit. I need to remove the top three texts: 1. Select range, 2. Start date, 3. End date. Is it possible? Or do I want to use any other third party packages? Is it possible?

             SizedBox(
              width: context.screenWidth * 0.3,
              child: InkWell(
                onTap: () async {
                  final DateTime now = DateTime.now();

                  final DateTimeRange? picked = await showDateRangePicker(
                    initialEntryMode: DatePickerEntryMode.calendarOnly,
                    context: context,
                    firstDate: DateTime(2000),
                    lastDate: now,
                    builder: (context, child) => Theme(
                      data: Theme.of(context).copyWith(
                        colorScheme: const ColorScheme.light(
                          primary: Colors.indigo,
                          onPrimary: Colors.white,
                          onSurface: Colors.black,
                        ),
                        textButtonTheme: TextButtonThemeData(
                          style: TextButton.styleFrom(
                            foregroundColor: Colors.indigo,
                          ),
                        ),
                      ),
                      child: child!,
                    ),
                  );
                },
                child: Container(
                  height: 40,
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  decoration: BoxDecoration(
                    border: selectedIndex == 4
                        ? Border.all(color: Colors.indigo)
                        : null,
                    borderRadius: BorderRadius.circular(4),
                    color: Colors.indigo.withValues(alpha: 0.1),
                  ),
                  child: Center(
                    child: Text(
                      "Custom",
                      style: TextStyle(
                        color: selectedIndex == 4
                            ? Colors.blue
                            : Colors.red,
                      ),
                    ),
                  ),
                ),
              ),
            ),

Solution

  • You can remove "Select Range" by passing empty string to helpText like this

    showDateRangePicker(
                context: context,
                firstDate: DateTime(2020),
                lastDate: DateTime(2050),
                helpText: "",
              );
    

    but you can't remove Start Date and End Date directly unless you rewrite the code for DateRangePickerDialog which is StatefullWidget you can find the code for it in material/date_picker.com. which is not a good approach IMO.