Dio package for advanced HTTP in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Handling Dio request cancellation

You want to cancel an ongoing Dio HTTP request when the user navigates away from the screen. Which code snippet correctly cancels the request?

Flutter

final dio = Dio();
final cancelToken = CancelToken();

// Start request
final response = await dio.get('https://example.com/data', cancelToken: cancelToken);

// Later, cancel the request
cancelToken.cancel('Request cancelled by user');

A Throw an exception manually to stop the request.

B Set dio.options.cancelToken = null to cancel the request.

C Use cancelToken.cancel() to stop the request; this throws a DioError with type Cancel.

D Call dio.close() to cancel the request immediately without error.

💡 Hint

Think about how Dio supports cancellation tokens to stop requests cleanly.

Dio uses CancelToken to cancel requests. Calling cancelToken.cancel() stops the request and throws a DioError with type Cancel, which you can catch to handle cancellation gracefully.

🧠 Conceptual

intermediate

Understanding Dio interceptors order

Dio allows adding interceptors for requests and responses. What is the correct order of execution for multiple interceptors added to Dio?

A Both request and response interceptors run in the order they were added.

B Request interceptors run in the order added; response interceptors run in reverse order.

C Request interceptors run in reverse order; response interceptors run in the order added.

D Interceptors run randomly depending on network speed.

💡 Hint

Think about how requests flow forward and responses flow backward.

Dio executes request interceptors in the order they were added because requests flow forward. Response interceptors run in reverse order because responses flow backward through the chain.

📝 Syntax

advanced

Correct syntax for adding a custom header with Dio

Which option correctly adds a custom header 'Authorization: Bearer token123' to all Dio requests?

Flutter

final dio = Dio();

A dio.options.headers['Authorization'] = 'Bearer token123';

B dio.headers['Authorization'] = 'Bearer token123';

C dio.addHeader('Authorization', 'Bearer token123');

D dio.setOption('headers', {'Authorization': 'Bearer token123'});

💡 Hint

Check the Dio documentation for setting headers globally.

Dio stores headers inside dio.options.headers. You can add or modify headers by assigning to this map.

❓ lifecycle

advanced

Handling Dio error types in Flutter

You want to handle different Dio error types separately in your Flutter app. Which code snippet correctly distinguishes a timeout error from a cancellation error?

Flutter

try {
  final response = await dio.get('https://example.com');
} on DioError catch (e) {
  if (e.type == DioErrorType.connectTimeout) {
    // Handle timeout
  } else if (e.type == DioErrorType.cancel) {
    // Handle cancellation
  }
}

A Use e.response.statusCode to detect timeout errors.

B You must check e.error.toString() instead of e.type for error type.

C DioError does not have a type property; this code will fail.

D The code correctly checks e.type for connectTimeout and cancel to handle errors.

💡 Hint

DioError has a type property that indicates the error category.

DioError.type is an enum that tells you the kind of error, such as connectTimeout or cancel. Checking this property is the correct way to handle different error cases.

🔧 Debug

expert

Diagnosing unexpected Dio response data

You receive a Dio response, but the data is unexpectedly null even though the server returns JSON. What is the most likely cause?

Flutter

final response = await dio.get('https://example.com/api');
print(response.data);

A The server's Content-Type header is missing or incorrect, so Dio does not parse JSON automatically.

B Dio requires manual JSON decoding using jsonDecode(response.data).

C You must set responseType to ResponseType.plain to get JSON data.

D The URL is incorrect, causing Dio to return null data.

💡 Hint

Check the server response headers for content type.

Dio automatically parses JSON if the server sends Content-Type: application/json. If this header is missing or wrong, Dio treats the response as plain text and data may be null or unexpected.