0

Tengo el siguiente código para generar el ListView:

Padding(
          padding: const EdgeInsets.only(top:30),
          child: RefreshIndicator(
            child: SizedBox(
              height:MediaQuery.of(context).size.height,
              child: model.state == ViewState.Busy ? const Center(child: CircularProgressIndicator()) : ListView.builder(
                  itemCount: model.farmerList.length,
                  itemBuilder: (_,index)
                  {
                    return  Padding(
(Interior del list view)

            
          ),
        )

y el Body es el siguiente:

 body: SingleChildScrollView(
          reverse: false,
          child: Column(
            children:  [
              Container(
                margin: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[

Como veis en el list view estoy usando MediaQuery, lo cual entiendo que me debería coger todo el espacio disponible, sin embargo, el list view se alarga hasta el infinito. Esto creo que sucede porque en el body tengo un SingleChildScrollView, sin embargo, al quitar esto último, obtengo un overflow de varios pixeles (según el tamaño de la lista), y no entiendo los motivos.

Sé que esto se ha preguntado muchas veces, pero no consigo dar con la solución aún mirando las respuestas, o es que no doy con lo que tengo que hacer exactamente.

4
  • quizás podrías agregar una imagen de lo que quieres lograr Commented el 16 ago. 2022 a las 14:49
  • @diegoveloper He agregado un esquema donde se ilustra mejor la pregunta.
    – xXNukem KS
    Commented el 16 ago. 2022 a las 15:00
  • podrías agregar ahora una imagen de como se muestra ahora, con el código que tienes? Commented el 16 ago. 2022 a las 15:06
  • @diegoveloper Ya la he añadido, a ver si así se entiende mejor
    – xXNukem KS
    Commented el 16 ago. 2022 a las 15:20

1 respuesta 1

1

He preparado un ejemplo en base a la estructura que mencionaste, no necesitas asignarle un alto al ListView, solamente deja que se expanda pero usando el parámetro shrinkWrap para que tome el mínimo tamaño disponible.

Código:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              color: Colors.black,
              alignment: Alignment.center,
              height: 100,
              child: const Text(
                'HEADER',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            Container(
              color: Colors.orange,
              alignment: Alignment.center,
              height: 100,
              child: const Text(
                'BOTONES',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            ListView.builder(
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              // es necesario esto para cancelar el scroll interno y usar el scroll global del SingleChildScrollView
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 15,
              itemBuilder: (context, index) {
                return ListTile(
                  tileColor: Colors.green,
                  title: Text('Title: $index'),
                );
              },
            ),
            Container(
              color: Colors.purple,
              alignment: Alignment.center,
              height: 100,
              child: const Text(
                'FOOTER',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Resultado:

introducir la descripción de la imagen aquí

Si deseas que el HEADER y FOOTER se queden estáticos y solo mover el ListView, necesitas estos cambios:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            color: Colors.black,
            alignment: Alignment.center,
            height: 100,
            child: const Text(
              'HEADER',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
          Container(
            color: Colors.orange,
            alignment: Alignment.center,
            height: 100,
            child: const Text(
              'BOTONES',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              itemCount: 15,
              itemBuilder: (context, index) {
                return ListTile(
                  tileColor: Colors.green,
                  title: Text('Title: $index'),
                );
              },
            ),
          ),
          Container(
            color: Colors.purple,
            alignment: Alignment.center,
            height: 100,
            child: const Text(
              'FOOTER',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }

Quitas el SingleChildScrollView ya que no necesitas que todo sea scrolleable, y usas el Expanded para expandir el ListView a todo el espacio disponible.

6
  • Muchas gracias por tu respuesta, Más o menos iria por ahí la cosa, solo que el header, los botones y el footer deberían quedarse quietos. Como podría hacer eso? Procediendo de la misma forma que has puesto?
    – xXNukem KS
    Commented el 16 ago. 2022 a las 15:33
  • ahí actualicé mi respuesta, si deseas aprender más : youtube.com/channel/UCFKZxStYsOVrzdN_FCZ0NGg/join Commented el 16 ago. 2022 a las 15:41
  • Sigo obteniendo un overflow: "The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type StackParentData." Creo que es relativo a como está hecha la parte del list view. Edito la pregunta con el código.
    – xXNukem KS
    Commented el 16 ago. 2022 a las 16:32
  • prueba el código que usé y trata de adaptarlo, recuerda que tu tienes un refreshindicator , yo use el expanded porque encima de ese widget tengo un Column, quizás tú no lo tienes, revisa bien Commented el 16 ago. 2022 a las 16:49
  • Sigue sin funcionarme, ni aún habiendo puesto encima un Column, trataré de seguir investigando...
    – xXNukem KS
    Commented el 17 ago. 2022 a las 8:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.