How can I make a list of multiple Cards with a headline in Flutter

Viewed 281

I'm trying to create a List of containers containing a Headline and multiple cards. It should look like this in the end: enter image description here

The Scaffold should contain a List of containers containing Rows of Cards and Text. I'm not sure if that's smart so if you have a recommendation how this could be done better... This is my code so far (without text "Text 1" segments):

body: ListView(
        children: getItems(snapshot),
      ),//getItems(snapshot),
    );
}

  getItems(AsyncSnapshot<List<html.Document>> snapshot) {
    List<Container> containers = [];
    for(int x = 0; x<snapshot.data!.length; x++) {
      containers.add(toRow(snapshot.data![x]));
    }
    return containers;
  }

  /*
  Build list of containers first in a Row -> cards....
   */
  toRow(html.Document document){
    return Row(
      children: listofcards(document),
    );
  }
  listofcards(html.Document document) {
    List<Card> cards = [];
    return FutureBuilder<List<tage>>(
      future: SiteParser().getData(document),
      builder: (BuildContext context, AsyncSnapshot<List<tage>> document) {
        for(int q = 0; q<document.data!.length; q++) {
          containers.add(_buildCard(document.data![q]));
        }
        return cards;
      },
    );

  }
  
  _buildCard(tage snap) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      color: MyThemes().choosecardcolor(snap),
      elevation: 5,
      //color: _chooseColor(snap.art.toString()),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(snap.stunde),
              Text(snap.klasse),
              Text(snap.raum)
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(snap.art),
              Text(snap.lehrer),
              Text(snap.mitteilung)
            ],
          )
        ],
      ),
    );

  }

At the moment I can't do that, because "The return type 'List' isn't a 'Widget', as required by the closure's context. ".

1 Answers

It was easier thanks to @ravindra-s-patil's recommendation to use group list view. Here is my code I've wrote.

  Widget buildrevresh(AsyncSnapshot<List<html.Document>> snapshot) {
    return RefreshIndicator(
      onRefresh: _refresh,
      child: buildData(snapshot),
    );
  }
  Widget buildData(AsyncSnapshot<List<html.Document>> snapshot) {
    List<List<tage>> days = [];
    for(int x = 0; x<snapshot.data!.length; x++) {
      days.add(SiteParser().getData(snapshot.data![x]));
    }
    return GroupListView(
      itemBuilder: (context, index) {
        return _buildCard(days[index.section][index.index]);
      },
      sectionsCount: days.length ,
      groupHeaderBuilder: (BuildContext context, int section) {
        return Text(
            days[section].first.datum,
            style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600));
      },
      countOfItemInSection: (int section) {
        return days[section].length;
      },
    );
  }
Related