**Course Title:** Flutter Development: Build Beautiful Mobile Apps **Section Title:** Working with APIs and Data Persistence **Topic:** Making HTTP requests and consuming RESTful APIs **Introduction** In this topic, we will explore how to make HTTP requests and consume RESTful APIs in Flutter applications. RESTful APIs are a fundamental part of modern web development, and learning how to interact with them in Flutter will enable you to build more robust and dynamic apps. **What are RESTful APIs?** REST (Representational State of Resource) is an architectural style for designing networked applications. It's based on the idea of resources, which are identified by URIs, and can be manipulated using a fixed set of operations. RESTful APIs are designed to provide a standardized way of interacting with resources over the web. **Making HTTP Requests in Flutter** To make HTTP requests in Flutter, we'll use the `http` package, which is a popular and well-maintained package for making HTTP requests in Dart. **Step 1: Add the http package to your project** To add the `http` package to your project, open your `pubspec.yaml` file and add the following line: ```yaml dependencies: http: ^0.13.3 ``` Then, run `flutter pub get` to get the package. **Step 2: Make a GET request** To make a GET request, we'll use the `get` function from the `http` package. Here's an example: ```dart import 'package:http/http.dart' as http; void main() async { final response = await http.get(Uri.parse('https://api.example.com/data')); if (response.statusCode == 200) { final jsonData = jsonDecode(response.body); print(jsonData); } else { print('Failed to load data'); } } ``` In this example, we're making a GET request to the `https://api.example.com/data` endpoint. We're then checking the status code of the response to see if it's 200 (OK). If it is, we're decoding the response body as JSON and printing it to the console. **Step 3: Make a POST request** To make a POST request, we'll use the `post` function from the `http` package. Here's an example: ```dart import 'package:http/http.dart' as http; void main() async { final response = await http.post(Uri.parse('https://api.example.com/data'), headers: { 'Content-Type': 'application/json', }, body: jsonEncode({ 'name': 'John Doe', 'age': 30, })); if (response.statusCode == 201) { print('Data created successfully'); } else { print('Failed to create data'); } } ``` In this example, we're making a POST request to the `https://api.example.com/data` endpoint. We're setting the `Content-Type` header to `application/json` and passing a JSON body with the data to create. **Step 4: Make a PUT request** To make a PUT request, we'll use the `put` function from the `http` package. Here's an example: ```dart import 'package:http/http.dart' as http; void main() async { final response = await http.put(Uri.parse('https://api.example.com/data/1'), headers: { 'Content-Type': 'application/json', }, body: jsonEncode({ 'name': 'Jane Doe', 'age': 31, })); if (response.statusCode == 200) { print('Data updated successfully'); } else { print('Failed to update data'); } } ``` In this example, we're making a PUT request to the `https://api.example.com/data/1` endpoint. We're setting the `Content-Type` header to `application/json` and passing a JSON body with the updated data. **Step 5: Make a DELETE request** To make a DELETE request, we'll use the `delete` function from the `http` package. Here's an example: ```dart import 'package:http/http.dart' as http; void main() async { final response = await http.delete(Uri.parse('https://api.example.com/data/1')); if (response.statusCode == 200) { print('Data deleted successfully'); } else { print('Failed to delete data'); } } ``` In this example, we're making a DELETE request to the `https://api.example.com/data/1` endpoint. **Parsing JSON Data** To parse JSON data, we'll use the `jsonDecode` function from the `dart:convert` library. ```dart import 'dart:convert'; void main() async { final response = await http.get(Uri.parse('https://api.example.com/data')); if (response.statusCode == 200) { final jsonData = jsonDecode(response.body); print(jsonData); } else { print('Failed to load data'); } } ``` In this example, we're decoding the response body as JSON and printing it to the console. **Displaying JSON Data in Flutter** To display JSON data in Flutter, we'll use the `ListView.builder` widget. ```dart import 'package:flutter/material.dart'; import 'dart:convert'; void main() async { final response = await http.get(Uri.parse('https://api.example.com/data')); if (response.statusCode == 200) { final jsonData = jsonDecode(response.body); return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('JSON Data'), ), body: ListView.builder( itemCount: jsonData.length, itemBuilder: (context, index) { return ListTile( title: Text(jsonData[index]['name']), subtitle: Text(jsonData[index]['age'].toString()), ); }, ), ), ); } else { return Text('Failed to load data'); } } ``` In this example, we're displaying the JSON data in a `ListView` with a `ListTile` for each item. **Conclusion** In this topic, we've learned how to make HTTP requests and consume RESTful APIs in Flutter applications. We've covered the basics of making GET, POST, PUT, and DELETE requests, as well as parsing and displaying JSON data. We've also used the `ListView.builder` widget to display JSON data in Flutter. **Exercise** Try making a GET request to a public API, such as the [JSONPlaceholder API](https://jsonplaceholder.typicode.com/). Parse the JSON data and display it in a `ListView`. **Leave a comment or ask for help** If you have any questions or need further clarification on any of the concepts covered in this topic, please leave a comment below.