3D ListView en Flutter

(23 de septiembre de 2020)

ListWheelScrollView

ListWheelScrollView es un widget de flutter que se utiliza para crear ListView con 3D- efecto. Este widget es similar a ListView pero ListWheelScrollView agrega sus elementos secundarios en una rueda desplazable. Eso da como resultado un efecto 3D como si los niños estuvieran girando en una rueda.

Uso básico
Hay dos parámetros obligatorios:
children ( List ) y itemExtent ( double ). Los elementos secundarios que son el elemento de la lista se pasan a un delegado y se construyen perezosamente durante el diseño. La propiedad itemExtent se usa para establecer el tamaño de cada elemento en el eje principal.

ListWheelScrollView(
itemExtent: 50,
children: List.generate(1000, (index) => index)
.map(
(text) => Container(
margin: EdgeInsets.only(left: 20, right: 20),
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
child: Center(child: Text(text.toString())),
),
)
.toList(),
),

diameterRatio

Es la relación entre el diámetro del cilindro y el tamaño de la ventana de renderizado del eje principal, la el valor predeterminado es 2 . Si es vertical, el tamaño de la ventana de representación del eje principal es la altura de ListWheelScrollView. Cuanto menor sea la relación de diámetro, más redondo será el cilindro.

diameterRatio: 1

offAxisFraction

Indica el grado de desviación horizontal de la rueda del centro.

offAxisFraction: -1.5

Veamos el efecto de esta propiedad

lupa

useMagnifier : Ampliación para el centro (seleccionado actualmente)
magnification: Establece el tamaño ampliado (valor de ampliación)

Utilice useMagnifier con magnification para lograr un efecto de lupa .

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier y ampliación

onSelectedItemChanged

El elemento seleccionado es el que se encuentra actualmente en el centro de la rueda. Se cambia cada vez que el usuario se desplaza hacia arriba o hacia abajo. Para obtener el índice del elemento seleccionado, puede pasar una función de devolución de llamada como propiedad onSelectedItemChanged. Es de tipo, que acepta un parámetro entero.

onSelectedItemChanged: (index) => {
print(index)
},

useDelegate

Hay otra forma de crear un ListWheelScrollView usando .useDelegate() constructor con nombre. de pasar children, necesita pasar un ListWheelChildDelegate para construir los hijos.

ListWheelScrollView.useDelegate(
itemExtent: 50,
childDelegate: ListWheelChildBuilderDelegate(
builder: (context, index) {
return Container(
margin: EdgeInsets.only(left: 20, right: 20),
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
alignment: Alignment.center,
child: Text("$index"),
);
},
childCount: 1000),
),

Busque la documentación oficial de ListWheelScrollView aquí para explorar más propiedades.

Si encuentra útil este artículo, aplauda.

Deja una respuesta

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