颤动 ||当用户单击复选框时如何向服务器发送 Put 请求

Question

我想通过互联网执行更新数据，当用户单击复选框时，它应该更改为刻度线完成，并将放置请求发送到服务器，在用户单击复选框之前，manualBillCompletion 变为 true ，它处于 false 状态。

这是我对 API 的响应

我已经得到了flutter docs的帮助并创造了services.dart 和模型数据。 但当用户单击复选框时，我无法在 UI 上表示。

这是我的 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');
 }
}

这是我的类

  class ApiOrdersData{
   String? manualBillCompletion;
    String? balancePayment;

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

，这是我的变量，我在其中存储获取响应

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

，这是我的 UI，我在其中使用获取响应来表示在屏幕上。

                  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;
                                                  });
                                                }),
                                          ],
                                        ),

Answer 1

您可以在onChanged内调用ordersPutRequest()函数。

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

您可以将 orderPutRequest 设为静态以使其可调用。

static Future <OrdersPut> ordersPutRequest(ApiOrdersData data)

或使用任何状态管理解决方案。

我希望这能起作用！