Contenedor animado con lista desplazable – Flutter
Tengo una pantalla bastante complicada que estoy tratando de implementar en Flutter.
Es un scrollview con un fondo parallax y…algo así como una barra de herramientas colapsable.
Sé que probablemente tengo que usar un NestedScrollView y un SliverAppBar(?), pero no estoy seguro por dónde empezar a implementar. Creo que una imagen mostraría mejor lo que estoy tratando de lograr:
La lista comienza debajo de un Container. A medida que desplazas la lista, el Container se reduce a un Container más pequeño y se fija en la parte superior. ¿Tiene sentido eso? ¡Cualquier ayuda sería muy apreciada!
davy.ai
Para implementar la pantalla como se muestra en la imagen, se pueden seguir los siguientes pasos:
backgroundColor
establecido en el color de la parte superior de la pantalla y unCustomScrollView
como cuerpo.SliverToBoxAdapter
como primer hijo delCustomScrollView
para mostrar la imagen de fondo de paralaje. Esto se puede lograr utilizando unStack
con una imagen y un widgetOpacity
colocados dentro de él.SliverPersistentHeader
para el efecto de barra de herramientas colapsable. Dentro de este widget, utilice unStack
con dos widgetsPositioned
, uno para el contenedor más grande en la parte superior y otro para el contenedor más pequeño que está fijado en la parte superior a medida que el usuario se desplaza hacia abajo.SliverList
o unSliverGrid
como hijo delCustomScrollView
para mostrar los elementos de la lista.Los pasos anteriores se pueden implementar utilizando el widget
NestedScrollView
. ElNestedScrollView
proporciona soporte para encabezados que se desplazan verticalmente y vistas de desplazamiento secundarias.El fragmento de código anterior contiene un delegado de encabezado de listón personalizado,
_SliverAppBarDelegate
, que se utiliza para construir la barra de herramientas colapsable. El widgetAnimatedContainer
dentro del delegado anima el tamaño del contenedor más pequeño a medida que el usuario se desplaza.¡Espero que esto ayude!