Flutter : How to paint an Icon on Canvas?

In Flutter, when drawing icons on a Canvas, you typically cannot directly use the Icon widget because Canvas requires lower-level drawing tools. However, you can achieve this by following these steps:

1. Convert the Icon to an Image

Since Canvas operates at a lower level of drawing, we first need to convert the desired icon into an image. This can be achieved using PictureRecorder and Canvas, as shown in the example below:

dart
import 'dart:ui' as ui;

Future<ui.Image> getIconImage(IconData iconData, Color color, double size) async {
  final pictureRecorder = ui.PictureRecorder();
  final canvas = Canvas(pictureRecorder);
  final paint = Paint()..color = color;
  final paragraphStyle = ui.ParagraphStyle(textDirection: TextDirection.ltr);
  final textStyle = ui.TextStyle(
    color: color,
    fontFamily: iconData.fontFamily,
    fontSize: size,
  );
  final paragraphBuilder = ui.ParagraphBuilder(paragraphStyle)
    ..pushStyle(textStyle)
    ..addText(String.fromCharCode(iconData.codePoint));
  final paragraph = paragraphBuilder.build()
    ..layout(ui.ParagraphConstraints(width: size));
  canvas.drawParagraph(paragraph, Offset.zero);
  final picture = pictureRecorder.endRecording();
  final img = await picture.toImage(size.toInt(), size.toInt());
  return img;
}

2. Draw the Image on Canvas

After obtaining the image of the icon, you can draw it on the Canvas using the drawImage method within CustomPainter, as shown below:

dart
class IconPainter extends CustomPainter {
  final ui.Image iconImage;

  IconPainter(this.iconImage);

  @override
  void paint(Canvas canvas, Size size) {
    paintImage(
      canvas: canvas,
      rect: Rect.fromLTWH(0, 0, size.width, size.height),
      image: iconImage,
      fit: BoxFit.fill,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

3. Use CustomPainter in a Widget

Finally, you can display this canvas in the Flutter widget tree using the CustomPaint widget:

dart
class IconCanvasWidget extends StatelessWidget {
  final ui.Image iconImage;

  IconCanvasWidget({Key? key, required this.iconImage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(100, 100),
      painter: IconPainter(iconImage),
    );
  }
}

Summary

By following these steps, you can draw icons on the Canvas in Flutter. Although this method is somewhat complex, it provides greater flexibility and possibilities, especially useful for custom drawing. In practical applications, you also need to handle issues such as asynchronous image loading and resource management to ensure performance and efficiency.