0

Estoy dibujando en un canvas un icono personalizado para mi app y me preguntaba cómo puedo hacer para mostrar uno de los iconos de material o fontawesome dentro de mi custom painter. Intento hacerlo de varias formas pero siempre se muestra el icono con un signo de interrogación sin importar el icono que le ponga:

introducir la descripción de la imagen aquí Esto es lo que he intentado:

class CustomMarker extends CustomPainter {
  final String label;
  final Color color;

  CustomMarker(this.label, this.color);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();

    // Draw rectangle
    paint.color = Colors.white;
    final rect1 = Rect.fromLTWH(0, 0, size.width, size.height);
    final RRect rRect1 =
        RRect.fromRectAndRadius(rect1, const Radius.circular(10));
    canvas.drawRRect(rRect1, paint);

    paint.color = color;
    final rect = Rect.fromLTWH(2.5, 2.5, size.width - 5, size.height - 5);
    final RRect rRect =
        RRect.fromRectAndRadius(rect, const Radius.circular(10));
    canvas.drawRRect(rRect, paint);

    paint.color = Colors.white;

    // Draw cicle pointer
    paint.color = Colors.white;
    canvas.drawCircle(Offset(size.width / 2, size.height), 15, paint);

    paint.color = Colors.blue;
    canvas.drawCircle(Offset(size.width / 2, size.height), 10, paint);

    // Draw text label
    final fishCodePoint = FontAwesomeIcons.fish.codePoint;

    final textPainter = TextPainter(
        text: TextSpan(
            text: String.fromCharCode(Icons.login.codePoint),
            style: const TextStyle(
              overflow: TextOverflow.ellipsis,
              fontSize: 30,
              color: Colors.white,
            )),
        maxLines: 1,
        textAlign: TextAlign.left,
        textDirection: TextDirection.ltr);

    textPainter.layout(minWidth: 0, maxWidth: size.width - 40);
    textPainter.paint(
        canvas, Offset(40, size.height / 2 - textPainter.size.height / 2));
  }

  @override
  bool shouldRepaint(CustomMarker oldDelegate) => false;
}

1 respuesta 1

1

Pude lograrlo incluyendo en el string el unicode del símbolo o icono que quería mostrar.

Hice esta modificación en el TextPainter:

final textPainter = TextPainter(
        text: TextSpan(
            text: '\u{2199}',
            style: const TextStyle(
                overflow: TextOverflow.ellipsis,
                fontSize: 30,
                color: Colors.white,
                fontWeight: FontWeight.bold)),
        maxLines: 1,
        textAlign: TextAlign.left,
        textDirection: TextDirection.ltr);

Y se muestra así:

introducir la descripción de la imagen aquí

Busque el unicode de los símbolos aqui: https://unicode-table.com/en/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.