Flutter中FutureBuilder嵌套ListView+CheckboxListTile报约束错误

错误根源 #

这个constraints.hasBoundedWidth断言错误，核心原因是你的布局结构中Row的水平约束是无界的——Row默认允许子元素在水平方向无限延伸，而内部的Column没有明确的宽度限制，导致嵌套的ListView无法确定自身的宽度范围，进而触发渲染断言失败。即使ListView设置了shrinkWrap: true，它依然需要一个明确的宽度边界才能正常渲染。

修复步骤 #

1. 给Column添加宽度约束

最直接的修复方式是用Expanded包裹Column，让它占据Row的全部可用水平空间，为内部的ListView提供明确的宽度约束：

return Scaffold(
  body: Padding(
      padding: EdgeInsets.all(20),
      child: Row(
        children: [
          const SizedBox(width: 15),
          // 用Expanded包裹Column，约束水平宽度
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(widget.routine.title!, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
                SizedBox(height: 6),
                Text(widget.routine.description!),
                const Divider(
                  height: 10,
                  thickness: 2,
                  indent: 20,
                  endIndent: 0,
                  color: Colors.white,
                ),
                FutureBuilder<List<RoutineTask>>(
                    future: _getRoutineTasks(widget.routine.id!),
                    builder: (BuildContext context, AsyncSnapshot<List<RoutineTask>> snapshot) {
                      if (snapshot.connectionState == ConnectionState.done) {
                        if(snapshot.data == null) {
                          return Center(
                            child: Text("No Tasks!"),
                          );
                        } else if (snapshot.hasError) {
                          return Center(
                            child: Text("An Error has Occured: ${snapshot.error}"),
                          );
                        } else {
                          return ListView.separated(
                            reverse: false,
                            itemCount: snapshot.data!.length,
                            scrollDirection: Axis.vertical,
                            shrinkWrap: true,
                            separatorBuilder: (BuildContext context, index) => const Divider(),
                            itemBuilder: (BuildContext context, index) {
                              return Container(
                                  height: MediaQuery.of(context).size.height * 0.45,
                                  decoration: BoxDecoration(
                                      color: Colors.blue,
                                      borderRadius: BorderRadius.circular(25)
                                  ),
                                  child: CheckboxListTile(
                                    value: snapshot.data![index].isComplete,
                                    onChanged: (bool? value) {
                                      setState(() {
                                        snapshot.data![index].isComplete = value;
                                      });
                                    },
                                  ),
                                );
                            },
                          );
                        }
                      } else {
                        return Center(child: CircularProgressIndicator(),);
                      }
                    }
                )
              ],
            ),
          ),
        ],
      )),
);

如果不想让Column占满全部宽度，也可以用Container给Column设置固定宽度，比如：

Container(
  width: MediaQuery.of(context).size.width * 0.8,
  child: Column(
    // ... 原有代码
  ),
)

2. 优化数据修改逻辑（可选但推荐）

当前直接修改snapshot.data![index].isComplete的做法不规范——snapshot.data是Future返回的快照数据，属于不可变对象，直接修改可能引发不可预期的问题。推荐的做法是将数据缓存到组件状态中：

class _RoutineDetailState extends State<RoutineDetail> {
  List<RoutineTask>? _tasks;
  bool _isLoading = true;
  String? _errorMsg;

  @override
  void initState() {
    super.initState();
    _loadTasks();
  }

  Future<void> _loadTasks() async {
    try {
      _tasks = await _getRoutineTasks(widget.routine.id!);
    } catch (e) {
      _errorMsg = e.toString();
    } finally {
      setState(() => _isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Row(
          children: [
            const SizedBox(width: 15),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(widget.routine.title!, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
                  SizedBox(height: 6),
                  Text(widget.routine.description!),
                  const Divider(
                    height: 10,
                    thickness: 2,
                    indent: 20,
                    endIndent: 0,
                    color: Colors.white,
                  ),
                  _isLoading
                      ? Center(child: CircularProgressIndicator())
                      : _errorMsg != null
                          ? Center(child: Text("An Error has Occured: $_errorMsg"))
                          : _tasks == null || _tasks!.isEmpty
                              ? Center(child: Text("No Tasks!"))
                              : ListView.separated(
                                  reverse: false,
                                  itemCount: _tasks!.length,
                                  scrollDirection: Axis.vertical,
                                  shrinkWrap: true,
                                  separatorBuilder: (_, __) => const Divider(),
                                  itemBuilder: (_, index) {
                                    return Container(
                                      height: MediaQuery.of(context).size.height * 0.45,
                                      decoration: BoxDecoration(
                                          color: Colors.blue,
                                          borderRadius: BorderRadius.circular(25)
                                      ),
                                      child: CheckboxListTile(
                                        value: _tasks![index].isComplete,
                                        onChanged: (bool? value) {
                                          setState(() {
                                            _tasks![index].isComplete = value;
                                          });
                                        },
                                      ),
                                    );
                                  },
                                ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这种方式既解决了布局约束问题，也让状态管理更符合Flutter的设计规范，避免直接操作快照数据带来的潜在风险。

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