0

En varías pantallas en ocasiones se requiere de la descarga de un PDF para su vista en la app. Para indicarle al usuario que se esta realizando la descarga, se utiliza showDialog con un CircularProgressIndicator indicando que se esta realizando la descarga, esto funciona sin problemas hasta el momento.

Actualmente globalice dicha acción en un archivo y paso por parámetro el BuildContext, que al parecer no es muy recomendable sobre todo para lo que se llama clean architecture, por lo que quiero hacerlo lo mejor posible y sobre todo optimo por si en un futuro se desea actualizar diseño o cosas por el estilo.

funcionamiento general de mi viewPDF

Future<void> viewPDF({ @required BuildContext context, @required DataPDF dataPDF}) async {

  final String npdf =  dataPDF.id;
  final path = (await getApplicationDocumentsDirectory()).path;

  File archivo = File('$path/$npdf.pdf');
  
  // verificar existencia del archivo en el dispositivo
  if (await archivo.exists()) {

    final data = {
      // datos de PDF a enviar a otra pantalla...
      "pathPDF":archivo.path};
    Navigator.pushNamed(context, 'viewPdf', arguments: data);
    
  }else{

    final result = await _descargando(context, ApiService.downPDF(npdf));
    print('descarga finalizada');
    
    if (result['ok']) {
      
      final data = {
        // datos de PDF a enviar a otra pantalla...
        "pathPDF": result['archivo'].path};

      Navigator.pushNamed(context, 'viewPdf', arguments: data);
    }else{
      _messageAlert( context, result["archivo"] );
    }
  
  }
}

El showDialog contiene un FutureBuilder para ayudar a saber cuando la descarga a finalizado y así saber cuando dejar de mostrarlo

Future<Map<String, dynamic>> _descargando(BuildContext context, Future future) async {
  Map<String, dynamic> result;
  await showDialog(
    barrierDismissible: false,
    context: context,
    builder: (context){
      return AlertDialog(
        title: Text('Descargando..'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            FutureBuilder(
              future: future,
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.hasData) {
                  result = snapshot.data;
                  
                  _dismissWidget(context);  
                  
                  const SizedBox.shrink();
                }
                return CircularProgressIndicator();
              },
            ),
          ],
        ),
      );
    }
  );

  return result;
}

_dismissWidget(BuildContext myContext) async {
  Future((){
    Navigator.of(myContext).pop();
  });
}

Todo esto se encuentra dentro de un archivo que se manda a llamar cada ves que se quiera descargar y visualizar un archivo PDF, pero me interesa mas que nada también poder utilizar el showDialog o solo AlertDialog para mostrar el progreso de otras posibles peticiones que tarden un poco en responder.

Actualmente intente hacerlo diferente para no enviar el BuildContext y ahora el showDialog se construye en la misma clase del Widget build() pero eso significa que tengo que crear el mismo showDialog en cada lugar que lo utilice.

lo único que se me hace que puedo separar en un Widget propio es lo del AlertDialog

AlertDialog(
  title: Text('Descargando..'),
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      FutureBuilder(
        future: future,
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.hasData) {
            result = snapshot.data;
            
            _dismissWidget(context);  
            
            const SizedBox.shrink();
          }
          return CircularProgressIndicator();
        },
      ),
    ],
  ),
);
4
  • ¿Podrías poner un ejemplo de cómo sería un caso de uso d todo lo que has puesto?
    – Manuel
    Commented el 16 oct. 2021 a las 19:11
  • @Manuel No se como que tipo de ejemplo poner, por que lo unico que se me ocurre es hacer un Widget personalizado para enviar el Future del cual el Widget mostrar el circular mientras se resuelve el Future, para esto la idea es mostrarlo parecido al showDialog encima de la pantalla que realice la llamada
    – Richard
    Commented el 17 oct. 2021 a las 15:59
  • Un ejemplo de cómo usas en alguna pantalla todo ese código que has puesto ahí. Te lo pedía porque creo, aunque no estoy seguro, que hay un error de implementación, mezclanco conceptos. Verás, el Dialog no debería saber si el futuro a acabado o no, no es su labor saber eso. Estás, a mi parecer, mezclando el controlador del estado, el estado en sí mismo y la representación del estado en forma de widget. Una aproximación más "Clean Architecture" de lo que pides sería tener un WidgetStateful que muestre un widget de loading, dependiendo de una variable booleana y que dicha variable cambie
    – Manuel
    Commented el 17 oct. 2021 a las 17:52
  • cuando ejecutes la función de obtener el pdf. Por ejemplo, variable en false -> no se muestra el loading -> se presiona botón -> variable true -> se muestra loading -> carga pdf -> variable en false -> hacer algo
    – Manuel
    Commented el 17 oct. 2021 a las 17:53

