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.

ListView.builder no se superpone en Stack en Flutter

28 Jul, 2023 Programación

He estado utilizando ListView.builder en Stack. Pero los contenedores redondeados no se superponen entre sí. ¿Cómo puedo superponerlos? He adjuntado el código y la captura de pantalla de la salida también.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Emniii extends StatelessWidget {
  const Emniii({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 30,
        width: MediaQuery.of(context).size.width,
        margin: EdgeInsets.only(top: 10),
        child: Center(
          child: Stack(
            children: [
              ListView.builder(
                  itemCount: 13,
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (_, index) {
                    return Container(
                      height: 30,
                      width: 30,
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(15),
                      ),
                    );
                  }),
            ],
          ),
        ),
      ),
    );
  }
}

Salida actual

enter image description here

Lo que espero

enter image description here

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puedes lograr el efecto de superposición deseado utilizando el widget Positioned dentro del Stack para cada elemento individual de ListView.builder. Aquí está el código modificado:

    import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Emniii extends StatelessWidget {
  const Emniii({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 30,
        width: MediaQuery.of(context).size.width,
        margin: EdgeInsets.only(top: 10),
        child: Center(
          child: Stack(
            children: List.generate(
              13,
              (index) => Positioned(
                left: 15 * index.toDouble(),
                child: Container(
                  height: 30,
                  width: 30,
                  decoration: BoxDecoration(
                    color: Colors.black,
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

    Aquí, reemplazamos el ListView.builder con un método List.generate que creará contenedores Positioned para cada elemento, establecerá sus posiciones con la propiedad left y luego devolverá una List de estos contenedores para mostrarlos dentro del Stack.

    Esto nos dará el efecto de superposición deseado como se muestra en la segunda imagen.

Comments are closed.