使用FutureProvider时，如何自定义加载Indicator的显示尺寸？

你遇到的问题本质是Indicator组件没有遵守外层Container的约束，可能是Indicator自身硬编码了固定尺寸，或者内部使用了不受父约束的布局组件。以下是几种可行的解决方法：

方法1：直接给Indicator设置尺寸（优先推荐） #

如果你的Indicator是系统组件（比如CircularProgressIndicator），或者支持直接传入尺寸参数，直接给它设置尺寸即可：

return ref.watch(futureProvider).when(
  loading: () => const SizedBox(
    width: 10,
    height: 10,
    child: CircularProgressIndicator(strokeWidth: 2), // strokeWidth控制线条粗细，适配小尺寸
  ),
  error: (error, stack) => const SizedBox(),
  data: (answer) => SizedBox(child: answer),
);

如果是自定义Indicator，修改组件代码，让它支持接收尺寸参数，或者内部布局依赖父容器的约束（比如去掉固定的SizedBox宽高）。

方法2：用Transform.scale强制缩放组件 #

如果无法修改Indicator的内部代码，直接通过缩放来调整尺寸：

return ref.watch(futureProvider).when(
  loading: () => Transform.scale(
    scale: 0.25, // 缩放比例，0.25对应原尺寸的1/4
    child: const Indicator(),
  ),
  error: (error, stack) => const SizedBox(),
  data: (answer) => SizedBox(child: answer),
);

方法3：给Indicator添加ConstrainedBox约束 #

如果Indicator内部布局会忽略父容器约束，在外层给它套一层ConstrainedBox强制限制尺寸：

return ref.watch(futureProvider).when(
  loading: () => const ConstrainedBox(
    constraints: BoxConstraints(
      maxWidth: 10,
      maxHeight: 10,
    ),
    child: Indicator(),
  ),
  error: (error, stack) => const SizedBox(),
  data: (answer) => SizedBox(child: answer),
);

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