es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cubierta superpuesta en Flutter

31 May, 2023 Programación

Estaba intentando crear el diseño antiguo de Coverflow del iPhone utilizando Flutter. He intentado listview con alineación widthfactor. Pero sólo se superpone en una dirección.


Contenedor (
altura: 300,
niño: ListView.builder (
scrollDirection: Axis.horizontal,
itemCount: 25,
itemBuilder: (BuildContext contexto, int posición) => Alinear(
widthFactor: 0.8,
niño: Contenedor (
altura: 200,
ancho: 120,
color: Colors.green.withOpacity(0.4),
niño: Centro (niño: Texto(posición.toString())),
),
),
),
),

Necesito lograr el diseño de la imagen. ¿Cómo puedo hacer esto?

He intentado todos los paquetes disponibles que creo que son PreloadPageview, finite coverflow, simple coverflow, perspective pageview y así sucesivamente. Puedo obtener la transformación pero no la superposición en ambos lados y el desplazamiento horizontal al mismo tiempo.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el diseño deseado del antiguo Coverflow de iPhone utilizando Flutter, se puede utilizar el widget PageView combinado con el widget Transform.

    Aquí hay un ejemplo de fragmento de código que puede ayudar a lograr el diseño deseado:

    PageView.builder(
  itemCount: itemCount,
  controller: PageController(initialPage: 0, viewportFraction: 0.4),
  itemBuilder: (BuildContext context, int index) {
    return Transform(
      alignment: Alignment.center,
      transform: Matrix4.identity()..setEntry(3, 2, 0.001)..rotateY((index - position).abs() * 0.04),
      child: Container(
        margin: EdgeInsets.all(10),
        width: 150.0,
        height: 200.0,
        child: Center(child: Text(index.toString())),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10.0),
          image: DecorationImage(
            image: AssetImage('assets/images/placeholder.png'),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
)

    En el código anterior, itemCount representa el número total de elementos que se mostrarán y position representa la posición actual de la vista en la lista.

    El widget PageView se utiliza con un PageController que permite establecer la página inicial y la fracción de la vista que ocupa cada elemento. Luego, se utiliza el widget Transform para lograr el efecto de rotación y superposición de los elementos.

    Tenga en cuenta que deberá ajustar los valores de Matrix4 y TextEditingController para obtener el efecto deseado. Con esta implementación, debería poder lograr el desplazamiento horizontal y el efecto superpuesto en ambas direcciones como se ve en la imagen.

Comments are closed.