Joining two ListViews into one in flutter

Question

I have to list items in my flutter project and I need them to be viewed one after another using 2 ListView, here is more details :

lists

  List<List<theLineModel.Line>> moreThenOneLineList = [];
  List<Station> mutualStationsList = [];
  List<theLineModel.Line> oneLineList = [];

The Widget

                           child: Column(
                                  children: <Widget>[
                                    Expanded(
                                      child: ListView(
                                        children: oneLineList.map((line) {
                                          return GestureDetector(
                                            onTap: () {
                                              Navigator.pushNamed(
                                                  context, '/line_details',
                                                  arguments: {
                                                    'line': line,
                                                    'oneLine': true,
                                                  });
                                            },
                                            child: Card(
                                              color: Colors.deepPurple,
                                              elevation: 8,
                                              child: Padding(
                                                padding:
                                                const EdgeInsets.all(8.0),
                                                child: Column(
                                                  children: <Widget>[
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceEvenly,
                                                      children: <Widget>[
                                                        Text(
                                                          "${line
                                                              .transportationType}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${line.startStation
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Icon(
                                                          Icons.arrow_downward,
                                                          color: Colors.white,
                                                          size: 30,
                                                        )
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${line.endStation
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                      children: <Widget>[
                                                        Text(
                                                          "${line.price} ${S
                                                              .of(context)
                                                              .le}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                        Text(
                                                          "${line.notes}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ),
                                          );
                                        }).toList(),
                                      ),
                                    ),
                                    Expanded(
                                      child: ListView(
                                        children: moreThenOneLineList
                                            .map((lineList) {
                                          return GestureDetector(
                                            onTap: () {},
                                            child: Card(
                                              color: Colors.blueAccent,
                                              elevation: 8,
                                              child: Padding(
                                                padding:
                                                const EdgeInsets.all(8.0),
                                                child: Column(
                                                  children: <Widget>[
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceEvenly,
                                                      children: <Widget>[
                                                        Text(
                                                          "${lineList[0]
                                                              .transportationType}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${chosenStations[0]
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Icon(
                                                          Icons.arrow_downward,
                                                          color: Colors.white,
                                                          size: 30,
                                                        )
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${mutualStationsList[moreThenOneLineList
                                                              .indexOf(
                                                              lineList)]
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                      children: <Widget>[
                                                        Text(
                                                          "${lineList[0]
                                                              .price} ${S
                                                              .of(context)
                                                              .le}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                        Text(
                                                          "${lineList[0]
                                                              .notes}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Icon(
                                                      Icons.arrow_downward,
                                                      color: Colors.white,
                                                      size: 30,
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceEvenly,
                                                      children: <Widget>[
                                                        Text(
                                                          "${lineList[1]
                                                              .transportationType}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${mutualStationsList[moreThenOneLineList
                                                              .indexOf(
                                                              lineList)]
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Icon(
                                                          Icons.arrow_downward,
                                                          color: Colors.white,
                                                          size: 30,
                                                        )
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${chosenStations[1]
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                      children: <Widget>[
                                                        Text(
                                                          "${lineList[1]
                                                              .price} ${S
                                                              .of(context)
                                                              .le}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                        Text(
                                                          "${lineList[1]
                                                              .notes}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),

                                                  ],
                                                ),
                                              ),
                                            ),
                                          );
                                        }).toList(),
                                      ),
                                    ),
                                  ],
                                ),

And then as both lists have been added to a different ListView so it caused space and bad looking page at the end, check the image.

So, any idea how to add both lists to a single Listview?

Answer 1

You can join two Lists into a single ListView as follow:

  Scaffold(
        body: Column(
          children: <Widget>[
            Expanded(
              child: ListView(
                children: list1//list1 is a dummy list of String I created for demonstration
                    .map(
                      (listElement) => Text(//return your own widget instead of this
                        listElement,
                        style:
                            TextStyle(fontSize: 40, color: Colors.cyanAccent),
                      ),
                    )
                    .toList()
                      ..addAll(
                        list2.map(//list2 also is a dummy list of String I created for demonstration
                          (listElement) => Text(//return your own widget instead of this
                            listElement,
                            style: TextStyle(
                                fontSize: 40, color: Colors.cyanAccent),
                          ),
                        ),
                      ),
              ),
            ),
          ],
        ),
      ),