Saltar al contenido principal

Desplazamiento

Visión general del soporte de desplazamiento de Flutter

Flutter tiene muchos widgets integrados que se desplazan automáticamente y también ofrece una variedad de widgets que puedes personalizar para crear comportamientos de desplazamiento específicos.

Desplazamiento básico

#

Muchos widgets de Flutter admiten desplazamiento de forma predeterminada y hacen la mayor parte del trabajo por ti. Por ejemplo, SingleChildScrollView desplaza automáticamente a su hijo cuando es necesario. Otros widgets útiles incluyen ListView y GridView. Puedes consultar más de estos widgets en la página de desplazamiento del catálogo de Widgets.

Ver en YouTube en una nueva pestaña: "Scrollbar | Flutter widget of the week"

Ver en YouTube en una nueva pestaña: "ListView | Flutter widget of the week"

Desplazamiento infinito

#

Cuando tienes una lista larga de elementos en tu ListView o GridView (incluyendo una lista infinita), puedes construir los elementos bajo demanda a medida que se desplazan en pantalla. Esto proporciona una experiencia de desplazamiento mucho más eficiente. Para obtener más información, consulta ListView.builder o GridView.builder.

Widgets desplazables especializados

#

Los siguientes widgets proporcionan comportamientos de desplazamiento más específicos.

Un video sobre cómo usar DraggableScrollableSheet:

Ver en YouTube en una nueva pestaña: "DraggableScrollableSheet | Flutter widget of the week"

¡Convierte el área desplazable en una rueda con ListWheelScrollView!

Ver en YouTube en una nueva pestaña: "ListWheelScrollView | Flutter widget of the week"

Desplazamiento avanzado

#

Tal vez quieras implementar desplazamiento elástico, también llamado rebote de desplazamiento (scroll bouncing). O tal vez quieras implementar otros efectos de desplazamiento dinámicos, como el desplazamiento paralaje. O tal vez quieras un encabezado desplazable con un comportamiento muy específico, como reducirse o desaparecer.

Puedes lograr todo esto y más utilizando las clases Sliver* de Flutter. Un sliver se refiere a una porción del área desplazable. Puedes definir e insertar un sliver en un CustomScrollView para tener un control más preciso sobre esa área.

Para obtener más información, consulta Uso de slivers para lograr un desplazamiento avanzado y las clases Sliver.

Widgets de desplazamiento anidados

#

¿Cómo anidas un widget desplazable dentro de otro widget desplazable sin perjudicar el rendimiento del desplazamiento? ¿Estableces la propiedad ShrinkWrap en true, o usas un sliver?

Mira el video "ShrinkWrap vs Slivers":

Ver en YouTube en una nueva pestaña: "ShrinkWrap vs Slivers | Decoding Flutter"