在Flutter应用程序中,在表格中添加一个表单,以便将数值数据提交给API

qgelzfjb  于 2022-12-24  发布在  Flutter
关注(0)|答案(1)|浏览(89)

在我的flutter应用程序中,我有一个API,可以通过表单从应用程序发送数据。
在我的项目中,有一个对象迭代,我希望用户添加要发送到API的数字输入,这样就会有几个提交按钮来分别发送数据。
目前,我有一个表:

Table(
                                          children: [
                                            const TableRow(children: [
                                              Text(
                                                '',
                                                style: TextStyle(
                                                  fontSize: 15,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                ),
                                              ),
                                              Text(
                                                'Size',
                                                style: TextStyle(
                                                  fontSize: 15,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                ),
                                              ),
                                              Text(
                                                'Order',
                                                style: TextStyle(
                                                  fontSize: 15,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                ),
                                              ),
                                              Text(
                                                'New Size',
                                                style: TextStyle(
                                                  fontSize: 15,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                ),
                                              ),
                                              Text(
                                                'New Order',
                                                style: TextStyle(
                                                  fontSize: 15,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                ),
                                              ),
                                              Text(
                                                'Submit',
                                                style: TextStyle(
                                                  fontSize: 15,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                ),
                                              )
                                            ]),

                                            // Iterate over the breakdowns list and display the sequence information
                                            for (var breakdown in snapshot
                                                .data![index].breakdowns)
                                              TableRow(children: [
                                                Text(
                                                  '${breakdown.order}',
                                                  style: const TextStyle(
                                                    fontSize: 15,
                                                    fontWeight: FontWeight.bold,
                                                    color: Colors.black,
                                                  ),
                                                ),
                                                Text(
                                                  '${breakdown.order}',
                                                  style: const TextStyle(
                                                    fontSize: 15,
                                                    fontWeight: FontWeight.bold,
                                                    color: Colors.black,
                                                  ),
                                                ),
                                                Text(
                                                  '${breakdown.size}',
                                                  style: const TextStyle(
                                                    fontSize: 15,
                                                    fontWeight: FontWeight.bold,
                                                    color: Colors.black,
                                                  ),
                                                ),
                                                const TextField(
                                                  keyboardType:
                                                      TextInputType.number,
                                                  decoration: InputDecoration(),
                                                ),
                                                const TextField(
                                                  keyboardType:
                                                      TextInputType.number,
                                                  decoration: InputDecoration(),
                                                ),
                                                IconButton(
                                                  icon: Icon(Icons
                                                      .check_circle_outline),
                                                  onPressed: () {
                                                    // Code to execute when button is pressed
                                                  },
                                                )
                                              ])
                                          ],
                                        ),

函数如下:

Future<http.Response> addLog(int id,
      int logOrder, int logSize) async {
    var url = Uri.parse(Config.apiURL +
        Config.userAddlogAPI.replaceFirst("{id}", id.toString()));

    final response = await http.post(url, headers: {
      HttpHeaders.authorizationHeader:
          'Token xxxxxxxxxxxxx',
    }, body: {
      'log_Order': logOrder,
      'log_Size': logSize,
    });

    if (response.statusCode == 200) {
      // request was successful, parse the response
      return response;
    } else {
      // request failed, check the status code and response body for more information
      throw Exception("Failed to add log");
    }
  }

我的问题是如何创建一个表单,以便发送在TextField中接收到的数值。

dgenwo3n

dgenwo3n1#

Form Package Table小部件,并为其分配formKey。

final _formKey = GlobalKey<FormState>();

 Form(key: _formKey, child: Container() //your widget )

对于每个textInput,使用TextFormField并向其添加验证器。

TextFormField(
   keyboardType: TextInputType.number,
   validator: (value) {
          return value?.trim().isValidInput(context); //YourValidationConditions
  }
),

当用户点击提交按钮时,检查您的表单验证并显示适当的消息或错误。

if (_formKey.currentState!.validate()) {
    _formKey.currentState!.save();
    //API Call for correct information                          
} else {
   //DisplayError
}

相关问题