Saltar al contenido

Flutter: ¿cómo agregar un ícono al texto?

Después de consultar expertos en la materia, programadores de varias áreas y maestros dimos con la respuesta al problema y la plasmamos en este post.

Solución:

Aquí hay dos enfoques, dependiendo exactamente de lo que quieras.

Texto enriquecido con WidgetSpan

Usando RichText puede mezclar TextSpans con WidgetSpans. WidgetSpan le permite colocar cualquier widget de Flutter en línea con el texto. Por ejemplo:

RichText(
  text: TextSpan(
    style: Theme.of(context).textTheme.body1,
    children: [
      TextSpan(text: 'Created with '),
      WidgetSpan(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 2.0),
          child: Icon(Icons.airport_shuttle),
        ),
      ),
      TextSpan(text: 'By Michael'),
    ],
  ),
)

dará lo siguiente:

ingrese la descripción de la imagen aquí

(MaterialIcons no incluye corazón)

Esta es una buena solución de propósito general, pero para su ejemplo específico hay algo más simple…

emoticonos

El texto de Flutter es compatible con Emoji desde el primer momento. Así que puedes hacer esto:

Center(
  child: Text(
    'Created with ❤ ️by Michael',
    maxLines: 1,
  ),
),

Y obtienes esto:

ingrese la descripción de la imagen aquí

También puede usar escapes Unicode en el string y obtener el mismo resultado:

'Created with u2764️ by Michael'

Con respecto a los emojis, en Android no todos los emojis son compatibles (según la versión del sistema operativo).

Para una compatibilidad total con emoji, puede usar la fuente gratuita de Google Noto Color Emoji en https://www.google.com/get/noto/#emoji-zsye-color

  • Agrégalo a la carpeta de fuentes.
  • agregar en pubspec.yaml
    fonts:
    - family: NotoEmoji
      fonts:
        - asset: fonts/NotoColorEmoji.ttf
          weight: 400
  • usar con TextStyle

    Text("", TextStyle(fontFamily: 'NotoEmoji'))

Eres capaz de añadir valor a nuestra información contribuyendo tu veteranía en las reseñas.

¡Haz clic para puntuar esta entrada!
(Votos: 1 Promedio: 1)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *