How to have two ListView.builder on the same scroll in flutter?

Question

I am building a very simple to-do list and I would like to divide it into two groups: the pending tasks above and the completed tasks below by marking a title that clearly separates them.

Then, I generated two lists (_pendientesList and _completasList) and I put a ListView.builder on each one, however when I display the Column a first Scroll of _completasList is observed, then the Text of "Complete" and then a second Scroll of _pendientesList. What I would like to achieve is that the three components are part of the same Scroll.

The code to generate the list from a StreamBuilder is the following:

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,));
                },
            ),
          ),
        ),
      ],
    );
  } 

I tried wrapping the Column in a SingleChildScrollView, but it didn't work.

How can I have both ListView.builder and the text (or button in the future) within the same Scroll?

Answer 1

Instead of two ListView.builder, you can do somewhat like this. The two are on the same scroll listview all the widgets pendient is above widgets completas.

ListView(
      children: [
        for (var itemPendiente in _pendientesList)
          _crearItem(context, alarmaBloc, itemPendiente),
        for (var itemCompletas in _completasList)
          _crearItem(context, alarmaBloc, itemCompletas),
      ],
    );