6.7. Widgets in Flutter: HTTP Requests

Widgets in Flutter are the fundamental basis for creating any application using this technology. They are the basic building elements of the UI in a Flutter app. A widget can define a structural element such as a button or a menu, a stylistic aspect such as a font or color, or even a layout such as padding or alignment.

Also, it's important to point out that in Flutter, almost everything is a widget. This includes not only visual elements, but also elements such as actions (such as navigation) and attributes (such as margins, padding, and alignment).

One of the most important aspects of application development is the ability to interact with web APIs and make HTTP requests. This allows your application to access and manipulate data from a variety of web sources. In Flutter, this is achieved using the http library.

HTTP requests in Flutter

To make HTTP requests in Flutter, you need to add the http dependency in the pubspec.yaml file. The http library provides the simplest way to fetch data from the web.

dependencies:
  flutter:
    sdk: flutter

  http: ^0.13.3

Once you've added the dependency, you can import it into your Dart file.

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

You can now use the http library to make HTTP requests. The get() function from the http library is used to make a GET request. You need to pass the URL as a parameter to the get() function.

var response = await http.get('https://api.example.com/data');

The HTTP request response is stored in the response variable. You can use the body property of the response variable to get the body of the response.

print('Response body: ${response.body}');

Also, you can check the status of the response using the statusCode property of the response variable.

if (response.statusCode == 200) {
  print('Request successful');
} else {
  print('Request failed with status: ${response.statusCode}.');
}

Using Widgets to display data from an HTTP request

Once you make an HTTP request and get the data, you can use widgets to display that data in your app's UI. For example, you can use a ListView widget to display a list of data.

First, you need to create a function that makes the HTTP request and returns the data. This function can be called in your widget's initState() method.

List data;

@override
void initState() {
  super.initState();
  fetchData();
}

fetchData() async {
  var response = await http.get('https://api.example.com/data');
  if (response.statusCode == 200) {
    setState(() {
      data = json.decode(response.body);
    });
  }
}

Once you get the data, you can use a ListView.builder widget to display the data in the UI. ListView.builder requires two properties: itemCount and itemBuilder. The itemCount property defines the number of items in the list and the itemBuilder property builds each item in the list.

ListView.builder(
  itemCount: data.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(data[index]['title']),
      subtitle: Text(data[index]['body']),
    );
  },
)

With this, you can make HTTP requests in Flutter and use widgets to display the fetched data. This is a fundamental aspect of app development and is an essential skill for any Flutter developer.

Next page of the Free Ebook:

80Widgets in Flutter: Data Persistence

3 minutes