Most mobile applications need to make requests to an external service, whether it’s an API, or any other service that’s hosted on an external server and can be accessed by making a request over HTTP. So, how do you make an HTTP call from a Flutter mobile app?
As discussed in a previous blog post, there are a lot of advantages to using an API. In this post, I will outline the steps needed to make a call to an external API, using HTTP, from a Flutter mobile app. The same concepts apply to the different types of Flutter apps as well.
There’s a package for that
To start off, you will need to include the http package in your application. Just add it to your pubspec.yaml file, and run the flutter pub get command. For more details on this package, check out its page on pub.dev.
After including the package in your app, you can start using it and making HTTP requests. To use it in your code, you have to add an import statement like this: import 'package:http/http.dart' as http.
GET requests
The easiest type of HTTP request to make, is a GET request. Here’s an example of how to make a GET request to an external server from your Flutter application: http.Response response = await http.get('https://example.com/api');
The above example uses the await keyword, which means that this line of code has to be inside a function that’s declared with the async keyword. This will make the call, and store the response in an object called response.
You can then read the response by using the below code: final Map<String, dynamic> responseData = json.decode(response.body);
This assumes that the external service that we’re calling returns data in JSON format. Otherwise, you will have to declare the variable responseData with the appropriate data type returned. To use the json.decode method, you have to import the built-in convert package like this (import 'dart:convert').
We are reading the contents of the response, by calling the body property. The Response object has another useful property called statusCode. This property contains the HTTP status code that was returned as a result of making the HTTP call. You can get a list of valid HTTP status code from here.
If we want to make sure that the call was successful, we can check the value of the statusCode property like this: if (response.statusCode == 200).
Here’s a complete example of making an HTTP GET request:
Future<void> getFamily() async {
http.Response response = await http.get('https://example.com/api');
final Map<String, dynamic> responseData = json.decode(response.body);
if (response.statusCode == 200 || response.statusCode == 201) {
// SUCCESS!
} else {
// THE CALL FAILED!
}
return;
}Headers
If you need to set any headers before making the request, you can do so by passing a second argument to the http.get method. For example, if you want to set the Content-Type header value, the call would look like this:
http.Response response = await http.get('https://example.com/api', headers: {'Content-Type': 'application/json'});POST requests
Making HTTP POST requests is very similar. Of course, with POST requests, the request can have data in its body. So, to make a POST request and pass data in the body, you have to use the http.post method. Typically, this method is called by passing 3 arguments. The first argument is the URL of the server you’re calling. The other two arguments are named. The first named argument is headers, which is used to set header values (just like in the get method). And the second named parameter is body, which is used to send data in the body of the request.
If you plan on sending data in JSON format, then you have to use the json.encode method.
Conclusion
In summary, to make HTTP calls from your Flutter mobile app, include the http package in your app and call the appropriate methods depending on the type of service you want to call. For any questions, please leave a comment here or use my contact page.
