(Флаттер) Отображение данных списка в разных группах в пользовательском интерфейсе

Допустим, список называется itemList

Для начала нам нужен список по количеству групп. Так как номер группы повторяется в itemList, его использование напрямую для создания карточек для каждой группы не будет работать. Таким образом, мы можем добавить все groupNo из itemList в Set (поскольку набор удалит все повторяющиеся значения).

Сначала мы объявляем Set

Set groupSet = Set();

После этого мы создаем функцию readGroup(), которая будет объявлена в initState

readGroup() {
  setState((){  
   itemList.forEach((item){
     groupSet.add(item.groupNo);
     });
    });
   }

Теперь мы будем использовать ListView.builder для создания карточки для каждой группы. Внутри компоновщика мы будем использовать цикл for для заполнения элементов каждой группы в их соответствующих карточках.

Примечание. Мы не используем номер группы из Set, поскольку порядок элементов в Set не гарантируется. Таким образом, вместо этого мы используем index + 1.

ListView.builder(
 itemCount: groupSet.length,
 itemBuilder: (context, index) {
   return Column( children:<Widget>[
   Text("Group "+ (index + 1).toString()),
    SizedBox(height:10),
     Row(children: <Widget>[
      for(item in List) if(item.groupNo = index + 1)  
       Text(item.sales)
       ]);
      ]);
     }
   );