Saltar al contenido

Envolver texto dentro de un círculo (Flutter)

Te sugerimos que revises esta respuesta en un ambiente controlado antes de enviarlo a producción, un saludo.

Solución:

A partir de ahora (julio de 2019), Flutter no admite directamente el diseño de texto en formas no rectangulares.

Usando la API existente, debería ser posible lograr un efecto personalizado similar al implementar algo que realice los siguientes pasos:

  • Crea una columna.
  • Diseño de texto de una sola línea con el ancho del círculo en la línea 1
  • Obtenga el índice de caracteres del último carácter dispuesto (usando getBoxesForRange y getPositionForOffset)
  • Trunca el frente del texto que deseas distribuir en el índice para obtener el texto restante.
  • Diseñe el texto restante como un texto de una sola línea con el ancho del círculo en la línea 2. La posición y en la línea 2 se puede obtener sumando la altura de la línea 1.
  • Repita hasta que no se llene más texto o círculo. Coloque todo el texto dentro de la columna centrado.

Eso debería poder conseguirte algo parecido. La implementación tendrá que manejar todos los cálculos de los anchos del círculo en cada posición y, así como posicionar manualmente cada línea de texto.

Puntuaciones y comentarios

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



Utiliza Nuestro Buscador

Deja una respuesta

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