5
votes

Flutter: comment peindre une icône sur toile?

J'utilise un CustomPainter pour dessiner dans Flutter comme ceci:

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

Comment dessiner une Icon sur une canvas ?

flutter icons canvas custom-painting

3 commentaires

tu veux dire cette icône ? si oui, vous ne pouvez pas faire ça

Oui, je suis à propos de cette icône . Et c'est très étrange si c'est le cas (même si l'icône n'est en fait pas une image mais créée à partir d'une police TTF en interne).

c'est un TextSpan voir crossdart.info/p/flutter/0.0.38-dev/src/widgets/...

3 Réponses :

7
votes

Créez un Paragraph contenant le point de code dans la police correcte, stylisez-le selon vos besoins, puis dessinez-le.

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

0 commentaires

9
votes

@Richard Heap et @pskink sur la base de vos réponses, j'essayais et je suis venu avec ceci: Merci les gars, c'est ce que je cherchais moi aussi.

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

3 commentaires

existe-t-il un moyen d'ajouter un GestureDetector sur l'icône?

1) Si vous voulez dire le widget IconButton - Il a une fonction onPressed. 2) Si vous souhaitez ajouter le CustomPainter ci-dessus, ajoutez-le en tant qu'enfant à Container. Le parent de ce conteneur peut être un GeatureDetector ou InkWell.

Vous devez également transmettre la couleur à TextStyle. Sinon, vous ne verrez rien.

1
votes

Juste pour ajouter un petit détail important, si vous essayez de rendre une icône à partir d'un pack d'icônes externe (tel que Material Design Icons ou FontAwesome), vous devez ajouter le paramètre de package dans 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));

0 commentaires