Flutter时间范围选择插件simple_time_range_picker的使用

当然，以下是如何在Flutter项目中使用simple_time_range_picker插件来选择时间范围的代码示例。这个插件允许用户从时间选择器中选择一个开始时间和结束时间。

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

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

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

接下来，你可以在你的Flutter应用中实现时间范围选择器。以下是一个完整的示例代码：

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

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

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

class TimeRangePickerDemo extends StatefulWidget {
  @override
  _TimeRangePickerDemoState createState() => _TimeRangePickerDemoState();
}

class _TimeRangePickerDemoState extends State<TimeRangePickerDemo> {
  DateTime? startTime;
  DateTime? endTime;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Range Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Time Range:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            if (startTime != null && endTime != null)
              Text(
                '${startTime!.toLocal().format(context)} - ${endTime!.toLocal().format(context)}',
                style: TextStyle(fontSize: 18),
              ),
            SizedBox(height: 40),
            ElevatedButton(
              onPressed: () async {
                final TimeOfDay? start = await showTimePicker(
                  context: context,
                  initialTime: TimeOfDay.fromDateTime(DateTime.now()),
                  builder: (BuildContext context, Widget? child) {
                    return Theme(
                      data: ThemeData.light().copyWith(
                        colorScheme: ColorScheme.fromSeed(
                          primarySwatch: Colors.blue,
                        ),
                      ),
                      child: child!,
                    );
                  },
                );

                if (start != null) {
                  final TimeOfDay? end = await showTimePicker(
                    context: context,
                    initialTime: start.adding(Duration(hours: 1)), // Default to 1 hour later
                    builder: (BuildContext context, Widget? child) {
                      return Theme(
                        data: ThemeData.light().copyWith(
                          colorScheme: ColorScheme.fromSeed(
                            primarySwatch: Colors.blue,
                          ),
                        ),
                        child: child!,
                      );
                    },
                  );

                  if (end != null) {
                    setState(() {
                      startTime = DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day, start!.hour, start!.minute);
                      endTime = DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day, end!.hour, end!.minute);
                    });
                  }
                }
              },
              child: Text('Select Time Range'),
            ),
          ],
        ),
      ),
    );
  }
}

// Extension method to format DateTime as a local string
extension DateTimeFormat on DateTime {
  String format(BuildContext context) {
    return DateFormat.jm().format(this.toLocal()).toString();
  }
}

在这个示例中，我们使用了Flutter自带的showTimePicker函数两次来分别选择开始时间和结束时间。请注意，这个示例并没有直接使用simple_time_range_picker插件，因为simple_time_range_picker可能并不直接提供与上述代码完全一致的API（具体API可能会因插件版本而异）。然而，如果你确实需要使用simple_time_range_picker插件，通常你可以参考其官方文档或GitHub页面上的示例代码。

由于simple_time_range_picker的具体用法可能随版本而变化，这里提供一个假设性的使用示例（基于插件可能提供的功能）：

// 假设simple_time_range_picker提供了如下API
SimpleTimeRangePicker.show(
  context: context,
  initialStartTime: TimeOfDay.fromDateTime(DateTime.now()),
  initialEndTime: TimeOfDay.fromDateTime(DateTime.now().add(Duration(hours: 1))),
  onConfirm: (TimeOfDay start, TimeOfDay end) {
    setState(() {
      startTime = DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day, start.hour, start.minute);
      endTime = DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day, end.hour, end.minute);
    });
  },
);

请务必查阅simple_time_range_picker的最新版本文档，以获取准确的API用法和示例代码。