Flutter: How to paint an Icon on Canvas?

Question

I'm using a CustomPainter to draw in Flutter like this:

@override
void paint(Canvas canvas, Size size) {
  canvas.drawRect(...);
  canvas.drawImage(...);
  ...
}

How to draw an Icon on canvas?

you mean that [Icon](https://api.flutter.dev/flutter/widgets/Icon-class.html)? if so, you cannot do that — pskink, Sep 13 '19 at 10:54
Yes, I'm about that [Icon](https://api.flutter.dev/flutter/widgets/Icon-class.html). And it is very strange if so (even if the icon is actually not an image but created from TTF font internally). — IronHawk, Sep 13 '19 at 11:06
its a `TextSpan` see https://www.crossdart.info/p/flutter/0.0.38-dev/src/widgets/icon.dart.html#line-128 — pskink, Sep 13 '19 at 11:20

Ant D · Answer 1 · 2019-09-18T16:24:18.170

21

@Richard Heap and @pskink based on your answers I was trying and came up with this: Thank you guys this is what I too was searching for.

final icon = Icons.add;
TextPainter textPainter = TextPainter(textDirection: TextDirection.rtl);
textPainter.text = TextSpan(text: String.fromCharCode(icon.codePoint),
        style: TextStyle(fontSize: 40.0,fontFamily: icon.fontFamily));
textPainter.layout();
textPainter.paint(canvas, Offset(50.0,50.0));

edited Sep 18 '19 at 16:24

answered Sep 18 '19 at 05:29

Ant D

2,481
6
18
34

is there a way to add a GestureDetector on the icon ? – Simran Aswani Feb 16 '20 at 04:35
1) If you mean IconButton widget - It has an onPressed function. 2) If you want to add the above CustomPainter add it as a child to Container. This Container's parent can be a GeatureDetector or InkWell. – Ant D Feb 16 '20 at 13:17
You need to also pass the color to TextStyle. Otherwise, you won't see anything. – user2233706 Nov 03 '20 at 15:29

score 14 · Accepted Answer · answered Sep 13 '19 at 12:15

14

Create a Paragraph containing the code point in the correct font, style it as needed, then draw it.

final icon = Icons.add;
var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
  fontFamily: icon.fontFamily,
))
  ..addText(String.fromCharCode(icon.codePoint));
var para = builder.build();
para.layout(const ui.ParagraphConstraints(width: 60));
canvas.drawParagraph(para, const Offset(20, 20));

answered Sep 13 '19 at 12:15

Richard Heap

48,344
9
130
112

This didn't work for https://pub.dev/packages/font_awesome_flutter, but @Ludonope's answer did – opsb Feb 20 '21 at 12:25

score 9 · Answer 3 · answered Nov 20 '20 at 13:49

Just to add a small but important detail, if you are trying to render an icon from an external icon pack (such a Material Design Icons or FontAwesome) you need to add the package parameter in the TextStyle.

final icon = MdiIcons.check;
TextPainter textPainter = TextPainter(textDirection: TextDirection.ltr);
textPainter.text = TextSpan(
  text: String.fromCharCode(icon.codePoint),
  style: TextStyle(
    color: Colors.black,
    fontSize: size,
    fontFamily: icon.fontFamily,
    package: icon.fontPackage, // This line is mandatory for external icon packs
  ),
);
textPainter.layout();
textPainter.paint(canvas, Offset(x, y));

Thank you this "package: icon.fontPackage" was really the way to go when using icon packages from different source :D — apatrck01, Feb 22 '23 at 18:09

score 0 · Answer 4 · answered May 13 '22 at 01:42

0

If you have SVG file design. You can use this website to automatically generated CustomPainter file dart.

answered May 13 '22 at 01:42

Doan Bui

3,572
25
36

Flutter: How to paint an Icon on Canvas?

4 Answers4

Linked