flutter-handling-http-and-json

Executes HTTP requests and implements JSON serialization in Flutter applications.

1|Updated Apr 30, 2026
One-click install
npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-handling-http-and-json-wishtohear
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-handling-http-and-json
Source: https://github.com/Wishtohear/bucket-water-oms/tree/main/bucket-water-oms-admin-mobile/skills/flutter-handling-http-and-json
Command: npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-handling-http-and-json-wishtohear

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires http, json_annotation, json_serializable, build_runner.

What problem does it solve? Integrating Flutter apps with REST APIs involves repetitive boilerplate for HTTP requests, JSON parsing, and error handling, and large payloads can freeze the UI if parsed on the main thread. ## Core Features & Use Cases - HTTP Operations: Implements GET, POST, PUT, and DELETE requests using the http package with safe Uri.https construction and status code validation. - JSON Serialization: Supports both manual dart:convert serialization for simple models and json_serializable code generation for complex nested models. - Background Parsing: Moves large JSON parsing to a background isolate with compute() to prevent UI jank. - Use Case: When building a Flutter screen that fetches a list of 1000+ records from a REST endpoint, use this Skill to fetch the data over HTTPS, parse it in a background isolate, and map it to typed Dart models. ## Quick Start Ask the AI to implement an HTTP GET request in Flutter that fetches data from a REST API endpoint and parses the JSON response into a Dart model class.

Frequently Asked Questions about flutter-handling-http-and-json

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make an HTTP request in Flutter?▼

Add the http package to pubspec.yaml, build the URL with Uri.https, and call http.get, http.post, http.put, or http.delete. Validate response.statusCode for 200 or 201 before calling jsonDecode on the response body.

How to parse JSON in Flutter without freezing the UI?▼

Move parsing to a background isolate using Flutter's compute() function. Define a top-level function that takes the response body string and returns parsed Dart objects, then pass it to compute() after receiving the HTTP response.

Should I use manual JSON serialization or json_serializable in Flutter?▼

Use manual serialization with dart:convert for small prototypes or simple models. For production apps with complex or nested models, use json_serializable with build_runner to generate fromJson and toJson code automatically.

Why does my Flutter HTTP request fail on Android or iOS?▼

Android and iOS block cleartext HTTP connections by default, so use HTTPS endpoints. Also ensure the Internet permission is declared in AndroidManifest.xml and macOS entitlements are configured where applicable.

How do I send JSON data in a Flutter POST request?▼

Call http.post with the target URI, set the Content-Type header to application/json; charset=UTF-8, and pass jsonEncode(yourMap) as the body. Treat a 201 status code as a successful creation response.