Flutter : How to Map values dynmically into list and iterate to its length and how can i do Update a-CodePudding

I am trying to build json expected output as below through dart programing for my application, I have mapped data to list successfully. But when I trying to delete / add the list, the elements in the list are not getting updated accordingly instead they are hgetting reapeted same data.

Here is my code implimentation

in this code i will get contact details [this code will display selected contacts in UI]

Flexible(
                  fit: FlexFit.loose,
                  child: ListView.builder(
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: selectedContacts.length,
                    itemBuilder: (BuildContext context, int index) {
                      SimplifiedContact? contact =
                          selectedContacts.elementAt(index);

                      CreateContestModel(
                        contact.phone, // <------ These are contact details
                        contact.name,
                        contact.email,
                      );

                      
                      return Column(
                        children: [
                          ListTile(
                            contentPadding: const EdgeInsets.symmetric(
                              vertical: 2,
                              horizontal: 18,
                            ),
                            title: Text(contact.name),
                          ),
                        ],
                      );
                    },
                  ),
                ),

in below code i am, mapping data and building json

class CreateContestModel {

  static List models = [];

  String phone = '';
  String name = '';
  String email;

   CreateContestModel(this.phone, this.name, this.email) {
      var invitemap = {
      'name': name,
      'phone': phone,
      'email': email,
    };

    models.add(invitemap);
    print(models);
   }

}

Output

{
   "invitations":[
      {
         "name":"Acevedo Castro",
         "phone":982-475-2009,
         "email":"[email protected]"
      },
      {
         "name":"Acevedo Castro",
         "phone":982-475-2009,
         "email":"[email protected]"
      },
      {
         "name":"Abby Webster",
         "phone":888-561-2141,
         "email":"[email protected]"
      },
      {
         "name":"Abby Webster",
         "phone":888-561-2141,
         "email":"[email protected]"
      },
      {
         "name":"Abby Webster",
         "phone":888-561-2141,
         "email":"[email protected]"
      }
   ]
}

As you see above items are not getting updated, but they are getting added more.

Expected Output

{
   "invitations":[
      {
         "name":"Acevedo Castro",
         "phone":"982-475-2009",
         "email":"[email protected]"
      },
      {
         "name":"Abby Webster",
         "phone":"888-561-2141",
         "email":"[email protected]"
      }
   ]
}

CodePudding user response：

That is some seriously flawed program flow. Your object creation as a side effect at the same time fills a static list. And it seems you call your object creation every build. So you would insert into your list whenver the user flips it's phone or drags his browser window.

I'm not entirely sure what you want, but you need state management in your application. There are different ways to do it, you can pick the one you like best from the Flutter documentation on state management.

CodePudding user response：

This is a huge flow issue, You should never do data manipulation in build() function as in flutter build function is called multiple times so the manipulation code will also get called multiple times.

So, the proper way to manipulate data is before the data is being used so make sure that the data is only manipulated in initstate(). In Your case you are also doing something which is not required. You are trying to add data to a list via a constructor to a static list so it will always add the data whenever you call it, This is not a proper way.

class CreateContestModel {
  late String phone = '';
  late String name = '';
  late String email;

  CreateContestModel.fromMap(Map<String, String> json) {
    phone = json['phone'] ?? '';
    phone = json['name'] ?? '';
    phone = json['email'] ?? '';
  }
}

This is how you should create your class. And always create functions for manipulation if possible.

  List<CreateContestModel> createContestModelList =
      testData['invitations']!.map(
    (data) {
      return CreateContestModel.fromMap(data);
    },
  ).toList();

Then use this code to construct your list in initstate() and manipulate this having a static variable in your stateful widget. Make Sure you do not construct the data on build() function.

Need More Help?? here's the Gist link