30
votes

Comment afficher l'icône dans le widget texte en flutter?

Je souhaite afficher une icône dans le widget de texte. Comment puis-je faire cela ?

Le code suivant montre uniquement IconData

Text("Click ${Icons.add} to add");

flutter

0 commentaires

7 Réponses :

11
votes

Row Widget peut être une solution à ce problème, mais vous devez utiliser différents widgets pour y arriver.

Suivez l'exemple ci-dessous.

Row(
   children: <Widget>[
     Text("Hi"),
     Icon(Icons.add),
     Text("Hello")
   ]
 )

3 commentaires

Cela peut être valable pour le cas spécifique de cet utilisateur car le texte est très court. Mais gardez à l'esprit que cela ne fonctionnera pas correctement si vous devez placer des icônes dans des paragraphes plus longs.

je vote la réponse. mais ne pas l'accepter en raison d'un problème soulevé par @GaboBrandX

De plus, les icônes ne seront pas alignées horizontalement avec le texte

12
votes

Une alternative pourrait être d'utiliser des emoji.

Dans Dart, les chaînes prennent en charge les séquences d'échappement pour les caractères spéciaux. Pour les emoji Unicode, vous pouvez utiliser \ u et des accolades avec un code hexadécimal emoji à l'intérieur. Comme ça:

Text('Click \u{2795} to add')

Le résultat est:

Vous pouvez trouver une liste complète des emojis Unicode ici: http://unicode.org/Public/emoji/1.0/emoji-data.txt

0 commentaires

0
votes

Vous pouvez utiliser ce package pour y parvenir.

Je n'arrive pas à trouver la pub de ce package.

Voici la mise en œuvre.

    RealRichText(
      [
        TextSpan(
          text: "A Text Link",
          style: TextStyle(color: Colors.red, fontSize: 14),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              debugPrint("Link Clicked.");
            },
        ),
        ImageSpan(
          AssetImage("packages/real_rich_text/images/emoji_9.png"),
          imageWidth: 24,
          imageHeight: 24,
        ),
        ImageSpan(AssetImage("packages/real_rich_text/images/emoji_10.png"),
            imageWidth: 24,
            imageHeight: 24,
            margin: EdgeInsets.symmetric(horizontal: 10)),
        TextSpan(
          text: "å“ˆå“ˆå“ˆ",
          style: TextStyle(color: Colors.yellow, fontSize: 14),
        ),
        TextSpan(
          text: "@Somebody",
          style: TextStyle(
              color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              debugPrint("Link Clicked");
            },
        ),
        TextSpan(
          text: " #RealRichText# ",
          style: TextStyle(color: Colors.blue, fontSize: 14),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              debugPrint("Link Clicked");
            },
        ),
        TextSpan(
          text: "showing a bigger image",
          style: TextStyle(color: Colors.black, fontSize: 14),
        ),
        ImageSpan(AssetImage("packages/real_rich_text/images/emoji_10.png"),
            imageWidth: 24,
            imageHeight: 24,
            margin: EdgeInsets.symmetric(horizontal: 5)),
        TextSpan(
          text: "and seems working perfectâ€¦â€¦",
          style: TextStyle(color: Colors.black, fontSize: 14),
        ),
      ],
    );

Vous pouvez également consulter le problème ci-dessous pour en savoir plus:

Numéro Flutter # 2022

0 commentaires

72
votes

Flutter a WidgetSpan() pour ajouter un widget à l'intérieur du RichText() .

Exemple d'utilisation:

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: "Click ",
      ),
      WidgetSpan(
        child: Icon(Icons.add, size: 14),
      ),
      TextSpan(
        text: " to add",
      ),
    ],
  ),
)

Le code ci-dessus produira:

Vous pouvez traiter l'enfant de WidgetSpan comme le widget habituel.

2 commentaires

J'ai essayé ça mais ça ne marche pas. Je vois juste l'icône sans le texte. PS j'ai ajouté ce widget dans une colonne.

Spécifiez un style par défaut et donnez une color au texte, sinon il pourrait être rendu et ne pas être visible.

0
votes

Vous pouvez utiliser WidgetSpan () sur Text.rich (). Voici un lien pour InlineSpan-class.

0 commentaires

1
votes

Une autre option est String.fromCharCode(int charCode)

Ceci est icons.dart créé par l'équipe de flutter et les charCodes se trouvent ici.

RichText(
  text: TextSpan(
  style: TextStyle(
    color: Colors.black,
    fontSize: 24.0,
  ),
  text: 'This is alarm icon : ',
    children: <TextSpan>[
      TextSpan(
        text: String.fromCharCode(0xe190), //<-- charCode
        style: TextStyle(
        fontFamily: 'MaterialIcons', //<-- fontFamily
        fontSize: 24.0,
        color: Colors.red,
       ),
     )
   ],
  ),
)

Et résultat:

0 commentaires

3
votes

Essayez Wrap :

Wrap(
  crossAxisAlignment: WrapCrossAlignment.center,
  children: [
    Text('Click'),
    Icon(Icons.add),
    Text('to add'),
  ],
)

0 commentaires