flutterflutter-imageflutter-container

Flutter image in container look streched


When I try to place an image in container with specific height the image look stretched please find the below screenshot. Is it possible to fit the image as actual image without stretching.

enter image description here

actual image

enter image description here

Container(
                  height: 350,
                  decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(25)),
                    boxShadow: const [BoxShadow(color: Color.fromRGBO(104, 104, 104, 0.2), offset: Offset(0, 1), spreadRadius: 5, blurRadius: 10)],
                    image: DecorationImage(
                      //colorFilter: const ColorFilter.mode(Color.fromRGBO(0, 0, 0, 1.0), BlendMode.color),
                      image: getImage(imageId: 123).image,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),


Solution

  • You can use fit: BoxFit.contain, or fit: BoxFit.cover,

    if you are use BoxFit.cover you can alignment use to align the image

    fit: BoxFit.cover,
    alignment: Alignment.topCenter,,
    

    fit: BoxFit.contain

    fit: BoxFit.contain,
    

    fit: BoxFit.contain,alignment: Alignment.bottomCenter,

    fit: BoxFit.contain,
    alignment: Alignment.bottomCenter,
    

      fit: BoxFit.contain,
alignment: Alignment.topCenter,

      fit: BoxFit.contain,
      alignment: Alignment.topCenter,