Flutter如何实现时间范围选择器

在Flutter中如何实现一个时间范围选择器？我需要让用户可以选择开始和结束日期，最好能支持自定义UI样式和日期限制。目前试过一些第三方库，但不太满足需求，有没有推荐的实现方案或插件？

Flutter中可使用showDateRangePicker方法实现时间范围选择器。它基于Material Design，提供日历界面供用户选择起始和结束日期。

示例代码：

DateTimeRange? selectedRange = await showDateRangePicker(
  context: context,
  firstDate: DateTime(2020),
  lastDate: DateTime(2030),
);

更多关于Flutter如何实现时间范围选择器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 2楼

在Flutter中实现时间范围选择器，可以使用第三方库或自定义组件。以下是几种常用方法：

1. 使用 table_calendar 库（推荐）

这是最常用的时间范围选择方案：

import 'package:table_calendar/table_calendar.dart';

class DateRangePicker extends StatefulWidget {
  @override
  _DateRangePickerState createState() => _DateRangePickerState();
}

class _DateRangePickerState extends State<DateRangePicker> {
  CalendarFormat _calendarFormat = CalendarFormat.month;
  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedStart;
  DateTime? _selectedEnd;
  RangeSelectionMode _rangeSelectionMode = RangeSelectionMode.toggledOn;

  @override
  Widget build(BuildContext context) {
    return TableCalendar(
      firstDay: DateTime.utc(2020, 1, 1),
      lastDay: DateTime.utc(2030, 12, 31),
      focusedDay: _focusedDay,
      calendarFormat: _calendarFormat,
      rangeSelectionMode: _rangeSelectionMode,
      selectedDayPredicate: (day) {
        return isSameDay(_selectedStart, day) || isSameDay(_selectedEnd, day);
      },
      rangeStartDay: _selectedStart,
      rangeEndDay: _selectedEnd,
      onDaySelected: (selectedDay, focusedDay) {
        if (!isSameDay(_selectedStart, selectedDay)) {
          setState(() {
            if (_selectedStart == null || 
                (_selectedStart != null && _selectedEnd != null)) {
              _selectedStart = selectedDay;
              _selectedEnd = null;
            } else {
              _selectedEnd = selectedDay;
              if (_selectedStart!.isAfter(_selectedEnd!)) {
                final temp = _selectedStart;
                _selectedStart = _selectedEnd;
                _selectedEnd = temp;
              }
            }
          });
        }
      },
      onFormatChanged: (format) {
        setState(() {
          _calendarFormat = format;
        });
      },
      onPageChanged: (focusedDay) {
        _focusedDay = focusedDay;
      },
    );
  }
}

2. 使用 date_range_picker 库

专门用于日期范围选择的库：

import 'package:date_range_picker/date_range_picker.dart' as DateRangePicker;

Future<void> showDateRangePicker() async {
  final List<DateTime>? picked = await DateRangePicker.showDatePicker(
    context: context,
    initialFirstDate: DateTime.now(),
    initialLastDate: DateTime.now().add(Duration(days: 7)),
    firstDate: DateTime(2020),
    lastDate: DateTime(2025),
  );
  
  if (picked != null && picked.length == 2) {
    print('开始日期: ${picked[0]}');
    print('结束日期: ${picked[1]}');
  }
}

3. 使用 showDateRangePicker（Flutter内置）

Flutter 2.0+ 内置了日期范围选择器：

Future<void> showBuiltInDateRangePicker() async {
  final DateTimeRange? picked = await showDateRangePicker(
    context: context,
    firstDate: DateTime(2020),
    lastDate: DateTime(2025),
    currentDate: DateTime.now(),
    initialDateRange: DateTimeRange(
      start: DateTime.now(),
      end: DateTime.now().add(Duration(days: 7)),
    ),
  );
  
  if (picked != null) {
    print('开始日期: ${picked.start}');
    print('结束日期: ${picked.end}');
  }
}

安装依赖

在 pubspec.yaml 中添加：

dependencies:
  table_calendar: ^3.0.8
  date_range_picker: ^1.0.6

Flutter如何实现时间范围选择器

1. 使用 table_calendar 库（推荐）

2. 使用 date_range_picker 库

3. 使用 showDateRangePicker（Flutter内置）

安装依赖

推荐方案