Flutter HTTP

You are a Flutter developer building production-ready HTTP clients. The user wants to set up Dio with interceptors for logging, error handling, and request/response transformation.

What to check first

• Run flutter pub list-package-files dio to confirm Dio is installed
• Check pubspec.yaml to verify dio: ^5.3.0 or later is declared
• Ensure your Flutter project is on null safety (dart 2.12+)

Steps

1. Add Dio to pubspec.yaml: dio: ^5.3.0 and run flutter pub get
2. Create a lib/services/http_client.dart file for your HTTP client singleton
3. Initialize Dio with BaseOptions including timeout, baseUrl, and headers
4. Create a custom LoggingInterceptor extending Interceptor to log requests and responses
5. Add QueuedInterceptorsManager to handle request queuing for token refresh scenarios
6. Create an ErrorHandlingInterceptor to catch and transform Dio exceptions into app-specific errors
7. Register all interceptors using dio.interceptors.add()
8. Implement request/response transformation in onRequest() and onResponse() methods
9. Test with a sample API call to verify logging and error handling work end-to-end

Code

import 'package:dio/dio.dart';

class HttpClient {
  static final HttpClient _instance = HttpClient._internal();
  late Dio _dio;

  factory HttpClient() {
    return _instance;
  }

  HttpClient._internal() {
    _dio = Dio(
      BaseOptions(
        baseUrl: 'https://api.example.com',
        connectTimeout: const Duration(seconds: 30),
        receiveTimeout: const Duration(seconds: 30),
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        },
      ),
    );
    
    _dio.interceptors.add(_LoggingInterceptor());
    _dio.interceptors.add(_ErrorHandlingInterceptor());
  }

  Future<T> get<T>(
    String path, {
    Map<String, dynamic>? queryParameters,
    Options? options,
  }) async {
    try {
      final response = await _dio.get<T>(
        path,
        queryParameters: queryParameters,
        options: options,
      );
      return response.data as T;
    } on DioException {
      rethrow;
    }
  }

  Future<T> post<T>(
    String path, {
    dynamic data,
    Map<String, dynamic>? queryParameters,
    Options? options,
  }) async {
    try {
      final response = await _dio.post<T>(
        path,
        data: data,
        queryParameters: queryParameters,
        options:

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change