Make Container the same size of image in a different widget-CodePudding

I have a card widget which can be flipped. Image on the front side and text on the back.
The problem is that the images can be uploaded by the user, so sizes can vary.
How can I rescale the Container with the text to be the same size as the provided image?
Right now the container takes up all the space it can get, whereas the image is a bit smaller.

Code:

 Widget getCardSide(isFlipped) {
    if (isFlipped) {
      return Container(
          padding: const EdgeInsets.all(15),
          child: Column(
            children: [
              Container(
                alignment: Alignment.topCenter,
                child: Text(widget.title,
                    style: const TextStyle(
                        color: textColor,
                        fontSize: 45,
                        decoration: TextDecoration.underline,
                        fontWeight: FontWeight.bold)),
              ),
              Container(
                padding: const EdgeInsets.only(top: 30),
                child: Text(widget.text,
                    style: const TextStyle(
                      color: textColor,
                      fontSize: 25,
                    )),
              ),
            ],
          ));
    } else {
      return Container(
        alignment: Alignment.center,
        child: Image.file(
          widget.image,
        ),
      );
    }
  }

So how do I resize the container in the If-Block to the same size as the image in the Else-Block?

CodePudding user response：

Try this

remove

alignment: Alignment.center, from the image.. replace your code with this

 Widget getCardSide(isFlipped) {
if (isFlipped) {
  return Container(
      padding: const EdgeInsets.all(15),
      child: Column(
        children: [
          Container(
            alignment: Alignment.topCenter,
            child: Text(widget.title,
                style: const TextStyle(
                    color: textColor,
                    fontSize: 45,
                    decoration: TextDecoration.underline,
                    fontWeight: FontWeight.bold)),
          ),
          Container(
            padding: const EdgeInsets.only(top: 30),
            child: Text(widget.text,
                style: const TextStyle(
                  color: textColor,
                  fontSize: 25,
                )),
          ),
        ],
      ));
} else {
  return Container(
 
    child: Expand(
       child: Image.file(
      widget.image,
    ),
   )
  );
}

}

CodePudding user response：

After trying a bunch of different things, this seems to fix it:

return Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.cover,
            image: FileImage(widget.image),
          ),
        ),
      );

That way the Image is scaled to the same size as the other container, although it cuts up the edges. Not exactly what I wanted but that works too.