Flutter实现：选择一个日期字段后另一字段不可选更早日期

要实现“选择第一个日期后，第二个日期无法选更早日期”的效果，核心是通过状态变量记录第一个日期的选中值，将其作为第二个日期选择器的可选起始日期。下面是完整的实现示例：

完整代码示例 #

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

void main() => runApp(const DateRangeApp());

class DateRangeApp extends StatelessWidget {
  const DateRangeApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('日期联动示例')),
        body: const DateRangePicker(),
      ),
    );
  }
}

class DateRangePicker extends StatefulWidget {
  const DateRangePicker({super.key});

  @override
  State<DateRangePicker> createState() => _DateRangePickerState();
}

class _DateRangePickerState extends State<DateRangePicker> {
  DateTime? _startDate;
  DateTime? _endDate;
  final DateFormat _dateFormatter = DateFormat('yyyy-MM-dd');

  // 选择开始日期
  Future<void> _selectStartDate() async {
    final picked = await showDatePicker(
      context: context,
      initialDate: _startDate ?? DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );
    if (picked != null && picked != _startDate) {
      setState(() {
        _startDate = picked;
        // 如果结束日期比新选的开始日期早，自动清空
        if (_endDate != null && _endDate!.isBefore(picked)) {
          _endDate = null;
        }
      });
    }
  }

  // 选择结束日期
  Future<void> _selectEndDate() async {
    final picked = await showDatePicker(
      context: context,
      initialDate: _endDate ?? _startDate ?? DateTime.now(),
      // 绑定起始日期为已选的开始日期，未选则用默认最早日期
      firstDate: _startDate ?? DateTime(2000),
      lastDate: DateTime(2100),
    );
    if (picked != null && picked != _endDate) {
      setState(() {
        _endDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              const Text('开始日期：'),
              TextButton(
                onPressed: _selectStartDate,
                child: Text(
                  _startDate != null ? _dateFormatter.format(_startDate!) : '请选择',
                ),
              ),
            ],
          ),
          Row(
            children: [
              const Text('结束日期：'),
              TextButton(
                onPressed: _selectEndDate,
                child: Text(
                  _endDate != null ? _dateFormatter.format(_endDate!) : '请选择',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

关键逻辑说明 #

• 用_startDate和_endDate两个状态变量存储用户选中的日期，通过setState更新UI
• 选择新的开始日期后，检查结束日期是否冲突：如果结束日期早于新的开始日期，自动清空结束日期，避免逻辑矛盾
• 结束日期选择器的firstDate参数直接绑定_startDate：如果已经选了开始日期，就只能选择不早于该日期的选项；未选择开始日期时，用默认的最早日期（这里设为2000年）
• 日期格式化用到了intl包，需要在pubspec.yaml中添加依赖：

  dependencies:
    intl: ^0.18.1 # 可使用最新版本
  

内容的提问来源于stack exchange，提问作者arbind kamat