Flutter技术实现：如何在BottomSheet中嵌入DatePicker（附示例图）

要把DatePicker作为常驻Widget嵌入Column布局（而非弹窗形式），直接用Flutter Material库自带的CalendarDatePicker组件就能实现——它就是showDatePicker弹窗的底层核心组件，完全支持直接嵌入布局，和示例图的样式匹配度极高。

完整实现代码 #

import 'package:flutter/material.dart';

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

  @override
  State<EmbeddedDatePickerPage> createState() => _EmbeddedDatePickerPageState();
}

class _EmbeddedDatePickerPageState extends State<EmbeddedDatePickerPage> {
  // 维护选中日期的状态
  DateTime? _selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('嵌入式日期选择器')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 显示选中的日期
            Text(
              _selectedDate != null 
                  ? '选中日期: ${_selectedDate!.year}年${_selectedDate!.month}月${_selectedDate!.day}日'
                  : '请选择日期',
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
            ),
            const SizedBox(height: 20),
            // 嵌入的日期选择器，用Card包裹模拟示例图的卡片样式
            Card(
              elevation: 2,
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 8.0),
                child: CalendarDatePicker(
                  initialDate: _selectedDate ?? DateTime.now(),
                  firstDate: DateTime(2020), // 可选日期范围起始
                  lastDate: DateTime(2030),  // 可选日期范围结束
                  onDateChanged: (selectedDate) {
                    setState(() {
                      _selectedDate = selectedDate;
                    });
                  },
                  // 可选：默认显示年份选择模式，注释掉则默认显示月份
                  // initialCalendarMode: DatePickerMode.year,
                ),
              ),
            ),
            const SizedBox(height: 20),
            // 其他示例Widget，和日期选择器共存于Column中
            ElevatedButton(
              onPressed: () {
                if (_selectedDate != null) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('确认日期: ${_selectedDate!.toString().split(' ')[0]}')),
                  );
                } else {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('请先选择日期')),
                  );
                }
              },
              child: const Text('确认选择'),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• CalendarDatePicker自带年月切换栏、日历网格，完全匹配示例图的样式结构
• 通过onDateChanged回调实时获取选中日期，更新状态即可同步UI显示
• 可以通过firstDate/lastDate限制可选日期范围，initialCalendarMode切换月份/年份显示模式
• 用Card包裹组件可以快速实现示例图中的阴影卡片效果，调整elevation和padding能进一步匹配视觉需求

内容的提问来源于stack exchange，提问作者Flutter Developer