FutureWidget

Introduction

Le FutureWidget est un moyen simple de rendre des Future dans vos projets Nylo Website. Il encapsule le FutureBuilder de Flutter et fournit une API plus propre avec des etats de chargement integres.

Lorsque votre Future est en cours, il affichera un chargeur. Une fois le Future termine, les donnees sont retournees via le callback child.

Utilisation de base

Voici un exemple simple d'utilisation du FutureWidget :

// A Future that takes 3 seconds to complete
Future<String> _findUserName() async {
  await sleep(3); // wait for 3 seconds
  return "John Doe";
}

// Use the FutureWidget
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
       child: FutureWidget<String>(
         future: _findUserName(),
         child: (context, data) {
           // data = "John Doe"
           return Text(data!);
         },
       ),
    ),
  );
}

Le widget gerera automatiquement l'etat de chargement pour vos utilisateurs jusqu'a ce que le Future soit termine.

Personnaliser l'etat de chargement

Vous pouvez personnaliser l'apparence de l'etat de chargement en utilisant le parametre loadingStyle.

Style de chargement normal

Utilisez LoadingStyle.normal() pour afficher un widget de chargement standard. Vous pouvez optionnellement fournir un widget enfant personnalise :

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  loadingStyle: LoadingStyle.normal(
    child: Text("Loading..."), // custom loading widget
  ),
)

Si aucun enfant n'est fourni, le chargeur par defaut de l'application Nylo Website sera affiche.

Style de chargement Skeletonizer

Utilisez LoadingStyle.skeletonizer() pour afficher un effet de chargement en squelette. C'est ideal pour afficher une interface de remplacement qui correspond a la disposition de votre contenu :

FutureWidget<User>(
  future: _fetchUser(),
  child: (context, user) {
    return UserCard(user: user!);
  },
  loadingStyle: LoadingStyle.skeletonizer(
    child: UserCard(user: User.placeholder()), // skeleton placeholder
    effect: SkeletonizerEffect.shimmer, // shimmer, pulse, or solid
  ),
)

Effets de squelette disponibles :

• SkeletonizerEffect.shimmer - Effet de miroitement anime (par defaut)
• SkeletonizerEffect.pulse - Effet d'animation pulsante
• SkeletonizerEffect.solid - Effet de couleur solide

Sans chargement

Utilisez LoadingStyle.none() pour masquer completement l'indicateur de chargement :

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  loadingStyle: LoadingStyle.none(),
)

Gestion des erreurs

Vous pouvez gerer les erreurs de votre Future en utilisant le callback onError :

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  onError: (AsyncSnapshot snapshot) {
    print(snapshot.error.toString());
    return Text("Something went wrong");
  },
)

Si aucun callback onError n'est fourni et qu'une erreur se produit, un SizedBox.shrink() vide sera affiche.

Parametres