flutter-http-and-json▌
flutter/skills · updated Apr 8, 2026
Secure HTTP networking and JSON handling for Flutter apps with background parsing support.
- ›Implements CRUD operations (GET, POST, PUT, DELETE) using the http package with safe URL construction via Uri.https() and strict status code validation
- ›Provides strongly typed JSON serialization and deserialization using Dart 3 pattern matching with factory constructors and toJson() methods
- ›Offloads large JSON parsing to background isolates via compute() to prevent UI jank on payloads exceeding
flutter-http-json-networking
Goal
Manages HTTP networking and JSON data handling in Flutter applications. Implements secure, asynchronous REST API calls (GET, POST, PUT, DELETE) using the http package. Handles JSON serialization, background parsing via isolates for large datasets, and structured JSON schemas for AI model integrations. Assumes the http package is added to pubspec.yaml and the environment supports Dart 3 pattern matching and null safety.
Decision Logic
When implementing JSON parsing and serialization, evaluate the following decision tree:
- Payload Size:
- If the JSON payload is small, parse synchronously on the main thread.
- If the JSON payload is large (takes >16ms to parse), use background parsing via
compute()to avoid UI jank.
- Model Complexity:
- If the data model is simple or a quick prototype, use manual serialization (
dart:convert). - If the data model is highly nested or part of a large production app, STOP AND ASK THE USER: "Should we configure
json_serializableandbuild_runnerfor automated code generation?"
- If the data model is simple or a quick prototype, use manual serialization (
Instructions
1. Configure Platform Permissions
Before making network requests, ensure the target platforms have the required internet permissions.
Android (android/app/src/main/AndroidManifest.xml):
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />
<application ...>
</manifest>
macOS (macos/Runner/DebugProfile.entitlements and Release.entitlements):
<dict>
<!-- Required to fetch data from the internet. -->
<key>com.apple.security.network.client</key>
<true/>
</dict>
2. Define the JSON Data Model
Create a strongly typed Dart class to represent the JSON data. Use factory constructors for deserialization and a toJson method for serialization.
import 'dart:convert';
class ItemModel {
final int id;
final String title;
const ItemModel({required this.id, required this.title});
// Deserialize using Dart 3 pattern matching
factory ItemModel.fromJson(Map<String, dynamic> json) {
return switch (json) {
{'id': int id, 'title': String title} => ItemModel(id: id, title: title),
_ => throw const FormatException('Failed to parse ItemModel.'),
};
}
// Serialize to JSON
Map<String, dynamic> toJson() => {
'id': id,
'title': title,
};
}
3. Implement HTTP Operations (CRUD)
Use the http package to perform network requests. Always use Uri.https for safe URL encoding. Validate the status code and throw exceptions on failure.
import 'dart:convert';
import 'package:http/http.dart' as http;
class ApiService {
final http.Client client;
ApiService(this.client);
// GET Request
Future<ItemModel> fetchItem(int id) async {
final uri = Uri.https('api.example.com', '/items/$id');
final response = await client.get(uri);
if (response.statusCode == 200) {
return ItemModel.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
} else {
throw Exception('Failed to load item: ${response.statusCode}');
}
}
// POST Request
Future<ItemModel> createItem(String title) async {
final uri = Uri.https('api.example.com', '/items');
final response = await client.post(
uri,
headers: <String, String>{'Content-Type': 'application/json; charset=UTF-8'},
body: jsonEncode(<String, String>{'title': title}),
);
if (response.statusCode == 201) {
return ItemModel.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
} else {
throw Exception('Failed to create item: ${response.statusCode}');
}
}
// DELETE Request
Future<void> deleteItem(int id) async {
final uri = Uri.https('api.example.com', '/items/$id');
final response = await client.delete(
uri,
headers: <String, String>{'Content-Type': 'application/json; charset=UTF-8'},
);
if (response.statusCode != 200) {
throw Exception('Failed to delete item: ${response.statusCode}');
}
}
}
4. Implement Background Parsing for Large JSON Arrays
If fetching a large list of objects, move the JSON decoding and mapping to a separate isolate using compute().
import 'package:flutter/foundation.dart';
// Top-level function required for compute()
List<ItemModel> parseItems(String responseBody) {
final parsed = (jsonDecode(responseBody) as List<Object?>).cast<Map<String, Object?>>();
return parsed.map<ItemModel>(ItemModel.fromJson).toList();
}
Future<List<ItemModel>> fetchLargeItemList(http.Client client) async {
final uri = Uri.https('api.example.com', '/items');
final response = await client.get(uri);
if (response.statusCode == 200) {
// Run parseItems in a separate isolate
return compute(parseItems, response.body);
} else {
throw Exception('Failed to load items');
}
}
5. Define Structured JSON Output for AI Models
When integrating LLMs (like Gemini), enforce reliable JSON output by passing a strict schema in the generation configuration and system instructions.
import 'package:firebase_vertexai/firebase_vertexai.dart';
// Define the expected JSON schema
final _responseSchema = Schema(
SchemaType.object,
properties: {
'width': Schema(SchemaType.integer),
'height': Schema(SchemaType.integer),
'items': Schema(
SchemaType.array,
items: Schema(
SchemaType.object,
properties: {
'id': Schema(SchemaType.integer),
'name': Schema(SchemaType.string),
},
),
),
},
);
// Initialize the model with the schema
final model = FirebaseAI.googleAI().generativeModel(
model: 'gemini-2.5-pro',
generationConfig: GenerationConfig(
responseMimeType: 'application/json',
responseSchema: _responseSchema,
),
);
Future<Map<String, dynamic>> analyzeData(String prompt) async {
final content = [Content.text(prompt)];
final response = await model.generateContent(content);
// Safely decode the guaranteed JSON response
return jsonDecode(response.text!) as Map<String, dynamic>;
}
Constraints
- Immutable URL Construction: Always use
Uri.https()orUri.parse()to build URLs. Never use raw string concatenation for endpoints with query parameters. - Error Handling: Never return
nullon a failed network request. Always throw anExceptionor a custom error class so the UI (e.g.,FutureBuilder) can catch and display the error state viasnapshot.hasError. - Status Code Validation: Always validate
response.statusCode. Use200for successful GET/PUT/DELETE and201for successful POST. - Library Restriction: Do not use
dart:ioHttpClientdirectly for standard cross-platform networking. Always use thehttppackage to ensure web compatibility. - Isolate Communication: When using
compute(), ensure the parsing function is a top-level function or a static method, and only pass primitive values or simple objects (likeStringresponse bodies) across the isolate boundary. Do not passhttp.Responseobjects.
Ratings
4.5★★★★★10 reviews- ★★★★★Shikha Mishra· Oct 10, 2024
flutter-http-and-json is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Piyush G· Sep 9, 2024
Keeps context tight: flutter-http-and-json is the kind of skill you can hand to a new teammate without a long onboarding doc.
- ★★★★★Chaitanya Patil· Aug 8, 2024
Registry listing for flutter-http-and-json matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Sakshi Patil· Jul 7, 2024
flutter-http-and-json reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Ganesh Mohane· Jun 6, 2024
I recommend flutter-http-and-json for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Oshnikdeep· May 5, 2024
Useful defaults in flutter-http-and-json — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Dhruvi Jain· Apr 4, 2024
flutter-http-and-json has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Rahul Santra· Mar 3, 2024
Solid pick for teams standardizing on skills: flutter-http-and-json is focused, and the summary matches what you get after install.
- ★★★★★Pratham Ware· Feb 2, 2024
We added flutter-http-and-json from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Yash Thakker· Jan 1, 2024
flutter-http-and-json fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.