Le Widget FutureBuilder dans Flutter
Le Widget FutureBuilder dans Flutter
-
Objectifs d’apprentissage :
- Comprendre le fonctionnement du Widget FutureBuilder.
- Savoir comment utiliser FutureBuilder pour gérer des opérations asynchrones dans une application Flutter.
- Apprendre à construire une interface utilisateur réactive en fonction de l’état d’une Future.
- Comprendre les différents états d’une Future et comment les gérer avec FutureBuilder.
-
Présentation
- Dans Flutter, le widget FutureBuilder est utilisé pour créer des widgets en fonction du dernier instantané d’interaction avec une Future. Il est nécessaire que la Future soit obtenue antérieurement, soit par un changement d’état, soit par un changement de dépendances. FutureBuilder est un widget qui vous aidera à exécuter une fonction asynchrone et, en fonction du résultat de cette fonction, votre interface utilisateur sera mise à jour.
- Dans Dart (Flutter), A Future est utilisé pour représenter une valeur potentielle, ou une erreur, qui sera disponible à un moment donné dans le futur . Ainsi, au moment où nous obtenons cette valeur future, nous pouvons montrer à notre utilisateur un indicateur indiquant que les données sont en cours de chargement en utilisant un indicateur de progression et faire savoir à l’utilisateur que l’application n’est pas gelée. Ainsi, la classe Future Builder prend un futur qui se terminera dans le futur et elle prend un constructeur qui sera construit une fois le futur terminé. Vous pouvez également donner un initialData qui peut être utilisé jusqu’à ce que de nouvelles données soient reçues.
- FutureBuilder est de nature Stateful, c’est-à-dire qu’il maintient son propre état comme nous le faisons dans les StatefulWidgets.
-
Structure de base de FutureBuilder
- Décomposons la structure de base d’unFutureBuilder :
Syntaxe :
FutureBuilder(
Key key,
this.future,
this.initialData,
@required this.builder,
)
FutureBuilder<T>(
future: myFuture,
builder: (Contexte BuildContext, AsyncSnapshot<T> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
// Afficher un indicateur de chargement
return CircularProgressIndicator();
} else if (snapshot .hasError) {
// Afficher un message d'erreur
return Text( 'Error: ${snapshot.error} ' ) ;
} else {
// Afficher les données
return Text( 'Data: ${snapshot.data} ' ) ; , );
