我是这样解决这些问题的：

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'),
            ),
          ],
        ),
      ),
    );
  }
}

我希望这对你有帮助。