Dio package for advanced HTTP in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Dio instance for HTTP requests.

Flutter

final dio = Dio([1]);

Drag options to blanks, or click blank then click option'

AOptions()

BBaseOptions()

CRequestOptions()

DHttpClient()

Attempts:

3 left

💡 Hint

Common Mistakes

Using HttpClient instead of BaseOptions.

Trying to pass Options directly to Dio constructor.

The Dio constructor accepts BaseOptions to configure base URL, headers, and more.

2fill in blank

medium

Complete the code to make a GET request using Dio.

Flutter

final response = await dio.[1]('https://example.com/data');

Drag options to blanks, or click blank then click option'

Aget

Bput

Cpost

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using post instead of get for fetching data.

Confusing put or delete with get.

Use get method to fetch data from a URL with Dio.

3fill in blank

hard

Fix the error in the code to add a request interceptor in Dio.

Flutter

dio.interceptors.add(InterceptorsWrapper(onRequest: (options, handler) async {
  options.headers['Authorization'] = 'Bearer [1]';
  return handler.next(options);
}));

Drag options to blanks, or click blank then click option'

A12345

Bawait getToken()

Cnull

Dtoken

Attempts:

3 left

💡 Hint

Common Mistakes

Using an async call directly inside header assignment.

Assigning null or a number instead of a string token.

The options.headers expects a string token. Use a variable token holding the token string.

4fill in blank

hard

Fill both blanks to create a POST request with JSON data using Dio.

Flutter

final response = await dio.[1]('https://example.com/login', data: [2]);

Drag options to blanks, or click blank then click option'

Apost

B{'username': 'user', 'password': 'pass'}

C[1, 2, 3]

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using get method instead of post.

Passing a list instead of a map for JSON data.

Use post method to send data. The data parameter accepts a map for JSON body.

5fill in blank

hard

Fill all three blanks to handle Dio errors with try-catch.

Flutter

try {
  final response = await dio.[1]('https://example.com/data');
  print(response.[2]);
} on DioException catch ([3]) {
  print('Request failed');
}

Drag options to blanks, or click blank then click option'

Aget

Bdata

Ce

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong HTTP method.

Accessing response incorrectly.

Using wrong variable name in catch.

Use get to fetch data. Access response body with data. Catch error with variable e.