How to retain image round corners during transition (zoom)

user_12323557 0
Viewed 106

I want to display an image with rounded corners and have the ability to zoom in/out. It's important that the rounded corners of the image do not cut into the image while zooming, and instead remain on the edges of the image.

I am using the extended_image library to display my image and using its gesture mode to zoom in/out of the image. I am aware that it has a rounded image feature using borders, however, the image has to remain static, as zooming in/out causes the edges (borders) to cut into the image.

How can I go about solving this situation (I can use any available library)?

P.S. I would prefer if the solution can be done using the extended_image library.

Extra: A workaround that I can think of is somehow converting the URL being displayed into a Uint8List and during the conversion also adding rounded corners to the image. I know how to convert the URL, but I'm not sure how to add the rounded corners permanently.

flutter-layout flutter
2 Answers
you can use ClipRRect to round the corner of the image and you can this link to zoom in and zoom out.

https://github.com/iampawan/FlutterUtilsCollection?ref=morioh.com&utm_source=morioh.com

How to zoom In Zoom Out And Rotate in Flutter
ā˜ž https://morioh.com/p/6bc7e69c1446

#Flutter #programming 

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image(
    image: NetworkImage(
      'https://www.tutorialkart.com/img/hummingbird.png'),
  ),
),
user_164554210

you can ClipRRect the Container first then use interactive viewer.

  ClipRRect(
                    borderRadius: BorderRadius.circular(8.0),
                    clipBehavior: Clip.antiAlias,
                    child: Container(
                      child: InteractiveViewer(
                        maxScale: 3.0,
                        // minScale: 0.1,
                        // boundaryMargin: const EdgeInsets.all(double.infinity),
                        constrained: true,
                        child: Column(
                          children: [
                            Container(
                              child: Image(
                                image: AssetImage(imageUrl),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
user_159325320
Related