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

当然，下面是一个关于如何在Flutter中使用time_range_selector_widget插件的示例代码。这个插件允许用户选择一个时间范围。首先，确保你已经将插件添加到你的pubspec.yaml文件中：

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

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

以下是一个完整的示例，展示如何使用time_range_selector_widget：

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

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

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

class TimeRangeSelectorDemo extends StatefulWidget {
  @override
  _TimeRangeSelectorDemoState createState() => _TimeRangeSelectorDemoState();
}

class _TimeRangeSelectorDemoState extends State<TimeRangeSelectorDemo> {
  DateTime? startTime;
  DateTime? endTime;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Range Selector Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Selected Time Range:', style: TextStyle(fontSize: 18)),
            if (startTime != null && endTime != null) {
              Text(
                'Start: ${startTime!.toLocal().toString().split(' ')[1]} - End: ${endTime!.toLocal().toString().split(' ')[1]}',
                style: TextStyle(fontSize: 16),
              ),
            } else {
              Text('No time range selected', style: TextStyle(fontSize: 16, color: Colors.grey)),
            },
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                showModalBottomSheet(
                  context: context,
                  builder: (context) {
                    return TimeRangeSelectorWidget(
                      initialStartTime: DateTime.now().subtract(Duration(hours: 24)),
                      initialEndTime: DateTime.now(),
                      onTimeRangeSelected: (startTime, endTime) {
                        setState(() {
                          this.startTime = startTime;
                          this.endTime = endTime;
                        });
                        Navigator.of(context).pop();
                      },
                    );
                  },
                );
              },
              child: Text('Select Time Range'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

1. 导入依赖：

   import 'package:time_range_selector_widget/time_range_selector_widget.dart';
   

2. 设置主应用：

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

3. 创建主组件：

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

4. 创建包含状态管理的组件：

   class TimeRangeSelectorDemo extends StatefulWidget {
     @override
     _TimeRangeSelectorDemoState createState() => _TimeRangeSelectorDemoState();
   }
   
   class _TimeRangeSelectorDemoState extends State<TimeRangeSelectorDemo> {
     DateTime? startTime;
     DateTime? endTime;
   
     @override
     Widget build(BuildContext context) {
       // ...
     }
   }
   

5. 构建UI：

   • 显示当前选择的时间范围。
   • 使用ElevatedButton来触发时间选择器的模态底部表单。
   • 使用TimeRangeSelectorWidget来让用户选择时间范围，并通过onTimeRangeSelected回调更新状态。

这个示例展示了如何使用time_range_selector_widget插件在Flutter应用中实现时间范围的选择功能。确保在实际项目中根据需要进行调整和扩展。