CODEWITHSUNDEEP
canvasfluttericonscustom-painting
IronHawk
IronHawk

Reputation: 405

Flutter: How to paint an Icon on Canvas?

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?

Upvotes: 23

Views: 9798

Answers (4)

Doan Bui
Doan Bui

Reputation: 4436

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

enter image description here

Upvotes: 0

Ludonope
Ludonope

Reputation: 1093

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));

Upvotes: 11

Ant D
Ant D

Reputation: 2683

@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));

Upvotes: 25

Richard Heap
Richard Heap

Reputation: 51750

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));

Upvotes: 16

Related Questions