Texto expandible / Descripción expandible / Ver más-Ver menos Cuadro de animación en Flutter
¿Cómo hacer un Contenedor Expandible / Descripción Expandible / Ver más-Ver menos Animation Box en Flutter?
¿Cómo hacer una animación de expansión (ver más / ver menos) en flutter?
Este artículo es una traducción de un artículo publicado originalmente en inglés por Akshit Ostwal en Medium. Por favor, visita el siguiente enlace y recomienda el artículo original si te gusta el contenido:
El rápido crecimiento de la digitalización ha allanado con éxito el camino a las tecnologías emergentes que permiten mejorar la experiencia de los usuarios. Nos encontramos en el vertiginoso ciclo de vida en el que los usuarios quieren todo a la velocidad super rápida, especialmente cuando se trata de acceder a las aplicaciones móviles.
Hagamos un widget como el siguiente:
Esta es una animación muy fácil y puede ser implementada usando el widget AnimatedCrossFade y setState()
Así que empecemos
Primero, hagamos un Contenedor Expansivo Animado que usaremos dentro del Texto Expansivo, controlamos la animación expansiva dentro de este contenedor
Puede usar este widget para tener cualquier widget en expansión, no solo texto
Toma 3 cosas como parámetro:
- unexpandedWidget ( Widget to show when the state is unexpanded )
- 2. expandedWidget ( Widget to show when the state is expanded )
- 3. isExpanded ( Boolean true if state is expanded & vice-versa )
Puedes ajustar firstCurve ysecondCurve a según tus necesidades aquí, personalmente me gusta experimentar con diferentes curvas con la animación.
Algunas de mis curvas favoritas son Curves.bounceInOut y Curves.easeInOutExpo
Segundo, vamos a crear un Widget de Texto Expandible que podemos usar en cualquier lugar
Necesitarás 3 parámetros:
1. Texto (la cadena de descripción)
2. maxLines (el número de líneas que quieres mostrar en estado expandido)
3. minLines (el número de líneas que quieres mostrar en estado no expandido)
Tercero, Ahora es el momento de juntar todas las piezas en main.dart
¡Y ahora hemos terminado!
Además, si te gusta este artículo y quieres más tutoriales como este, haz clic en Me gusta en este artículo y compártelo en todas tus redes sociales y no olvides etiquetarme allí también @akshitostwal
https://twitter.com/akshitostwal
