Flutter: Stack not formatting correctly

Question

I have a container that id like to have an icon button over top of, but for some reason implementing a stack messes up the format.

this code:

      child: Container(
        height: 150,
        width: 100,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          border: Border.all(
            width: 1,
            color: Theme.of(context).primaryColor,
          ),
        ),
        child: ....
            : InkWell(
                onTap: () async {
                  await updateImage(context);
                },
                child: Image.network(
                  widget.imageUrl!,
                  fit: BoxFit.cover,
                ),
              ),
      ),

Gives me the following:

but wrapping the inkwell in a stack:

Stack(
                children: [
                  InkWell(
                    onTap: () async {
                      await updateImage(context);
                    },
                    child: Image.network(
                      widget.imageUrl!,
                      fit: BoxFit.cover,
                    ),
                  ),
                ],
              ),

results in this:

Any idea why this is?

Thanks!

Answer 1

Using stack, child require a positioned widget. You can use fit: StackFit.expand,

Stack(
  fit: StackFit.expand,
  children: [

or wrap with Positioned.fill( as Mahi mentined.

Also there are other parameters are usefull like

Positioned(
  width: ,
  height: ,
  child: Image.network(
     widget.imageUrl!,
     fit: BoxFit.cover,
     width: 100, //or this
     height: 150, 

)

Answer 2

The stack sizes itself to contain all the non-positioned children. If you do not specify the images height or positioned it inside stack it will align as much as the space they want. if you want to fill the image inside the stack try with Positioned.fill or specify the size for image.