title: Flutter JSON duplicate index
body: <p>I have a list of users that I am reading from JSON.</p>
  
  <p>This is the JSON file:</p>
  
  <pre><code>{
  "Dependents": [
      {
        "Name": "Kim",
        "Relationship": "Parent"
      },
      {
        "Name": "Tim",
        "Relationship": "Spouse"
      }
    ]
  }
  </code></pre>
  
  <p>This is the model class:</p>
  
  <p><strong>new_fifth_model.dart</strong></p>
  
  <pre><code>class NewFifthModel {
  
    String name;
    String relationship;
  
    NewFifthModel(this.name, this.relationship);
  }
  </code></pre>
  
  <p>And this is the class to bring out the users in a list.</p>
  
  <p><strong>NewFifth.dart</strong></p>
  
  <pre><code>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&lt;List&lt;NewFifthModel&gt;&gt; fetchUserInfo() async{
  
    var response = await http.get(url, headers: {"Accept": "application/json"});
  
    List data = json.decode(response.body)["Dependents"];
    var fifthmodel = &lt;NewFifthModel&gt;[];
    data.forEach((f) =&gt; fifthmodel.add(new NewFifthModel(f["Name"], f["Relationship"])));
  
    print(fifthmodel);
  
    return fifthmodel;
  }
  
  class NewFifth extends StatefulWidget {
    @override
    _FifthState createState() =&gt; _FifthState();
  }
  
  class _FifthState extends State&lt;NewFifth&gt; {
  
    List&lt;NewFifthModel&gt; 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(),
      );
    }
  }
  </code></pre>
  
  <p>This is the output on the screen.</p>
  
  <p><a href="https://i.stack.imgur.com/gozGw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gozGw.png" alt="Duplicate Index number"></a></p>
  
  <p>The problem I am having (as you can see in the picture) is that the index number I put in the trailing part of the ListTile is duplicating and I really need the index number in order to proceed.</p>
  
  <p>How do I rectify this problem?</p>
  
  <p>Any help is very much appreciated.</p>