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.

If you have no idea what Flutter is, check out this article for some info, and this tutorial to build your first app with 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:

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. You can read more about async/await here.

Sending POST requests

Of course, you can send POST requests with the http library as well. Check this code out:

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:

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.