Flutter || How to send Put request to server when user click on checkbox

Question

I want to perform Update data over the internet when the user clicks on the checkbox it should change to tick mark done and send put request to the server where manualBillCompletion turns: true before the user clicks on the checkbox it was on false.

here is my response of the API

I have taken the help of flutter docs and created the services.dart and model data. But I am not able to represent on UI when the user clicks on the checkbox.

here are my services.dart

Future <OrdersPut> ordersPutRequest(ApiOrdersData data)  async{
     SharedPreferences prefs = await SharedPreferences.getInstance();
        String? jwt = prefs.getString('jwt');

    http.Response response;
   response = await http.put(Uri.parse(ordersPut),headers: <String,String>{
      'Authorization' : 'Bearer $jwt',
        'Content-Type' : 'multipart/form-data; boundary=---01xxxxxx'
     },
         body: jsonEncode(<String,String>{
    'manualBillCompletion': data.manualBillCompletion!,
    'mobile': data.balancePayment!
      })
 );

  if(response.statusCode == 200) {
print(response.statusCode);
String responseBody = response.body;

return OrdersPut.fromJson(jsonDecode(responseBody));
 }
 else {
     print("error ${response.statusCode}");
      throw Exception('Failed to load data');
 }
}

here is my class

  class ApiOrdersData{
   String? manualBillCompletion;
    String? balancePayment;

  ApiOrdersData({
    required this.manualBillCompletion,
      required this.balancePayment
    });
  }

here is my variable where I am storing the get response

bool? checkedValue = order?.data.attributes.totalBills[index].manualBillCompletion ?? false;

here is my UI where I am using get a response to represent on screen.

                  checkedValue == false
                                      ? Row(
                                          children: [
                                            Text(
                                              "Not Completed",
                                              style: TextStyle(
                                                  color: Color.fromRGBO(
                                                      17, 112, 222, 1),
                                                  fontSize: 12,
                                                  fontWeight: FontWeight.w600),
                                            ),
                                            Checkbox(
                                                focusColor: Color(0xff1170DE),
                                                activeColor: Color(0xff1170DE),
                                                shape: CircleBorder(),
                                                value: checkedValue,
                                                onChanged: (newValue) {
                                                  setState(() {
                                                    checkedValue = newValue;
                                                  });
                                                }),
                                          ],
                                        )
                                     :
                            Row(
                                          children: [
                                            Text(
                                              "Completed",
                                              style: TextStyle(
                                                  color: Color.fromRGBO(
                                                      17, 112, 222, 1),
                                                  fontSize: 12,
                                                  fontWeight: FontWeight.w600),
                                            ),
                                            Checkbox(
                                                focusColor: Color(0xff1170DE),
                                                activeColor: Color(0xff1170DE),
                                                shape: CircleBorder(),
                                                value: checkedValue,
                                                onChanged: (newValue) {
                                                  setState(() {
                                                    checkedValue = newValue;
                                                  });
                                                }),
                                          ],
                                        ),

score 1 · Answer 1 · answered Feb 21 '22 at 14:05

You can call the ordersPutRequest() Function inside onChanged.

     Checkbox(
     focusColor: Color(0xff1170DE),
     activeColor: Color(0xff1170DE),
     shape: CircleBorder(),
     value: checkedValue,
     onChanged: (newValue) {
     setState(() {
         checkedValue = newValue;
    });
    ordersPutRequest(ApiOrdersData(manualBillCompletion:"true",balancePayment:balancePayment
    ))
 }),

You can make ordersPutRequest static to make it Callable.

static Future <OrdersPut> ordersPutRequest(ApiOrdersData data)

or use any State Management Solution.

I hope this works!

thank you for your response, Though your answer helped me a lot but eventually it is not working. I am trying to do some tweaks to make it work. — ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ, Feb 23 '22 at 04:03

Flutter || How to send Put request to server when user click on checkbox

1 Answers1