Двойной индекс флаттера JSON

Question

У меня есть список пользователей, которые я читаю из JSON.

Это файл JSON:

{
"Dependents": [
    {
      "Name": "Kim",
      "Relationship": "Parent"
    },
    {
      "Name": "Tim",
      "Relationship": "Spouse"
    }
  ]
}

Это класс модели:

new_fifth_model.dart

class NewFifthModel {

  String name;
  String relationship;

  NewFifthModel(this.name, this.relationship);
}

И это класс для вывода пользователей в список.

NewFifth.dart

import 'package:flutter/material.dart';
import 'package:emas_app/model/new_fifth_model.dart';
import 'dart:convert';
import 'dart:async' show Future;
import 'package:http/http.dart' as http;

final String url = "http://crm.emastpa.com.my/MemberInfo.json";
final int page = 5;

//Future to get list of dependent names
Future<List<NewFifthModel>> fetchUserInfo() async{

  var response = await http.get(url, headers: {"Accept": "application/json"});

  List data = json.decode(response.body)["Dependents"];
  var fifthmodel = <NewFifthModel>[];
  data.forEach((f) => fifthmodel.add(new NewFifthModel(f["Name"], f["Relationship"])));

  print(fifthmodel);

  return fifthmodel;
}

class NewFifth extends StatefulWidget {
  @override
  _FifthState createState() => _FifthState();
}

class _FifthState extends State<NewFifth> {

  List<NewFifthModel> fifthList;

  @override
  void initState() {
    super.initState();
    if (fifthList == null) {
      fetchUserInfo().then((data) {
        this.setState(() {
          fifthList = data;
        });
      });
    }
  }

  @override
  Widget build(BuildContext context) {

    //body widget
    Widget _createBody() {

      if(fifthList == null){
        return new Center(
          child: new CircularProgressIndicator(),
        );
      }

      else{
        return new ListView.builder(
            shrinkWrap: true,
            itemCount: fifthList.length,
            itemBuilder: (context, index){
              return new Column(
                children: fifthList.map((f){
                   return new Card(
                    child: new ListTile(
                      title: new Text(f.name),
                      subtitle: new Text(f.relationship),
                      trailing: new Text(index.toString()),
                      onTap: (){
                        makeDialog(index.toString());
                      },
                    ),
                  );
                }).toList(),
              );
            });
      }
    }

    return new Scaffold(
      body: _createBody(),
    );
  }
}

Это вывод на экран.

Проблема, с которой я столкнулся (как вы можете видеть на рисунке), заключается в том, чтоиндексный номер, который я вставил в завершающую часть ListTile, дублируется, и мне действительно нужен индексный номер для продолжения.

Как устранить эту проблему?

Любая помощь оченьоценили.

Answer 1

Похоже, у вас есть только 2 элемента в объекте JSON, но вы показываете 4.

Я думаю, что вы хотели показать только 2?Если это так, в вашей функции itemBuilder вы должны сделать следующее:

return new ListView.builder(
    shrinkWrap: true,
    itemCount: fifthList.length,
    itemBuilder: (context, index) {
      var f = fifthList[index];
      return new Card(
        child: new ListTile(
          title: new Text(f.name),
          subtitle: new Text(f.relationship),
          trailing: new Text(index.toString()),
          onTap: () {
            makeDialog(index.toString());
          },
        ),
      );
    });

Вы использовали .map(), который снова просматривал список для каждого элемента.У вас было 2 предмета, поэтому вы получили 4. Если бы у вас было 3, на нем было бы 6 предметов и т. Д.

Answer 2

вы создаете 2 списка здесь, вы воссоздаете Column со всем списком внутри сборки элемента, ListView.builder уже позаботился об итерации по вашему списку с использованием itemCount.

itemBuilder: (context, index) {
          final f = fifthList[index];
          return Card(
                child: new ListTile(
                  title: new Text(f.name),
                  subtitle: new Text(f.relationship),
                  trailing: new Text(index.toString()),
                  onTap: (){
                    makeDialog(index.toString());
                  },
                ),
              );
}