Show zoomed in part of an image

Question

I want to show an Image but only a cropped part of it, zoomed in.

This is how it looks right now:

and this is how I want it to look:

I want the background image to be zoomed in.

I use flutter_gen_runner to be able to use Assets easily.

This is my code to show the image:

Assets.spotifai.defaultArtist.image(
    fit: BoxFit.cover,
),

I tried using the alignment and scale attribute, but couldn't achieve what I want with that.

What is the canonical way to do this?

score 3 · Accepted Answer · answered Jul 06 '23 at 18:16

You need to set the fit to BoxFit.none and decrease the image scale:

Stack(
          alignment: Alignment.center,
          children: [
            SizedBox(
                height: 300,
                width: 300,
                child: Opacity(
                  opacity: .5,
                  child: Image.network(
                    'https://th.bing.com/th/id/OIP.TJDY2Ff5mVD0G8oRYvxjOwHaFC?pid=ImgDet&rs=1',
                    fit: BoxFit.cover,
                  ),
                )),
            const Align(
              alignment: Alignment.center,
              child: SizedBox(
                  height: 200,
                  width: 200,
                  child: DecoratedBox(
                      decoration: BoxDecoration(
                    color: Colors.white,
                    image: DecorationImage(
                        image: NetworkImage('https://th.bing.com/th/id/OIP.TJDY2Ff5mVD0G8oRYvxjOwHaFC?pid=ImgDet&rs=1'), 
                    fit: BoxFit.none, 
                    scale: .6),         
              ))),
            )
          ],
        ),

Output:

Show zoomed in part of an image

1 Answers1