Flutter日期范围选择插件extensive_date_range_picker的使用

当然，下面是一个关于如何使用 extensive_date_range_picker 插件的 Flutter 代码示例。这个插件允许用户选择一个日期范围，非常适合需要日期范围选择功能的场景。

首先，确保你已经在 pubspec.yaml 文件中添加了 extensive_date_range_picker 依赖：

dependencies:
  flutter:
    sdk: flutter
  extensive_date_range_picker: ^最新版本号 # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中使用 ExtensiveDateRangePicker。以下是一个完整的示例，展示如何集成并使用这个插件：

import 'package:flutter/material.dart';
import 'package:extensive_date_range_picker/extensive_date_range_picker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Date Range Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DateRangePickerDemo(),
    );
  }
}

class DateRangePickerDemo extends StatefulWidget {
  @override
  _DateRangePickerDemoState createState() => _DateRangePickerDemoState();
}

class _DateRangePickerDemoState extends State<DateRangePickerDemo> {
  DateTime? startDate;
  DateTime? endDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Date Range Picker Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Selected Date Range:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 8),
            if (startDate != null && endDate != null)
              Text(
                '${startDate!.toLocal().toDateString()} - ${endDate!.toLocal().toDateString()}',
                style: TextStyle(fontSize: 16),
              ),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: () async {
                final result = await showDatePickerRange(
                  context: context,
                  firstDate: DateTime(1900),
                  lastDate: DateTime(2100),
                  initialStartDate: startDate,
                  initialEndDate: endDate,
                  selectableDayPredicate: (DateTime day) {
                    // You can customize which days are selectable here
                    return true;
                  },
                  locale: Localizations.localeOf(context),
                );

                if (result != null) {
                  setState(() {
                    startDate = result.start;
                    endDate = result.end;
                  });
                }
              },
              child: Text('Select Date Range'),
            ),
          ],
        ),
      ),
    );
  }
}

Future<DateRange?> showDatePickerRange({
  required BuildContext context,
  required DateTime firstDate,
  required DateTime lastDate,
  DateTime? initialStartDate,
  DateTime? initialEndDate,
  required bool Function(DateTime day) selectableDayPredicate,
  required Locale locale,
}) async {
  return showModalBottomSheet<DateRange?>(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 300,
        child: ExtensiveDateRangePicker(
          firstDate: firstDate,
          lastDate: lastDate,
          selectedDateRange: DateRange(start: initialStartDate ?? firstDate, end: initialEndDate ?? firstDate),
          onDateRangeChanged: (DateRange newDateRange) {
            Navigator.of(context).pop(newDateRange);
          },
          selectableDayPredicate: selectableDayPredicate,
          locale: locale,
        ),
      );
    },
  );
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含一个按钮，用于打开日期范围选择器。当用户选择一个日期范围时，选择的结果会显示在页面上。

• ExtensiveDateRangePicker 是主要的日期范围选择组件。
• showDatePickerRange 是一个自定义函数，用于显示模态底部表单（BottomSheet）中的日期范围选择器。
• 使用 setState 更新选择的日期范围，并在页面上显示。

请确保在实际项目中根据需求调整日期范围、可选日期条件和其他参数。