When using FutureProvider, I want to display an Indicator for loading, but I cannot customize the size

Question

I want to display an Indicator during the loading while using FutureProvider, but the size remains at its maximum and cannot be reduced.

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

I tried wrapping it with a Container and using BoxConstraints to specify the size, but it didn't work. How can I specify the size of the Indicator to be displayed during loading?

Answer 1

Can you try to set Container as the child of Center?

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