Flutter中FutureBuilder展示加载动画报Renderbox未布局异常如何解决？

1. 无限高度报错原因 #

你将FutureBuilder放在了Column的直接子节点中，Column在纵轴方向不会给子组件施加固定高度约束，会传递无限高度的布局约束。而waiting状态返回的Center组件会尝试撑满父级可用高度，父级高度为无限时就会触发constraints.biggest.isFinite断言，即使Spinner本身设置了尺寸，在无边界的父约束下也无法正常布局。

2. Directionality缺失报错原因 #

SpinKitFadingCircle内部依赖Stack组件实现动画效果，Stack默认的对齐属性AlignmentDirectional.topStart需要依赖父级的Directionality组件确定文本方向。你移除了Loading组件中错误添加的MaterialApp后，该位置的组件树缺少对应的方向配置，因此触发该报错。

第一步：给FutureBuilder添加高度约束 #

给包裹FutureBuilder的Padding组件外层套Expanded，让它填充Column除了底部30px之外的所有可用空间，获得明确的高度约束：

body: SafeArea(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      // 新增Expanded包裹Padding
      Expanded(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.0),
          child: FutureBuilder(
            // 保留你原有的FutureBuilder逻辑不变
            future: _screenFuture,
            builder: (context, snap) {
              // 原有逻辑不变
            }
          ),
        ),
      ),
      SizedBox(
        height: 30,
      )
    ],
  ),
),

第二步：给Loading组件补充方向配置 #

在Loading组件中添加Directionality组件，明确指定文本方向即可：

class Loading extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Container(
      color: Colors.white,
      // 新增Directionality配置
      child: Directionality(
        textDirection: TextDirection.ltr,
        child: SpinKitFadingCircle(
          color: Colors.black,
          size: 30,
        ),
      )
    );
  }
}

如果你的应用根组件MyApp已经正确包裹了MaterialApp，也可以检查FutureBuilder的上下文是否能正常拿到顶层的Directionality配置，上述直接在Loading中添加的方案通用性更强，不需要修改其他层级的代码。

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