How to draw a list of images with circular border in dart canvas?

Asked Jul 16 '22 at 12:20

Active Jul 16 '22 at 12:20

Viewed 178 times

I need to draw a list of images with canvas, and I need that each image has a circular border: expected:

but what I implemented is:

my code is:

 for (int i = 0; i < participants.length; i++) {
    Completer<ui.Image> completer = Completer<ui.Image>();
    Image networkImage = Image.network(participants[i]?.avatar ?? "");
    networkImage.image
        .resolve(const ImageConfiguration())
        .addListener(ImageStreamListener((ImageInfo info, bool _) {
      canvas.drawImageNine(info.image, const Rect.fromLTRB(0, 0, 0, 0),
          Rect.fromLTRB(10+(i*20), 50, (participants.length * 20 )+ 50, 100), Paint());
      completer.complete(info.image);
    }));
  }

I use canvas.clipPath() before canvas.drawImage() too:

   Path path = Path()..addOval(const Rect.fromLTWH(10, 50, 50+(i*50), 50));
   canvas.clipPath(path);

it clipped whole the list:

Please give me some help if you have any ideas.

asked Jul 16 '22 at 12:20

Parisa Baastani

1,713
14
31

do you want the solution with canvas only? I think using flutter widgets will be better than drawing it manually with canvas api. – Omkar76 Jul 16 '22 at 12:36
Yes, because for some reason, we used Paint, so I need a solution using canvas. – Parisa Baastani Jul 16 '22 at 12:49
check `Canvas.save` / `Canvas.restore` – pskink Jul 16 '22 at 12:55
could you explain more? @pskink – Parisa Baastani Jul 16 '22 at 14:35
2

before you call `clipPath` call `save` and after drawing one image call `restore` – pskink Jul 16 '22 at 14:47
and simply use `canvas.drawImage` not `canvas.drawImageNine` – pskink Jul 17 '22 at 05:23
canvas.save() and restore works for me, thanks a lot. – Parisa Baastani Jul 18 '22 at 08:25

How to draw a list of images with circular border in dart canvas?

0 Answers0