flutter-use-http-package
Use the `http` package to execute GET, POST, PUT, or DELETE requests. Use when you need to fetch from or send data to a REST API.
By flutter · 29,538 installs
npx skills add flutter/agent-plugins --skill flutter-use-http-package
Source repository · Upstream listing
Implementing Flutter Networking
Contents
[Configuration & Permissions]( configuration permissions)
[Request Execution & Response Handling]( request execution response handling)
[Background Parsing]( background parsing)
[Workflow: Executing Network Operations]( workflow executing network operations)
[Examples]( examples)
Configuration & Permissions
Configure the environment and platform specific permissions required for network access.
1. Add the http package dependency via the terminal:
2. Import the package in your Dart files:
3. Configure Android permissions by adding the Internet permission to android/app/src/main/AndroidManifest.xml :
4. Configure macOS entitlements by adding the network client key to both macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements :
Request Execution & Response Handling
Execute HTTP operations and map responses to strongly typed Dart objects.
URIs: Always parse URL strings using Uri.parse('your url') .
Headers: Inject authorization and content type headers via the headers parameter map. Use HttpHeaders.authorizationHeader for auth tokens.
Payloads: For POST and PUT requests, encode the body using jsonEncode() from dart:convert .
Status Validation: Evaluate response.statusCode . Treat 200 OK (GET/PUT/DELETE) and 201 CREATED (POST) as success.
Error Handling: Throw explicit exceptions for non success status codes. Never return null on failure, as this prevents FutureBuilder from triggering its error state and causes infinite loading indicators.
Deserialization: Parse the raw string using jsonDecode(response.body) and map it to a custom Dart object using a factory constructor (e.g., fromJson ).
Background Parsing
Offload expensive JSON parsing to a separate Isolate to prevent UI jank (frame drops).
Import package:flutter/foundation.dart .
Use the compute() function to run the parsing logic in a background isolate.
Ensure the parsing function passed to compute() is a top level function or a static method, as closures or instance methods cannot be passed across isolates.
Workflow: Executing Network Operations
Use the following checklist to implement and validate network operations.
Task Progress:
[ ] 1. Define the strongly typed Dart model with a fromJson factory constructor.
[ ] 2. Implement the network request method returning a Future<Model .
[ ] 3. Apply conditional logic based on the operation type:
If fetching data (GET): Append query parameters to the URI.
If mutating data (POST/PUT): Set 'Content Type': 'application/json; charset=UTF 8' and attach the jsonEncode body.
If deleting data (DELETE): Return an empty model instance on success ( 200 OK ).
[ ] 4. Validate the statusCode and throw an Exception on failure.
[ ] 5. Integrate the Future into the UI using FutureBuilder .
[ ] 6. Handle snapshot.hasData , snapshot.hasError , and default to a CircularProgressIndicator .
[ ] 7. Feedback Loop: Run the app trigger the network request review console for unhandled exceptions fix parsing or permission errors.
Examples
High Fidelity Implementation: Fetching and Parsing in the Background