jeudi 9 décembre 2021

How to get the values from CheckboxListTile together with TextField inputs for a model class

I have a form with Textfields, checkboxes and radio buttons. I am sending the data from the form to an api, I have a modal class called User and an APIService class. I am looking for a way to get the values from the checkboxes.

Here is how the checkboxes are, there is a list of interest

List<Map> interests = [
    {
      "name": "Football",
      "isChecked": false
    },
    {
      "name": "Hand Ball",
      "isChecked": false
    },
];

The widget shows the checkboxes and the selected items, There is also

Container(
              margin: EdgeInsets.all(2),
              child: TextField(
                controller: nameController,
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Name',
                ),
              ),
            ),
            SizedBox(height: 10,),
            Column(
                children: interests.map((interests) {
                  return CheckboxListTile(
                      value: interests["isChecked"],
                      title: Text(interests["name"]),
                      onChanged: (newValueInterests) {
                        setState(() {
                          interests["isChecked"] = newValueIntersts;
                        });
                      });
                }).toList()),
            SizedBox(height: 10),
            SizedBox(height: 10),
            Wrap(
              children: availableInterests.map((interests) {
                if (interests["isChecked"] == true) {
                  return Card(
                    elevation: 3,
                    color: Colors.amber,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(interests["name"]),
                    ),
                  );
                }

                return Container();
              }).toList(),
            ),

Here is My modal class, but I am not sure how to capture the interest in here

class User {
  final String id;
  final String name;


  User({ required this.id, required this.name});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['_id'] as String,
      name: json['name'] as String,
    );
  }

  @override
  String toString() {
    return 'User{id: $id, name: $name}';
  }
}

And also in my ApiService code, how do I pass the interests?

  Future<Users> createUser(Users users) async {
    Map data = {
      'name': user.name
//The interest should be part of this data. But I am not sure how to capture it
    };

    final Response response = await post(
      apiUrl,
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(data),
    );
    if (response.statusCode == 200) {
      return Users.fromJson(json.decode(response.body));
    } else {
      throw Exception('Failed to post cases');
    }
  }




Aucun commentaire:

Enregistrer un commentaire