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:
(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:
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.