1 respuesta 1

2

Te dejo una aproximación de lo que podrías intentar.

import 'package:flutter/material.dart';

class ExamplePage extends StatefulWidget {
  const ExamplePage({Key? key}) : super(key: key);

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  bool _isLoading = false;

  Future<void> _showAndQuiteLoading() async {
    _toggleIsLoading();
    await _simulateGetPdf();
    _toggleIsLoading();
  }

  void _toggleIsLoading() {
    setState(() {
      _isLoading = !_isLoading;
    });
  }

  Future<void> _simulateGetPdf() async {
    await Future<void>.delayed(
      const Duration(seconds: 2), // fuerza a esperar dos segundo
    );
  }

  @override
  Widget build(BuildContext context) {
    return LoadingDialog(
      isLoading: _isLoading,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Example Page'),
        ),
        body: ExampleView(
          onPressed: _showAndQuiteLoading,
        ),
      ),
    );
  }
}

class ExampleView extends StatelessWidget {
  const ExampleView({
    Key? key,
    required this.onPressed,
  }) : super(key: key);

  final void Function() onPressed;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: onPressed,
        child: const Text(
          'show loading',
        ),
      ),
    );
  }
}

class LoadingDialog extends StatelessWidget {
  const LoadingDialog({
    Key? key,
    this.isLoading = false,
    required this.child,
  }) : super(key: key);

  final bool isLoading;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        if (isLoading)
          Positioned.fill(
            child: Container(
              color: Colors.black38,
              child: const Center(
                child: CircularProgressIndicator(),
              ),
            ),
          )
      ],
    );
  }
}

Como ves, hay una clase "manejadora del estado", un StatefulWidget, que se encarga de según qué valores interno maneje, mostrar en pantalla una u otra cosa. En este caso, si _isLoading está en true, muestra una pantalla de carga que no permite hacer nada. Ese podría ser tu Widget personalizado.

Por otro lado, el widget (que sería tu Dialog, creo), ahora no es consciente de cúando termina o empieza el proceso de descarga del pdf. Y es el "gestor de estado" quien decide si mostrar o no el loading.

Esto es una aproximación muy liaviana de lo que debería ser una buena gestión de estado, pero al menos, podría servirte de comienzo.

3
  • Efectivamente parece un buen inicio para reutilizar un loading y evitar un poco el uso showDialog me da una idea utilizando el Stack, realizare un par de pruebas y modificaciones para ver mejor su uso en mi caso particular.
    – Richard
    Commented el 17 oct. 2021 a las 18:49
  • Tal como lo mencionaste en el comentario de mi pregunta, mi código tiene muchas fallas o malas implementaciones, no se si se explique mejor la idea pero lo que intento es que cada botón o acción que requiera de un Future muestre el loading para evitar que el usuario intente hacer otras acciones en lo que se resuelve..
    – Richard
    Commented el 17 oct. 2021 a las 18:55
  • Me parece bien hacer un Widget con uso de Stack para mostrar el loading el cual reciba un bool (controlar el estado en un StatefulWidget) en lugar del Future para controlar la vista del loadíng, ya que pueden ser diferentes Future
    – Richard
    Commented el 17 oct. 2021 a las 18:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.