showDateRangePicker colour/theme is not working [Flutter]

Question

I wanted to change the colour of showDateRangePicker view. ( please refer to the following code ). But unfortunately, it's not working properly. what I missed in my code?

I'm using package:flutter/src/material/date_picker.dart. and flutter 3.13.3

code as follows,

                var pickedDate = await showDateRangePicker(
                  context: context,
                  initialDateRange: DateTimeRange(
                      start: widget.selectedDate!, end: widget.selectedDate!),
                  firstDate: DateTime.now().subtract(Duration(days: 0)),
                  lastDate: DateTime(2100),
                  builder: (BuildContext context, Widget? child) {
                    return Theme(
                      data: ThemeData.light().copyWith(
                        colorScheme: ColorScheme.fromSwatch(
                          primarySwatch: Colors.teal,
                          accentColor: Colors.teal,
                        ),
                        dialogBackgroundColor:Colors.white,
                      ),
                      child: child!,
                    );
                  },
                );

Answer 1

I have solved those issues in this way:

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // // Define your desired primary and accent colors
        primarySwatch: Colors.red,

        // Customize the background color of the date picker
        canvasColor:
            Colors.white, // Change this to the desired background color
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedDate;

  Future<void> _selectDate(BuildContext context) async {
    var pickedDate = await showDateRangePicker(
      context: context,
      initialDateRange: DateTimeRange(
        start: selectedDate ?? DateTime.now(),
        end: selectedDate ?? DateTime.now(),
      ),
      firstDate: DateTime.now().subtract(const Duration(days: 0)),
      lastDate: DateTime(2100),
      builder: (BuildContext context, Widget? child) {
        return Theme(
          data: ThemeData.light().copyWith(
            colorScheme: ColorScheme.fromSwatch(
              primarySwatch: Colors.teal,
              accentColor: Colors.teal,
            ),
            dialogBackgroundColor: Colors.white,
            // Customize header color
            appBarTheme: const AppBarTheme(
              backgroundColor: Colors.teal,
            ),
          ),
          child: child!,
        );
      },
    );

    if (pickedDate != null && pickedDate != selectedDate) {
      setState(() {
        selectedDate = pickedDate.start;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Date Range Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDate != null
                  ? 'Selected Date: ${selectedDate!.toLocal()}'
                  : 'Select a Date',
              style: const TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: const Text('Select Date Range'),
            ),
          ],
        ),
      ),
    );
  }
}

I hope this will help you.