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.

Practice

1. What is the primary purpose of the Dio package in Flutter?

easy

A. To manage local databases

B. To create UI animations

C. To make HTTP requests easily with advanced features

D. To handle user input gestures

Solution

1. Step 1: Understand Dio's role

   Dio is designed as an HTTP client to simplify network calls in Flutter apps.

2. Step 2: Compare with other options

   Other options like UI animations or database management are unrelated to Dio's purpose.

3. Final Answer:

   To make HTTP requests easily with advanced features -> Option C

4. Quick Check:

   Dio = HTTP client [OK]

Hint: Dio is all about HTTP requests, not UI or storage [OK]

Common Mistakes:

• Confusing Dio with UI or database packages
• Thinking Dio handles gestures
• Assuming Dio is for local storage

2. Which of the following is the correct way to create a Dio instance with a base URL of 'https://api.example.com'?

easy

A. var dio = Dio(BaseOptions(baseUrl: 'https://api.example.com'));

B. var dio = Dio('https://api.example.com');

C. var dio = Dio().setBaseUrl('https://api.example.com');

D. var dio = Dio(baseUrl: 'https://api.example.com');

Solution

1. Step 1: Check Dio instance creation syntax

   Dio requires BaseOptions to set baseUrl during initialization.

2. Step 2: Validate each option

   var dio = Dio(BaseOptions(baseUrl: 'https://api.example.com')); uses BaseOptions correctly; others misuse constructor or methods.

3. Final Answer:

   var dio = Dio(BaseOptions(baseUrl: 'https://api.example.com')); -> Option A

4. Quick Check:

   BaseOptions sets baseUrl in Dio [OK]

Hint: Use BaseOptions to set baseUrl when creating Dio [OK]

Common Mistakes:

• Passing URL directly to Dio constructor
• Using nonexistent setBaseUrl method
• Setting baseUrl as a direct parameter

3. Given the code snippet:

var dio = Dio();
var response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
print(response.data['id']);

What will be printed?

medium

A. 1

B. null

C. An error message

D. The entire JSON response

Solution

1. Step 1: Understand the GET request

   The code fetches post with id 1 from the API.

2. Step 2: Access response data

   response.data['id'] accesses the 'id' field, which is 1.

3. Final Answer:

   1 -> Option A

4. Quick Check:

   response.data['id'] = 1 [OK]

Hint: Access response.data keys to get JSON fields [OK]

Common Mistakes:

• Expecting entire JSON instead of specific field
• Not awaiting the async call
• Using wrong key to access data

4. Identify the error in this Dio request code:

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

medium

A. Dio instance not created properly

B. Incorrect URL format

C. response.data is not a valid property

D. Missing await keyword for async call

Solution

1. Step 1: Check async call usage

   dio.get returns a Future; it must be awaited to get response.

2. Step 2: Identify missing await

   Code lacks await, so response is a Future, not the actual response object.

3. Final Answer:

   Missing await keyword for async call -> Option D

4. Quick Check:

   Async calls need await [OK]

Hint: Always await async Dio calls to get response [OK]

Common Mistakes:

• Forgetting await on async requests
• Assuming dio.get is synchronous
• Trying to access data on Future object

5. How can you add a custom header 'Authorization: Bearer token123' to all requests made by a Dio instance?

hard

A. Add headers directly in each get/post call only

B. Set headers in BaseOptions when creating Dio instance

C. Use dio.addHeader('Authorization', 'Bearer token123') method

D. Modify the response interceptor to add headers

Solution

1. Step 1: Understand global headers setup

   Headers for all requests are set in BaseOptions.headers when creating Dio.

2. Step 2: Evaluate options

   Setting headers in BaseOptions applies them globally to all requests; adding them per get/post call is request-specific; there is no addHeader method on Dio; response interceptors handle responses, not request headers.

3. Final Answer:

   Set headers in BaseOptions when creating Dio instance -> Option B

4. Quick Check:

   Global headers = BaseOptions.headers [OK]

Hint: Use BaseOptions.headers for global request headers [OK]

Common Mistakes:

• Trying to add headers via nonexistent methods
• Setting headers only per request instead of globally
• Confusing response interceptors with request headers