Dio package for advanced HTTP in Flutter

Introduction

Dio helps your app talk to the internet easily and powerfully. It manages requests and responses with extra features.

You want to fetch data from a web server with headers and parameters.

You need to handle errors like timeouts or bad responses gracefully.

You want to upload or download files with progress updates.

You want to add interceptors to modify requests or responses automatically.

You need to cancel requests if the user leaves a screen.

Syntax

Flutter

final dio = Dio();

// Making a GET request
final response = await dio.get('https://example.com/api/data',
  queryParameters: {'key': 'value'},
  options: Options(headers: {'Authorization': 'Bearer token'}),
);

// Handling response
print(response.data);

Use Dio() to create a client for HTTP calls.

Use get, post, put, etc. methods for requests.

Examples

Simple GET request to fetch posts data.

Flutter

final dio = Dio();
final response = await dio.get('https://jsonplaceholder.typicode.com/posts');
print(response.data);

POST request sending login data in the body.

Flutter

final dio = Dio();
final response = await dio.post('https://example.com/login', data: {'username': 'user', 'password': 'pass'});
print(response.data);

Adding interceptors to log requests, responses, and errors.

Flutter

final dio = Dio();
dio.interceptors.add(InterceptorsWrapper(
  onRequest: (options, handler) {
    print('Request to: ' + options.uri.toString());
    return handler.next(options);
  },
  onResponse: (response, handler) {
    print('Response status: ' + response.statusCode.toString());
    return handler.next(response);
  },
  onError: (DioError e, handler) {
    print('Error: ' + e.message);
    return handler.next(e);
  },
));

Sample App

This app uses Dio to fetch a list of posts from a public API. It shows a loading spinner while waiting, then displays the posts in a scrollable list. If loading fails, it shows an error message.

Flutter

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Dio HTTP Example')),
        body: Center(child: PostsList()),
      ),
    );
  }
}

class PostsList extends StatefulWidget {
  @override
  _PostsListState createState() => _PostsListState();
}

class _PostsListState extends State<PostsList> {
  final Dio dio = Dio();
  List<dynamic> posts = [];
  bool loading = true;
  String error = '';

  @override
  void initState() {
    super.initState();
    fetchPosts();
  }

  Future<void> fetchPosts() async {
    try {
      final response = await dio.get('https://jsonplaceholder.typicode.com/posts');
      setState(() {
        posts = response.data;
        loading = false;
      });
    } catch (e) {
      setState(() {
        error = 'Failed to load posts';
        loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    if (loading) {
      return CircularProgressIndicator();
    }
    if (error.isNotEmpty) {
      return Text(error);
    }
    return ListView.builder(
      itemCount: posts.length,
      itemBuilder: (context, index) {
        final post = posts[index];
        return ListTile(
          title: Text(post['title']),
          subtitle: Text(post['body']),
        );
      },
    );
  }
}

Important Notes

Dio supports request cancellation using CancelToken.

You can add interceptors to modify requests or handle errors globally.

Use Options to customize headers, timeouts, and response types.

Summary

Dio is a powerful HTTP client for Flutter with many features.

It simplifies making requests, handling errors, and customizing calls.

Use interceptors and options to control request and response behavior.

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