Flutter中如何通过代码为date_picker_timeline组件设置选中日期？

要实现点击按钮选中对应日期，核心是通过setState()更新选中日期的状态，同时确保DatePicker的手动选择也能同步更新状态，具体实现如下：

步骤1：完善DatePicker的onDateChange回调 #

先补全onDateChange的逻辑，保证手动选择日期时，页面下方的选中提示文本也能同步更新：

onDateChange: (date) {
  setState(() {
    selecteddate = date;
  });
},

步骤2：给三个按钮添加点击逻辑 #

在每个按钮的onPressed中，计算对应日期并更新状态：

• Yesterday按钮：选中当前日期减去1天
• Today按钮：选中当前日期
• Tomorrow按钮：选中当前日期加上1天

完整修改后的代码 #

class _HomeScreen2State extends State<HomeScreen2> {
  DateTime selecteddate = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Container(
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.circular(20),
              ),
              child: DatePicker(
                DateTime.now(),
                initialSelectedDate: selecteddate,
                selectionColor: Colors.black,
                selectedTextColor: Colors.white,
                onDateChange: (date) {
                  // 手动选择日期时更新状态
                  setState(() {
                    selecteddate = date;
                  });
                },
              ),
            ),
            Text('You have selected\n'+DateFormat.yMMMd().format(selecteddate).toString()),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(onPressed: (){
                  // 选中昨天
                  setState(() {
                    selecteddate = DateTime.now().subtract(const Duration(days: 1));
                  });
                }, child: const Text('Yesterday')),
                TextButton(onPressed: (){
                  // 选中今天
                  setState(() {
                    selecteddate = DateTime.now();
                  });
                }, child: const Text('Today')),
                TextButton(onPressed: (){
                  // 选中明天
                  setState(() {
                    selecteddate = DateTime.now().add(const Duration(days: 1));
                  });
                }, child: const Text('Tomorrow'))
              ],
            )
          ],
        ),
      ),
    );
  }
}

说明 #

• 使用setState()触发组件重新构建，DatePicker会根据selecteddate自动更新选中状态
• 通过DateTime.now().subtract(Duration(days:1))和add(Duration(days:1))来计算前后日期
• 补全onDateChange回调后，手动选择日期也能同步更新页面上的选中提示文本

内容的提问来源于stack exchange，提问作者Irfan Ganatra