How to fetch data from REST APIs in Flutter? 💻
Tags: flutter, dart, mobile, beginners
Published: 2021-06-19 20:06:08

I remember being stuck with REST APIs when I was new to Flutter and programming in general. As a beginner I didn't know where to find the solutions to my problem. I was often advised to read the official documentation but those docs always looked very intimidating to me as a complete beginner. That is when I stumbled upon this beautiful community of people on the internet that are always ready to help out. After having gained so much I guess it's time to give back to this gorgeous community and that is why I am writing my first ever blog post 🤩

In this article, we'll try to fetch some dummy data from a REST API hosted by  [Reqres.in](https://reqres.in/)

Before we begin, add the following code into the `main.dart` file of your flutter app:

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85pkq5magj2c4emgmgb2.png)

After you are done with this, your app should look something like this:

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb64cyi6qg68jvv8xqzp.jpg)

Before we can make our first HTTP request we need to install some packages. You can now head over to [pub.dev](https://pub.dev/) and search for 'http'. The package that we are looking for is [this.](https://pub.dev/packages/http/install)

In order to install this package you can follow the below mentioned steps:

- Run the following command in your terminal:

```
$ flutter pub add http
```
- After you have done this your IDE will run the `flutter pub get` command. In case it doesn't, you can manually do it by typing it into your terminal.

The `http` package has now been installed. In order to access it, we can import it as a library by adding the following line of code to the top of our `main.dart` file:

```
import 'package:http/http.dart' as http;
```
Now that everything is setup, we can start accessing the `http` library and use it to send HTTP requests to the REST API. Let's get coding! 🚀
 
![typing cat gif](https://media.giphy.com/media/unQ3IJU2RG7DO/giphy.gif)

Our next step would be to create a function that will fetch the data from the REST API and print it to the console. In order to keep things simple, let us name the function `getData()` which is exactly what it does - it gets data! This function will be an asynchronous function and will have the return type of `Future<String>`. 

_Wait what? What the heck is Future<String>? Shouldn't the return type be just `String`?_ 

![confused guy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xex2oyyrs4scl11uvw8x.jpg)

Does that look weird to you? Don't worry! 🤝 I felt the same when I saw it for the first time. Let us try to understand it:

`Future<String>` can be thought of as a promise token that doesn't have any data right now but promises to provide a String in the future. A Future can have two possible states: _Uncompleted_ and _Complete_. The Future is in the _Uncompleted_ state when it doesn't yet have the data that it promised to provide.

Inside the function, let us declare a `final` variable that stores the URL.

```
final url = Uri.parse('https://reqres.in/api/users?page=2');
```

We now send an HTTP request to the REST API with the help of the `get()` method that the `http` package offers and store it in a variable called `response`. This response will be of the type `http.Response`. We also specify in the header of our request that we want to receive a response in the JSON format.

```
http.Response response = await http.get(
      url,
      headers: {
        'Accept' : 'application/json'
      });
```
We can now print the response body to the console!

```
print(response.body);
```

The `getData` function should finally look like this:

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l8qesaoo1w4dzbnyfdu.png)

There you go! We should now be able to receive data from the REST API and print it to the console. Just pass the `getData` function to the onPressed listener of the button and reload your app.

Now press the button on your app and voila! 🥳 Your console will print out some data from the REST API like this:

![console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txi2vhxjfl0xq8kyhtt6.jpg)

Let's connect 👇
[GitHub](https://github.com/umang-sinha) [LinkedIn](https://www.linkedin.com/in/umang-sinha)