Which widget overlays and centers a loading indicator on an image?

What's really being asked

This question evaluates whether you understand Flutter's overlay layout model, specifically the Stack widget and the distinction between positioned and non-positioned children. The interviewer wants to see that you know Stack is designed for overlapping widgets, that child order determines z-order with the first child at the bottom, and that centering can be achieved either through Stack-level alignment or by wrapping a child in a Center widget. They also care whether you recognize sizing constraints, because a Stack sizes itself to contain all non-positioned children according to the provided fit and alignment.

The full answer

First, declare Stack as the correct widget because it positions children relative to the edges of its box and supports overlapping in a single layer. Second, state that the Image should be the first child in the children list so it paints at the bottom, with the loading indicator layered above it. Third, explain centering via two valid paths: either set the Stack's alignment property to Alignment.center so all non-positioned children are centered together, or leave the Stack alignment at its default and wrap the loading indicator in a Center widget. Fourth, mention sizing behavior: the Stack will size itself to contain the non-positioned children, so if the image is unconstrained you may need to wrap the Stack in a SizedBox or let the image's own dimensions define the bounds. Fifth, note that the indicator should remain non-positioned; avoid wrapping it in Positioned unless you have a specific offset requirement, since Center or Stack alignment handles centering more robustly.

The mistakes people make

Suggesting Column or Row with mainAxisAlignment and crossAxisAlignment does not overlay widgets; it arranges them sequentially. Proposing absolute Positioned values such as left and top calculated manually to approximate centering is fragile and ignores right-to-left layouts. Using a Scaffold body with centered content does not bind the indicator to the image bounds, so the loader will not track the image if the surrounding layout changes. Forgetting that the first child is at the bottom and placing the image last would hide it behind the indicator. Some candidates also suggest Align without clarifying when Center is preferable.

What usually comes next

How would you add a semi-transparent dark backdrop behind the indicator but over the image? What happens if the image is inside a scrollable list and the loader needs to track it? How would you center a child relative to the Stack's size if the child itself has no intrinsic dimensions? When would you use Positioned.fill instead of Center? How does text direction affect the default top-start alignment?

A concrete example

A concise implementation uses Stack(alignment: Alignment.center, children: [Image.network(url), CircularProgressIndicator()]). Alternatively, keep Stack at its default alignment and write Stack(children: [Image.network(url), Center(child: CircularProgressIndicator())]). In both cases the Stack should be constrained, for instance by placing it inside a SizedBox with fixed width and height or by letting the parent provide tight constraints so the overlay matches the image bounds exactly.