Het probleem

De meeste Flutter-apps moeten taken draaien die een paar seconden duren — data ophalen bij een API, een bestand uploaden, een betaling verwerken. Tijdens dat wachten staart de gebruiker naar een bevroren scherm zonder enig teken dat er iets gebeurt. Hij tikt nog eens op de knop, veroorzaakt dubbele verzoeken, of denkt dat de app is gecrasht.

De gebruikelijke oplossing is de laadstatus met de hand beheren: een boolean omzetten, een spinner tonen, op de future wachten, de spinner verbergen, en dan het resultaat of de fout afhandelen. Die logica komt uiteindelijk in tientallen schermen terug, elke keer net iets anders.

Veelvoorkomende pijnpunten:

  • Standaardwerk voor laadstatusbeheer dat in elk scherm wordt herhaald
  • Gebruikers die meerdere keren op knoppen tikken omdat er geen visuele terugkoppeling is
  • Weggeklikte dialogen die verweesde futures op de achtergrond laten doorlopen
  • Ongelijke foutafhandeling — sommige schermen vangen excepties af, andere crashen stilletjes

Hoe flutter_future_progress_dialog dat oplost

flutter_future_progress_dialog vervangt al dat standaardwerk door één functieaanroep. Geef je asynchrone taak mee, en het pakket toont een voortgangsdialoog die niet is weg te klikken, wacht op het resultaat, sluit de dialoog, en geeft je een typeveilig resultaat terug — Success met de waarde of Failure met de fout.

Foutafhandeling zit in het resultaattype ingebouwd, dus je vergeet nooit een exceptie af te vangen.

Wat het ondersteunt

  • Material-dialoog — showProgressDialog toont een standaard ronde Material-voortgangsindicator
  • Cupertino-dialoog — showCupertinoProgressDialog toont een activiteitsindicator in iOS-stijl
  • Adaptieve dialoog — showAdaptiveProgressDialog kiest automatisch de juiste stijl voor het huidige platform
  • Eigen dialoog-UI — geef een builder mee om de standaardindicator te vervangen door welke widget je ook nodig hebt
  • Typeveilige resultaten — ProgressDialogResult<T> is een sealed class met de varianten Success en Failure, met ondersteuning voor pattern matching en handige methodes als unwrap() en map()
  • Fouten vastleggen — Failure bevat zowel het foutobject als de stacktrace

Toepassingen in de praktijk

Betalingen verwerken

Een afrekenscherm roept een betaaldienst aan. Zonder voortgangsdialoog tikken gebruikers opnieuw op "Betalen" als er niets lijkt te gebeuren — met dubbele afschrijvingen tot gevolg. Met showProgressDialog blijft de dialoog in beeld en blokkeert ze interactie tot de betaaldienst antwoordt, waarna je met pattern matching bepaalt of je naar een bevestigings- of foutscherm navigeert.

Bestanden uploaden

Een documentscanner uploadt afbeeldingen naar een server. Bij trage verbindingen kan dat seconden duren. De upload in showAdaptiveProgressDialog verpakken geeft gebruikers meteen visuele terugkoppeling en zorgt dat de dialoog bij het platform past — Material op Android, Cupertino op iOS.

Formulieren versturen

Een formulier in meerdere stappen stuurt in de laatste stap data naar een backend. De voortgangsdialoog voorkomt dubbel versturen en geeft je een schoon Success/Failure-resultaat om te bepalen of je een succesbericht of een inline foutmelding toont.

Data synchroniseren op de achtergrond

Een CRM-app synchroniseert lokale wijzigingen met een server. Een eigen builder kan een laadanimatie in de huisstijl tonen in plaats van de standaardspinner, zodat de ervaring aansluit bij de rest van de app.

Aan de slag

Installeer het pakket:

flutter pub add flutter_future_progress_dialog

Roep daarna showProgressDialog aan met je asynchrone taak:

final result = await showProgressDialog(
  context: context,
  future: () => fetchData(),
);

switch (result) {
  case Success(:final value):
    // Gebruik de waarde
  case Failure(:final error):
    // Handel de fout af
}

Er zijn drie dialoogfuncties beschikbaar: showProgressDialog (Material), showCupertinoProgressDialog (Cupertino) en showAdaptiveProgressDialog (automatisch per platform). Alle drie accepteren een optionele builder-parameter voor een eigen UI.

Een compleet werkend voorbeeld staat in de voorbeeldmap.

Nee. De dialoog is standaard niet weg te klikken, wat verweesde futures en dubbel versturen voorkomt. De dialoog sluit vanzelf zodra de asynchrone taak klaar is.
De dialoog sluit en het resultaat komt terug als een Failure met de fout en de stacktrace. Je code kan met pattern matching op het resultaat fouten afhandelen zonder try-catch-blokken.
Ja. Gebruik showProgressDialog voor Material-stijl, showCupertinoProgressDialog voor iOS-stijl, of showAdaptiveProgressDialog om automatisch bij het platform aan te sluiten.
Ja. Geef een builder-parameter mee aan elk van de drie dialoogfuncties om de standaardvoortgangsindicator te vervangen door je eigen widget — een animatie in de huisstijl, een bericht, of welke andere Flutter-widget dan ook.
ProgressDialogResult<T> is een sealed class met twee varianten: Success<T> met de teruggegeven waarde, en Failure<T> met de fout en de stacktrace. Je kunt pattern matching van Dart gebruiken, of handige methodes als isSuccess, isError, unwrap() en map().