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

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.

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

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.

CodePudding user response：

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.