Carrousel vs Swiper

Aunque ambas librerías son muy similares y quizás en la mayoría de casos flutter_swiper es suficiente, aquí presento este caso particular donde éste último no logra cumplir con los requerimientos de la UI.

Diseño

Primero expliquemos un poco la UI por lo cual descarté a Swiper. Es una vista con 2 carruseles. Este proyecto en otras vistas ya utilizaba flutter_swiper por esto se decidió mantener esta librería.

El carrusel azul no muestra los ítems vecinos, adicionalmente tiene desactivado el swipe. El carrusel verde muestra una parte de sus vecinos y tiene activado el swipe. Ambos carruseles deben cambiar en el mismo sentido la misma cantidad de ítems, los chevrones(flechas) a los costados del swiper azul avanzan o retroceden las posiciones y de la misma manera el swiper verde debe avanzar o retroceder ambos carruseles.

Dificultades con Swiper

Los carruseles separados funcionan perfectos y usando un solo controlador es posible coordinar ambos carruseles, la dificultad viene cuando se realiza el swipe en el carrusel verde, pues la propiedad onIndexChanged presenta un comportamiento extraño y se llama 2 veces, la primera para el índice al que se dirige y la segunda con el índice desde donde parte. Lo cual impide ejecutar la lógica adecuadamente, con esto fue suficiente para que la UI no se pudiera realizar de la manera deseada usando el Swiper.

Carousel al rescate

Resignado por no poder realizar la UI a gusto, recordé que en proyectos anteriores había usado carousel_slider, a primera instancia se ven muy similares sus posibilidades.

Ambos tienen un builder similar, algunas opciones se mantienen pero están ubicadas en diferente lugar. Pero las 2 grandes diferencias son el onTap y el onIndexChange vs el onPageChanged.

• Carousel no tiene un onTap, dejando esta tarea al child widget.
• onIndexChange (Swiper) y onPageChanged(Carousel): cumplen la misma función de decirnos cuando ha cambiado de posición la vista, en Carousel nos dan un parámetro extra que hace el mundo diferente y se llama reason, éste es un enum con 3 alternativas:
• timed: Cuando tiene el autoPlay activo y timed, éste cambia la posición.
• manual: Cuando el usuario hace un swipe en la pantalla cambiando la posición.
• controller: Cuando por medio del controller se cambia la posición en un llamado del código.

Estos hacen la diferencia, ya que el Swiper al no saber la fuente del cambio entra en un ciclo infinito de avanzar o retroceder.

No todo es color rosa con Carousel ya que su principal desventaja es no poder funcionar con un solo controller.

Conclusión

La conclusión, aunque es una opinión personal, carousel_slider provee una mejor interfaz para entender qué está pasando con el slider, lo cual ayuda mucho a la hora de hacer UIs un poco más complejas.

Librerías

• flutter_swiper: https://pub.dev/packages/flutter_swiper
• carousel_slider: https://pub.dev/packages/carousel_slider