One of the most important things you should consider when developing a mobile app is how it communicates with external services. Usually, your code sends HTTP requests to do it. In this article, you will learn how to send HTTP requests in Flutter.
What is an HTTP request?
HTTP stands for HyperText Transfer Protocol. It is the foundation of the internet as we know it. It is used to serve websites, communicate with APIs and much more. An HTTP request has a type (GET, POST, PUT, UPDATE, etc.), body (can be JSON, HTML, binary, etc.) and headers. You send an HTTP request to a URL (address of the resource you are trying to communicate) and get a response back. The response has a status code (200 for success, 404 for not found, etc.), body (again, can be anything serializable) and headers. Headers contain metadata: data about data. They explain what format is used, compression algorithms, authentication details and so on.
Using package:http to send HTTP requests Dart has a built-in package called http to handle all your HTTP needs. First, you need to add it as a dependency to your pubspec.yaml file:
dependencies: http: ^0.12.0+2
You can then import it using this line:
import 'package:http/http.dart' as http;
Here is how you would use this library to perform GET requests:
import 'package:http/http.dart' as http;
// Sending a GET request
const url = 'some-api.com/users';
const response = await http.get(url);
print(response.body);
// Sending a GET request using .read
const data = await http.read(url);
print(data);
There are 2 methods to send a GET request: .get and .read. Both of them do the same thing but .read returns the data directly, while .get returns a Response object. You might want to use .get when in addition to data, you also need the status code and/or headers.
Also, note the keyword await before http requests. As network requests can take some time to complete, they are asynchronous. That means your code has to wait until the execution is completed. Using the await keyword will let the Dart engine work on some other tasks while waiting, thus not blocking the UI thread.
Sending POST requests
Of course, you can send POST requests with the http library as well. Check this code out:
import 'package:http/http.dart' as http;
// Sending a POST request
const url = 'some-api.com/users';
const payload = {online: false};
const response = await http.post(url, body: payload);
print(response.statusCode); // 200
// Sending a POST request with headers
const headers = {'Content-Type': 'application/json'};
const response_1 = await http.post(url, headers: headers, body: payload);
print(response_1.statusCode); // 200
You can see you need to use .post method to send POST requests. In addition to url, it will also accept a body parameter. It expects an object (which will be serialized into JSON) or a string. You can also see how to send headers along with the request on lines 10-11.
Sending requests to the same host
If you have to send a lot of requests to the same server, you can boost the performance by opening a persistent connection. Here is how:
import 'package:http/http.dart' as http;
// Create a client instance
const client = http.Client();
// Making first request
const first_response = await client.read('some-api.com/data');
print(first_response);
// Second request
const second_response = await client.post('some-api.com/create', body: {name: 'abacaba'});
print(second_response.statusCode);
// Do not forget to close the client when you are done!
client.close();
You can see we are creating a Client instance on line 4. It has exactly the same API as the http package. The only difference is that you have to close the Client when you no longer need it.
This is a short walkthrough on how to send HTTP requests in Dart/Flutter. For more info, check out the official documentation for the http library.