Añadir dio en Flutter para realizar peticiones http/https

Tiempo de lectura: 2 minutos

Dio es una biblioteca HTTP poderosa y flexible para Dart y Flutter. Proporciona una API fácil de usar para realizar solicitudes HTTP y manejar respuestas, similar a otras bibliotecas HTTP como axios en JavaScript. Dio es particularmente popular en la comunidad Flutter debido a sus características avanzadas, como la configuración de solicitudes, manejo de respuestas, interceptores, y soporte para cancelación de solicitudes, entre otras.

Añadir la Dependencia Dio

flutter pub add dio

Paso 3: Configurar y Usar Dio

Vamos a crear un archivo Dart para manejar las solicitudes HTTP usando Dio. Puedes crear una carpeta llamada services y dentro de ella, un archivo api_service.dart.

Estructura del Proyecto

my_project/
├── lib/
│   ├── main.dart
│   ├── services/
│   │   └── api_service.dart
└── pubspec.yaml

Código en api_service.dart

import 'package:dio/dio.dart';

class ApiService {
  final Dio _dio = Dio(
    BaseOptions(
      baseUrl: 'https://jsonplaceholder.typicode.com',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
    ),
  );

  ApiService() {
    _dio.interceptors.add(InterceptorsWrapper(
      onRequest: (options, handler) {
        print('Request to: ${options.uri}');
        return handler.next(options);
      },
      onResponse: (response, handler) {
        print('Response from: ${response.requestOptions.uri}');
        return handler.next(response);
      },
      onError: (DioError e, handler) {
        print('Error: ${e.message}');
        return handler.next(e);
      },
    ));
  }

  Future<Response> getPost(int id) async {
    return await _dio.get('/posts/$id');
  }

  Future<Response> createPost(Map<String, dynamic> data) async {
    return await _dio.post('/posts', data: data);
  }
}

Paso 4: Usar ApiService en tu Aplicación Flutter

Abre el archivo main.dart y usa el servicio API para realizar una solicitud.

Código en main.dart

import 'package:flutter/material.dart';
import 'services/api_service.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final ApiService apiService = ApiService();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dio Example'),
        ),
        body: FutureBuilder(
          future: apiService.getPost(1),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            } else {
              final response = snapshot.data as Response;
              return Center(child: Text(response.data.toString()));
            }
          },
        ),
      ),
    );
  }
}

Explicación de los Pasos

1. Añadir Dependencia: Se añade dio al archivo pubspec.yaml y se instala la dependencia.
2. Configurar Dio: Se crea la clase ApiService para configurar Dio y añadir interceptores. Los interceptores permiten manejar las solicitudes, respuestas y errores de manera centralizada.
3. Realizar Solicitudes HTTP: Se definen métodos en ApiService para realizar solicitudes HTTP, como obtener un post y crear un post.
4. Usar ApiService en la Aplicación: En main.dart, se utiliza FutureBuilder para realizar una solicitud HTTP y mostrar el resultado en la interfaz de usuario.