Flutter：Stepper组件无法适配Dialog的布局问题解决

问题根源 #

AlertDialog的content区域默认没有明确的高度约束，属于无限高度的布局环境。而Stepper内部的表单组件（比如多行TextField、带Expanded的布局）依赖父容器提供确定的高度约束，当子组件设置了非零flex属性时，就会触发RenderFlex布局错误。

解决方案 #

给Stepper包裹一个带明确高度约束的容器，同时添加滚动支持，确保内容超出时可以正常滚动。推荐使用ConstrainedBox + SingleChildScrollView的组合，既适配不同屏幕尺寸，又避免布局溢出。

完整示例代码 #

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: const Text('创建任务'),
      content: ConstrainedBox(
        // 限制最大高度为屏幕高度的70%，可根据需求调整
        constraints: BoxConstraints(
          maxHeight: MediaQuery.of(context).size.height * 0.7,
        ),
        child: SingleChildScrollView(
          child: Stepper(
            currentStep: _currentStep,
            onStepContinue: () {
              if (_currentStep < 3) {
                setState(() => _currentStep++);
              } else {
                // 提交逻辑
                Navigator.pop(context);
              }
            },
            onStepCancel: () {
              if (_currentStep > 0) {
                setState(() => _currentStep--);
              } else {
                Navigator.pop(context);
              }
            },
            steps: [
              Step(
                title: const Text('任务标题'),
                content: TextField(
                  decoration: const InputDecoration(hintText: '输入任务标题'),
                  controller: _titleController,
                ),
              ),
              Step(
                title: const Text('任务详情'),
                content: TextField(
                  decoration: const InputDecoration(hintText: '输入任务详情'),
                  controller: _descController,
                  maxLines: 3,
                ),
              ),
              Step(
                title: const Text('选择日程'),
                content: SizedBox(
                  height: 120,
                  child: DatePickerDialog(
                    initialDate: DateTime.now(),
                    firstDate: DateTime.now(),
                    lastDate: DateTime.now().add(const Duration(days: 365)),
                  ),
                ),
              ),
              Step(
                title: const Text('信息汇总'),
                content: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('标题: ${_titleController.text}'),
                    Text('详情: ${_descController.text}'),
                    Text('日程: ${_selectedDate.toString().split(' ')[0]}'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('取消'),
        ),
      ],
    );
  },
);

关键说明 #

• ConstrainedBox通过maxHeight给Stepper提供了明确的高度上限，避免无限高度环境导致的flex冲突。
• SingleChildScrollView保证当Stepper内容超过限制高度时，用户可以滚动查看全部内容，不会出现溢出错误。
• 避免在Stepper的step content中嵌套不必要的Expanded或Flex组件，除非父容器已经有确定的高度约束。

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