skills/flutter/flutter-dio/SKILL.md
Implement HTTP networking with Dio including interceptors, retry logic, and response caching. Use when building API clients, configuring authentication headers, or handling network errors gracefully.
npx skillsauth add dhruvanbhalara/skills flutter-dioInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
fromJson / toJson factories for all request/response bodies.ServerException, NetworkException, UnauthorizedException).connectTimeout, receiveTimeout, sendTimeout).AppLogger.DioException into domain-specific Failure types.injectable for consistent behavior across all API calls.compute()flutter_secure_storage — never in source code or SharedPreferencesFor simple REST calls that don't need interceptors, caching, or retry logic, use http instead of Dio.
| Criteria | http | Dio |
|---|---|---|
| Interceptors | No | Yes, full chain |
| Retry logic | Manual | Built-in with backoff |
| Response caching | Manual | Plugin available |
| FormData / Multipart | Manual | Built-in |
| Cancel requests | No | Yes, CancelToken |
| Dependencies | Minimal (1 package) | Heavier |
| Use case | Simple CRUD APIs | Production API clients |
Use http for prototypes and simple fetch-and-display. Use Dio for production API clients that need auth, retry, and caching.
import 'dart:convert';
import 'package:http/http.dart' as http;
// GET request
Future<Map<String, dynamic>> fetchData(http.Client client) async {
final response = await client.get(
Uri.parse('https://api.example.com/data'),
headers: {'Accept': 'application/json'},
);
if (response.statusCode == 200) {
return jsonDecode(response.body) as Map<String, dynamic>;
} else {
throw Exception('Failed to fetch: ${response.statusCode}');
}
}
// POST request
Future<void> createItem(http.Client client, Map<String, dynamic> body) async {
final response = await client.post(
Uri.parse('https://api.example.com/items'),
headers: {'Content-Type': 'application/json'},
body: jsonEncode(body),
);
if (response.statusCode != 201) {
throw Exception('Failed to create: ${response.statusCode}');
}
}
Testing: Always accept http.Client as a parameter (not http.get() directly) to enable mock injection in tests.
development
Perform REST API networking operations (GET, POST, PUT, DELETE) using the lightweight and robust standard `http` package, including platform configurations and background parsing models.
development
Configure internationalization and localization support using Flutter's built-in l10n system, App Resource Bundle (ARB) files, and ICU formatting syntax.
development
Create model classes with fromJson/toJson using dart:convert and Dart 3 pattern matching. Use when manually mapping JSON to classes, parsing HTTP responses, or choosing between manual and code-generated serialization.
data-ai
Diagnose and fix Flutter layout constraint violations (RenderFlex overflow, unbounded height/width, ParentData misuse). Use when encountering layout exceptions, yellow-black overflow stripes, or red error screens.