In my flutter app, I have an API that I can want to send data from the application through a form.

In my project, there is an iteration of objects and I want the user to add numeric inputs to be sent to the API so there will be several submit buttons to send the data separately.

Currently, I have a Table:

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

Here is the function:

  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");
    }
  }

My question how can I create a form so that I can send the numeric values received in TextField.

CodePudding user response：

Wrap your Table widget with Form, assign formKey to it.

 final _formKey = GlobalKey<FormState>();

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

for every textInput, use TextFormField and add validator to it.

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

When user tap on submit button check your formValidation and show appropriate message or error.

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