28 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 le IconData

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

70voto

dennbagas Points 823

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:

image

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

11voto

Viren V Varasadiya Points 3135

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")
   ]
 )

0voto

ibhavikmakwana Points 1020

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X