Action items not showing in flutter_date_range_picker

Question

I attempted to integrate the Flutter date range picker widget into my Flutter web application. While the option to change months is functional, I encountered an issue where the left and right arrow icons are not visible. Has anyone else experienced this problem, or is it possibly an issue within the package itself?

I also tried using previous versions of the package but it didn't work.

here is the code

this is how i call

ElevatedButton(
                    onPressed: () => showDateRangePickerDialog(
                        context: context,
                        builder: datePickerBuilder,
                        offset: Offset(310, 180)),
                    style: ButtonStyle(
                      padding: MaterialStateProperty.all(EdgeInsets.all(16.0)),
                      textStyle: MaterialStateProperty.all(
                        const TextStyle(fontSize: 16),
                      ),
                      elevation: MaterialStateProperty.all(20),
                      backgroundColor:
                          MaterialStateProperty.all(Colors.greenAccent),
                      foregroundColor: MaterialStateProperty.all(Colors.black),
                    ),
                    child: Text(formattedStartDate + " - " + formattedEndDate),
                  ),

this is the Widget

Widget datePickerBuilder(
          BuildContext context, dynamic Function(DateRange?) onDateRangeChanged,
          [bool doubleMonth = false]) =>
      DateRangePickerWidget(
        doubleMonth: doubleMonth,
        maximumDateRangeLength: 10,
        theme: CalendarTheme(
          selectedColor: Colors.blue,
          dayNameTextStyle: TextStyle(color: Colors.black45, fontSize: 10),
          inRangeColor: Color(0xFFD9EDFA),
          inRangeTextStyle: TextStyle(color: Colors.blue),
          selectedTextStyle: TextStyle(color: Colors.white),
          todayTextStyle: TextStyle(fontWeight: FontWeight.bold),
          monthTextStyle: TextStyle(color: Colors.black, fontSize: 12),
          defaultTextStyle: TextStyle(color: Colors.black, fontSize: 12),
          radius: 10,
          tileSize: 40,
          disabledTextStyle: TextStyle(color: Colors.grey),
        ),
        quickDateRanges: [
          QuickDateRange(dateRange: null, label: "Remove date range"),
          QuickDateRange(
            label: 'Last 3 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 3)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 7 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 7)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 30 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 30)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 90 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 90)),
              DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 180 days',
            dateRange: DateRange(
              DateTime.now().subtract(const Duration(days: 180)),
              DateTime.now(),
            ),
          ),
        ],
        minimumDateRangeLength: 3,
        // initialDateRange: this.selectedDateRange ??
        //     DateRange(
        //         DateTime.now(), DateTime.now().add(const Duration(days: 7))),
        // disabledDates: [DateTime(2023, 11, 20)],
        initialDisplayedDate: this.selectedDateRange?.start ?? today,
        onDateRangeChanged: (DateRange? value) {
          if (value != null) {
            var _rangeStart = value.start;
            var _rangeEnd = value.end;
            this.updateDateRange(_rangeStart, _rangeEnd);
          } else {
            onDateRangeChanged(DateRange(today, today));
            this.updateDateRange(today, today);
          }
        },
      );

Any help would be greatly appreciated.

Answer 1

Looks like the iconTheme of the ThemeData is affecting the arrows color.

I ran your code in a Flutter web app with this ThemeData configuration:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    iconTheme: IconThemeData(color: Colors.yellow),
  ),
  // ...
)

The result: