{"id":32525,"date":"2024-11-01T09:09:44","date_gmt":"2024-11-01T09:09:44","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32525"},"modified":"2024-11-01T11:54:57","modified_gmt":"2024-11-01T11:54:57","slug":"flutter-course-using-the-http-package","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32525\/","title":{"rendered":"Flutter Course: Using the HTTP Package"},"content":{"rendered":"

<\/p>\n

\n
\n

Author: Your Name | Date: October 2023<\/p>\n<\/header>\n

\n

Introduction<\/h2>\n

\n Flutter is an open-source UI software development kit (SDK) created by Google,
\n which allows rapid development of applications that run on multiple platforms using a single codebase.
\n In this tutorial, we will explore the http<\/code> package, commonly used to communicate with external APIs in Flutter.
\n This package is a tool that simplifies communication with RESTful APIs.\n <\/p>\n<\/section>\n

\n

Installing the http Package<\/h2>\n

\n To use the http package, you first need to add it to your pubspec.yaml<\/code> file.
\n Add the following code to the dependencies:<\/code> section:\n <\/p>\n

dependencies:\n  http: ^0.13.4<\/code><\/pre>\n
\n                After adding the package, use the following command to install it:\n            <\/p>\n
flutter pub get<\/code><\/pre>\n<\/section>\n
\n
Basic Usage<\/h2>\n
\n                To use the http package, you first need to import the relevant classes.
\n                Write your code like this to use the http package:\n            <\/p>\n
import 'package:http\/http.dart' as http;<\/code><\/pre>\n
\n                Now, let\u2019s look at how to send a GET request to an external API.
\n                For example, checking user information from the JSONPlaceholder API:\n            <\/p>\n
Future fetchData() async {\n  final response = await http.get(Uri.parse('https:\/\/jsonplaceholder.typicode.com\/users'));\n  \n  if (response.statusCode == 200) {\n    \/\/ When the request was successful\n    print('Data: ${response.body}');\n  } else {\n    \/\/ When the request failed\n    throw Exception('Failed to fetch data.');\n  }\n}<\/void><\/code><\/pre>\n
\n                The function above operates asynchronously,
\n                it requests user information from the API, printing the data if the response is successful.\n            <\/p>\n<\/section>\n
\n
Sending a POST Request<\/h2>\n
\n                Now, let\u2019s look at how to send a POST request.
\n                For example, when sending data to an API that creates a new user:\n            <\/p>\n
Future createUser() async {\n  final response = await http.post(\n    Uri.parse('https:\/\/jsonplaceholder.typicode.com\/users'),\n    headers: {\n      'Content-Type': 'application\/json; charset=UTF-8',\n    },\n    body: jsonEncode({\n      'name': 'John Doe',\n      'username': 'johndoe',\n      'email': 'johndoe@example.com',\n    }),\n  );\n\n  if (response.statusCode == 201) {\n    \/\/ User was successfully created.\n    print('User created: ${response.body}');\n  } else {\n    \/\/ When the request failed\n    throw Exception('Failed to create user');\n  }\n}<\/String,><\/String,><\/void><\/code><\/pre>\n
\n                In the above code, the `jsonEncode` function is a built-in JSON encoding function in Dart,
\n                used to convert Dart objects into JSON-formatted strings.\n            <\/p>\n<\/section>\n
\n
Query Parameters and Headers<\/h2>\n
\n                Let\u2019s learn how to add query parameters in HTTP GET requests
\n                and how to set request headers.
\n                For example, you can filter data based on certain conditions:\n            <\/p>\n
Future fetchFilteredData() async {\n  final response = await http.get(Uri.parse('https:\/\/jsonplaceholder.typicode.com\/users?filter=active'), \n    headers: {\n      'Authorization': 'Bearer some_api_key',\n    }\n  );\n\n  if (response.statusCode == 200) {\n    print('Filtered data: ${response.body}');\n  } else {\n    throw Exception('Failed to fetch filtered data.');\n  }\n}<\/String,><\/void><\/code><\/pre>\n
\n                Here, `filter=active` is a query parameter provided by the API,
\n                and the `Authorization` header is a way to provide authentication information to the server by including the API key.\n            <\/p>\n<\/section>\n
\n
Error Handling<\/h2>\n
\n                When making API requests, you should always handle errors.
\n                By checking the HTTP request’s status code and handling exceptions,
\n                you can provide a better experience for users:\n            <\/p>\n
Future fetchDataWithErrorHandling() async {\n  try {\n    final response = await http.get(Uri.parse('https:\/\/jsonplaceholder.typicode.com\/users'));\n\n    if (response.statusCode == 200) {\n      print('Data: ${response.body}');\n    } else {\n      throw Exception('Server Error: ${response.statusCode}');\n    }\n  } catch (e) {\n    print('Error occurred during request: $e');\n  }\n}<\/void><\/code><\/pre>\n
\n                The above code uses a try-catch statement to
\n                handle potential exceptions that may occur during asynchronous requests.\n            <\/p>\n<\/section>\n
\n
Reusing the HTTP Client<\/h2>\n
\n                Reusing the HTTP client can optimize performance and
\n                allow for common use across multiple requests.
\n                You can create an HTTP client like this:\n            <\/p>\n
class ApiService {\n  final http.Client client;\n\n  ApiService(this.client);\n  \n  Future fetchData() async {\n    final response = await client.get(Uri.parse('https:\/\/jsonplaceholder.typicode.com\/users'));\n    \/\/ Same data processing logic as above...\n  }\n}\n\n\/\/ Example usage:\nfinal apiService = ApiService(http.Client());\nawait apiService.fetchData();<\/void><\/code><\/pre>\n
\n                By injecting the client into a class like this,
\n                you can improve reusability and ease of testing.\n            <\/p>\n<\/section>\n
\n
Parsing JSON Data<\/h2>\n
\n                You can parse JSON data received from an API for use.
\n                It\u2019s common practice to create model classes to consume the data internally:\n            <\/p>\n
class User {\n  final int id;\n  final String name;\n  final String username;\n  final String email;\n\n  User({required this.id, required this.name, required this.username, required this.email});\n\n  factory User.fromJson(Map json) {\n    return User(\n      id: json['id'],\n      name: json['name'],\n      username: json['username'],\n      email: json['email'],\n    );\n  }\n}<\/dynamic><\/code><\/pre>\n
\n                The above model class shows how
\n                to convert JSON data into objects.\n            <\/p>\n<\/section>\n
\n
Handling List Data<\/h2>\n
\n                Let\u2019s learn how to handle multiple JSON objects as a list.
\n                To do this, you\u2019ll need to properly transform the data received from the API:\n            <\/p>\n
Future> fetchUsers() async {\n  final response = await http.get(Uri.parse('https:\/\/jsonplaceholder.typicode.com\/users'));\n  \n  if (response.statusCode == 200) {\n    List jsonData = jsonDecode(response.body);\n    return jsonData.map((data) => User.fromJson(data)).toList();\n  } else {\n    throw Exception('Failed to fetch user list.');\n  }\n}<\/dynamic><\/List<\/code><\/pre>\n
\n                This code parses the JSON data received from the server and
\n                returns a list of user information.\n            <\/p>\n<\/section>\n
\n
Handling HTTP Redirection<\/h2>\n
\n                Certain API requests may require handling redirection.
\n                In this case, it is automatically handled when using http.Client<\/code>,
\n                but let\u2019s also look at how to manually handle redirection:\n            <\/p>\n
Future handleRedirect() async {\n  final response = await http.get(Uri.parse('https:\/\/httpbin.org\/redirect\/1'));\n\n  if (response.statusCode == 200) {\n    print('Final URL: ${response.request!.url}');\n  } else {\n    print('Request failed: ${response.statusCode}');\n  }\n}<\/void><\/code><\/pre>\n
\n                In the example above, it will automatically follow redirection for the HTTP request and output the final URL.\n            <\/p>\n<\/section>\n
\n
Comprehensive Example: Creating a CRUD Application<\/h2>\n
\n                Based on what we have learned so far, let’s discuss how to implement a simple CRUD (Create, Read, Update, Delete) application.
\n                For example, you can implement functionalities to add, retrieve, update, and delete users using the JSONPlaceholder API.\n            <\/p>\n
class UserApiService {\n  final http.Client client;\n  \n  UserApiService(this.client);\n  \n  Future> fetchUsers() async {\n    \/\/ Code to fetch users...\n  }\n\n  Future createUser(User user) async {\n    \/\/ Code to create a user...\n  }\n\n  Future updateUser(User user) async {\n    \/\/ Code to update a user...\n  }\n\n  Future deleteUser(int id) async {\n    final response = await client.delete(Uri.parse('https:\/\/jsonplaceholder.typicode.com\/users\/$id'));\n    \/\/ Logic for deletion...\n  }\n}<\/void><\/void><\/void><\/List<\/code><\/pre>\n
\n                The above example defines a `UserApiService` class that includes methods for CRUD operations.
\n                You can add functionalities by implementing actual HTTP requests.\n            <\/p>\n<\/section>\n