CODEWITHSUNDEEP
flutterflutter-layout
Nicholas Muir
Nicholas Muir

Reputation: 3124

Flutter image in SizedBox is overridden by parent Container

I am trying to place an image in the center of a box (container with border). The image size is set by surrounding it with a sized box, the the border or box is being created by surrounding that with a container with box decoration like this:

            InkWell(
              child: Container(
                  decoration: BoxDecoration(border: Border.all()),
                  height: 50,
                  width: 70,
                  child: SizedBox(
                      height: 10,
                      width: 10,
                      child: Image.asset('assets/store_physical.png',
                          fit: BoxFit.cover)),
              ),
            ),

The problem is that the image asset it ignoring the dimensions of the sized box and taking the size from the surrounding container making the image too big.

I am not sure why this is happening unless it gets it size from the top of the widget tree which doesn't seem to make sense.

Upvotes: 4

Views: 10331

Answers (4)

PRATHIV
PRATHIV

Reputation: 570

 Container(
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: const [
                    BoxShadow(
                      color: Color.fromARGB(255, 142, 137, 137),
                      blurRadius: 3,
                    ),
                  ],
                  borderRadius: BorderRadius.circular(15.0),
                ),
                child: Image.asset(
                  'assets/images/amazon.png',
                  fit: BoxFit.cover,
                  height: 28,
                  width: 28,
                ),
              ),

Upvotes: 0

JAgüero
JAgüero

Reputation: 687

When the child container is smaller than the parent, the parent doesn't know where to place it, so it forces it to have the same size. If you include the parameter alignment in the parent container, it will respect the size of the child Container:

InkWell(
      child: Container(
          alignment: Alignment.topLeft, //Set it to your specific need
          decoration: BoxDecoration(border: Border.all()),
          height: 50,
          width: 70,
          child: SizedBox(
              height: 10,
              width: 10,
              child: Image.asset('assets/store_physical.png',
                  fit: BoxFit.cover)),
      ),
    ),

Upvotes: 2

Ojasv Singh
Ojasv Singh

Reputation: 51

I also had the same problem. You can try adding the Image.asset inside another container and then change the size of that container accordingly.

InkWell(
  child: Container(
      decoration: BoxDecoration(border: Border.all()),
      height: 50,
      width: 70,
      child: SizedBox(
          height: 10,
          width: 10,
          child: Container(
                   height: 40.0,
                   width: 40.0,
                   child: Image.asset(
                      'assets/store_physical.png',
                      fit: BoxFit.cover
                    )
              )
      ),
  ),
)

Upvotes: 1

CopsOnRoad
CopsOnRoad

Reputation: 268274

Remove width and height from Container and SizedBox, instead provide it in Image.asset()

Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.blue, width: 5)),
  child: Image.asset(
    'assets/store_physical.png',
    fit: BoxFit.cover,
    height: 50, // set your height
    width: 70, // and width here
  ),
)

Upvotes: 1

Related Questions