Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to fit image into a box of all aspect ratio?

I’m dealing with the template png which has a boxed place where I need to fit any size image within that box. How can fit all dimension image to fit in that box in flutter?. I have attached the image.

enter image description here

I need to add image in that black area which is PNG image and what I tried to implement is here.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

body: Stack(
        children: [
          Positioned(
            top: MediaQuery.of(context).size.height / 3.5,
            right: MediaQuery.of(context).size.width / 10,
            child: imagePicked == null
                ? SizedBox()
                : AspectRatio(
                    aspectRatio: 1,
                    child: Image.file(imagePicked, fit: BoxFit.fill),
                  ),
          ),
          const Positioned.fill(
              child: Align(
                  alignment: Alignment.centerRight,
                  child: Image(image: AssetImage('assets/images/notice.png')))),
        ],
      ),

But Here I couldn’t manage all dimension images. Please help me sort to fit any dimension image into that black box which is also a template image.

>Solution :

The main issue is here overlaying with stack’s widgets.
Widget render prioritize bottom to top level on Stack.

In your code-snippet, place-holder is the bottom widget, and it is being prioritized over the selected image.

That’s why putting place-holder as 1st widget on stack solve the issue.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading