Is there any function in FLUTTER which would show specific part of an Image?

Question

I am trying to show specific parts of image. I want to achieve a circular dial puzzle game where parts of image are shown in thin circle slices.

Is there any function which would let me specify the radius of image that is to be shown ?

I have observed this is possible by stacking the same image again n again but with different radius lengths. The first one would have full radius and the images stacked on it would have lesser radius.

I have tried using container and circle avatar but the image is shown according to the set functionalities fill, cover, box-fit but non of them lets me decide which part is to be shown and which not.

This is the code I tried most recently.

child: Stack(
      children: <Widget>[
        Container(
          width: 500,
          height: 400,
          child: CircleAvatar(
            backgroundImage: AssetImage('assets/images/image.jpg'),
            minRadius: 50, 
            maxRadius: 200,
          ),
        ),
      ],
    ),

Here, I thought setting minRadius and maxRadius would do the work but it did not.

I am not a professional flutter developer. Just a beginner trying to learn about flutter.

Can you post the picture as well and what parts you are trying to specifically show? — spaceSentinel, Jun 19 '20 at 13:29

score 1 · Answer 1 · answered Jun 19 '20 at 14:18

1

This is probably to much information but I think the information you are looking for can be extracted from https://fidev.io/water-drop/

answered Jun 19 '20 at 14:18

JonnyH

358
2
8

Is there any function in FLUTTER which would show specific part of an Image?

1 Answers1