Mostrar un loader con un stack cada vez que se carga una petición dio con Flutter

Tiempo de lectura: < 1 minuto

Hoy vamos a aprender cómo podemos mostrar un loader cada vez que se cargue una petición network usando dio y Flutter.

Lo primero que haremos es crear un LoaderNotifier, se encargará de mantener el estado del loader.

loader_notifier.dart

import 'package:flutter/material.dart';

class LoaderNotifier extends ValueNotifier<bool> {
  LoaderNotifier() : super(false);

  void showLoader() => value = true;
  void hideLoader() => value = false;
}

final loaderNotifier = LoaderNotifier();

Vamos a nuestro dio_client.dart

import 'package:dio/dio.dart';
import 'package:package/network/loader_notifier.dart';

class DioClient {
  static final Dio _dio = Dio(
    BaseOptions(
      baseUrl: "url_back",
      headers: {
        "Access-Control-Allow-Origin": "*",
        'Content-Type': 'application/json',
        'Accept': '*/*',
      },
    ),
  )..interceptors.add(InterceptorsWrapper(
      onRequest: (options, handler) async {
        // Mostrar el loader antes de realizar la solicitud
        loaderNotifier.showLoader();
        return handler.next(options);
      },
      onResponse: (response, handler) {
        // Ocultar el loader después de recibir la respuesta
        loaderNotifier.hideLoader();
        return handler.next(response);
      },
      onError: (dioError, handler) {
        // Ocultar el loader si ocurre un error
        loaderNotifier.hideLoader();
        return handler.next(dioError);
      },
    ));

  static Dio get dio => _dio;
}

Y ahora vamos a crear el stack, para ello nos vamos a main.dart y añadimos:

import 'package:flutter/material.dart';
import 'package:interferencias_escacharrado/utils/loader_notifier.dart';
import 'package:interferencias_escacharrado/network/dio_client.dart'; // Asegúrate de importar el DioClient

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // El contenido principal de tu aplicación va aquí
        Scaffold(
          appBar: AppBar(
            title: Text('Tu Aplicación'),
          ),
          body: Center(
            child: Text('Contenido principal'),
          ),
        ),
        // El loader
        ValueListenableBuilder<bool>(
          valueListenable: loaderNotifier,
          builder: (context, isLoading, child) {
            if (isLoading) {
              return Container(
                color: Colors.black54,
                child: Center(
                  child: CircularProgressIndicator(),
                ),
              );
            } else {
              return SizedBox.shrink();
            }
          },
        ),
      ],
    );
  }
}