11.10. Working with forms in Flutter: Integration with external APIs

Forms are an essential part of almost every application. They are used to collect user information, whether to create an account, log in, make a reservation, etc. In Flutter, there are several ways to create forms, but in this article, we are going to focus on one specific approach: integration with external APIs.

Before you start, it's important to understand what an API is. API, or Application Programming Interface, is a set of rules and protocols that allow different software programs to communicate with each other. In other words, an API allows an application to access resources or functionality of another application, server or service.

When we talk about integrating forms with external APIs, we are talking about the process of sending the data collected through the form to an external server or service using its API. This can be done in several ways, but the most common is using HTTP requests.

In Flutter, we can use the http library to make HTTP requests. To start, we need to add it to our pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

After adding the library, we can import it into our file:

import 'package:http/http.dart' as http;

Now, we can start working with our form. Let's assume we have a simple login form with two fields: email and password. In Flutter, we can use the TextFormField widget to create these fields:

TextFormField(
  decoration: InputDecoration(labelText: 'Email'),
  onSaved: (value) {
    // save the field value
  },
),
TextFormField(
  decoration: InputDecoration(labelText: 'Password'),
  obscureText: true,
  onSaved: (value) {
    // save the field value
  },
),

When the user presses the submit button, we want to collect the values ​​of these fields and send them to the API. To do this, we need to wrap our form fields in a Form widget and use a GlobalKey to access the form's state:

final _formKey = GlobalKey();

Form(
  key: _formKey,
  child: Column(
    children: [
      // form fields here
    ],
  ),
)

Now, we can use the _formKey.currentState.save() method to save the field values ​​and _formKey.currentState.validate() to validate the fields before sending the data.

onPressed:() {
  if (_formKey.currentState.validate()) {
    _formKey.currentState.save();
    // send the data
  }
},

To send the data, we can use the http.post() function, which accepts the API URL and form data as parameters. Form data must be converted to a string map before submission:

http.post(
  'https://api.example.com/login',
  body: {'email': email, 'password': password},
)

Finally, the http.post() function returns a Future that resolves to a Response. We can use Response to check if the request was successful and to get the response data:

http.post(
  'https://api.example.com/login',
  body: {'email': email, 'password': password},
).then((response) {
  if (response.statusCode == 200) {
    // successful request
  } else {
    // request failed
  }
});

In summary, working with forms and external APIs in Flutter involves collecting form data, validating that data, sending it to the API using an HTTP request, and finally handling the response. This is a very common process in application development and with the help of Flutter and the http library we can accomplish it efficiently and effectively.