⭐⭐⭐⭐⭐ Реализуем сетевые запросы используя Dio в Flutter

Для реализации сетевых запросов в Flutter можно выделить такие библиотеки как: Dio, http, retrofit, Chopper. В это статье на примере разберем использование библиотеки Dio. Так же будем использовать библиотеки flutter_bloc - для state management, Get_it - для DI.

Приступим к написанию кода!

Шаг 1: Настройка библиотеки Dio

import 'package:dio/dio.dart';

class ApiService {
  final Dio dio;

  ApiService(this.dio);

  Future<Response> getData(String endpoint) async {
    try {
      final response = await dio.get(endpoint);
      return response;
    } catch (e) {
      throw Exception('Failed to fetch data');
    }
  }
}

Шаг 2: Настройка Get_it для внедрения зависимостей

import 'package:get_it/get_it.dart';
import 'package:dio/dio.dart';

final getIt = GetIt.instance;

void setup() {
  // Регистрация Dio
  getIt.registerLazySingleton<Dio>(() => Dio(BaseOptions(baseUrl: 'https://api.example.com')));

  // Регистрация ApiService
  getIt.registerLazySingleton<ApiService>(() => ApiService(getIt<Dio>()));
}

Шаг 3: Создание событий и состояний для Bloc

import 'package:equatable/equatable.dart';

class DataEvent extends Equatable {
  @override
  List<Object> get props => [];
}

class FetchDataEvent extends DataEvent {}

class DataState extends Equatable {
  @override
  List<Object> get props => [];
}

class DataLoading extends DataState {}

class DataLoaded extends DataState {
  final dynamic data;

  DataLoaded(this.data);

  @override
  List<Object> get props => [data];
}

class DataError extends DataState {
  final String message;

  DataError(this.message);

  @override
  List<Object> get props => [message];
}

Шаг 4: Реализация Bloc

import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:your_project_name/data_service.dart'; // Замени на свой путь

class DataBloc extends Bloc<DataEvent, DataState> {
  final ApiService apiService;

  DataBloc(this.apiService) : super(DataLoading());

  @override
  Stream<DataState> mapEventToState(DataEvent event) async* {
    if (event is FetchDataEvent) {
      yield DataLoading();
      try {
        final response = await apiService.getData('/data-endpoint');
        yield DataLoaded(response.data);
      } catch (e) {
        yield DataError('Failed to fetch data');
      }
    }
  }
}

Шаг 5: Использование в UI

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:get_it/get_it.dart';
import 'bloc/data_bloc.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => DataBloc(GetIt.instance<ApiService>()),
        child: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Data Fetch Example')),
      body: BlocBuilder<DataBloc, DataState>(
        builder: (context, state) {
          if (state is DataLoading) {
            return Center(child: CircularProgressIndicator());
          } else if (state is DataLoaded) {
            return Center(child: Text('Data: ${state.data}'));
          } else if (state is DataError) {
            return Center(child: Text('Error: ${state.message}'));
          }
          return Container();
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<DataBloc>().add(FetchDataEvent());
        },
        child: Icon(Icons.download),
      ),
    );
  }
}

Шаг 6: Инициализация Get_it

Вызови setup() в главном файле перед запуском приложения.

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

В этом примере используется Dio для сетевых запросов, flutter_bloc для управления состоянием и Get_it для внедрения зависимостей.

Преимущества использования библиотеки Dio в разработке мобильных приложений на Flutter:

Простота использования: Dio имеет интуитивный API, который облегчает создание и обработку HTTP-запросов (GET, POST, PUT и др.), что ускоряет процесс разработки.
Асинхронность и управление запросами: Dio поддерживает асинхронные операции с использованием Future и await, что позволяет легко управлять сетевыми запросами без блокировки UI.
Поддержка отмены запросов: Dio позволяет отменять запросы в процессе их выполнения, что полезно, если пользователю больше не нужна запрашиваемая информация (например, если он покидает экран).
Перехватчики (Interceptors): Dio предоставляет возможность добавлять перехватчики для обработки запросов и ответов (например, для логирования или автоматического обновления токенов), что упрощает реализацию повторяющихся задач.
Настройка времени ожидания (Timeouts): Dio позволяет легко настраивать время ожидания для каждого запроса, предотвращая зависание приложения при проблемах с сетью.
Поддержка сложных сценариев: Dio поддерживает работу с формами, загрузку и скачивание файлов, а также обработку больших объёмов данных, что делает его универсальным инструментом для различных типов запросов.
Кэширование: Существуют плагины для Dio, которые позволяют реализовать кэширование запросов, что улучшает производительность приложения при повторных запросах.
Поддержка настроек базового URL: Dio позволяет указать базовый URL для всех запросов, что упрощает создание HTTP-запросов к одному API.

Эти возможности делают Dio гибким и мощным инструментом для работы с сетью в приложениях Flutter.

Посмотреть подходящие вакансии для Flutter-разработчика можно тут!

Поделиться этим постом