0

Estoy haciendo una lista de tareas (TODO) muy sencilla y quiero dividirla en dos grupos> las tareas pendientes arriba y las tareas completadas abajo marcando un título que las separe claramente.

Para este efecto generé dos listas (_pendientesList y _completasList) y a cada una le puse un ListView.builder, sin embargo al desplegar el Column se observa un primer Scroll de _completasList, después el Texto de "Completas" y después un segundo Scroll de _pendientesList. Lo que quisiera lograr es que los tres componentes hagan parte de un mismo Scroll.

El código para generar el listado desde un StreamBuilder es el siguiente:

Widget _crearListado(BuildContext context, AlarmaBloc alarmaBloc) {

    final _size = MediaQuery.of(context).size;
    List<AlarmaModel> _completasList = new List();
    List<AlarmaModel> _pendientesList = new List();

    return Column(
      children: <Widget>[
        Container(
          height: _size.height * 0.5,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 70.0/2, left: 10.0, right: 10.0, top:0.0), //fondo gris del listado. Bottom
            child: StreamBuilder(
                stream: alarmaBloc.alarmasStream,
                builder: (BuildContext context, AsyncSnapshot<List<AlarmaModel>> snapshot){
                  if (snapshot.hasData) {
                    final tareasList = snapshot.data;
                    if (tareasList.length == 0) return _imagenInicial(context);
                    tareasList.sort((a, b) => a.fechaVencimiento.compareTo(b.fechaVencimiento));
                    _completasList = tareasList.where((element) => element.completa==true).toList();
                    _pendientesList = tareasList.where((element) => element.completa==false).toList();


                    return Column(
                      children: <Widget>[
                        Expanded(


                          child: ListView.builder(
                              itemCount: _pendientesList.length,
                              itemBuilder: (context, i) =>_crearItem(context, alarmaBloc, _pendientesList[i]),
                              padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0, bottom: 20.0),
                            ),
                        ),
                        SizedBox(height: 10.0,),

                        Text('Completas  '),

                        Expanded(


                          child: ListView.builder(
                              itemCount: _completasList.length,
                              itemBuilder: (context, i) =>_crearItem(context, alarmaBloc, _completasList[i]),
                              padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0, bottom: 20.0),
                            ),
                        ),
                      ],
                    );
                  } else if (snapshot.hasError) {
                    return Text(snapshot.error.toString());
                  } 
                    return Center (child: Image(image: AssetImage('Preloader.gif'), height: 200.0,));
                },
            ),
          ),
        ),
      ],
    );
  } 

Intenté envolver el Column en un SingleChildScrollView, pero no funcionó.

Cómo puedo tener los dos ListView.builder y el texto (o botón en el futuro) dentro del mismo Scroll?

1 respuesta 1

2

Lo puedes hacer de varias formas, con slivers o también sin, te pongo el ejemplo sin slivers:


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            ListView.builder(
              itemCount: 10,
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemExtent: 100,
              itemBuilder: (_, index) => Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  color: Colors.red,
                  child: FittedBox(
                    child: Text(
                      index.toString(),
                    ),
                  ),
                ),
              ),
            ),
            Text('Completas', style: Theme.of(context).textTheme.headline4,),
            ListView.builder(
              itemCount: 10,
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemExtent: 100,
              itemBuilder: (_, index) => Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  color: Colors.blue,
                  child: FittedBox(
                    child: Text(
                      index.toString(),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

La idea principal es usar un Column con un SingleChildScrollView para que haga scroll, luego 2 listas dentro con shrinkWrap: true, luego le cambias la física a NeverScrollableScrollPhysics. Es todo.

Resultado

introducir la descripción de la imagen aquí

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.