FutureBuilder dans Flutter

Salut, ami passionné de flutter !

Aujourd'hui, nous allons en savoir plus sur la façon d'afficher correctement les données asynchrones à partir Future<T>de FutureBuilderflutter.

Nous le savons tous, Future<T>c'est génial. Cela nous a permis de faire un travail asynchrone comme récupérer des données à partir du serveur sans penser à Threads tout et Deadlocksà tout.

Future<Model> _doCalculation() async {
    // do calculation / computation asynchronously.
    ....
    return Model;
}

FutureBuilder<Model>(
        future: _doCalculationFuture,
        builder: (BuildContext context, AsyncSnapshot<Model> snapshot) {
          if (snapshot.hasData) {
            return DataWidget(snapshot.requireData);
          } else if (snapshot.hasError) {
            return ErrorWidget();
          } else {
            return CircularProgressIndicator();
          }
          return const SizedBox();
        },
      );

Nous devons être prudents lorsque nous fournissons Future<T>in FutureBuilder.Comme le FutureBuildersera généralement à l'intérieur de la buildméthode et nous savons que buildla méthode peut être appelée plusieurs fois, nous ne devons pas créer le Future<T>à l'intérieur.

Si nous créons une méthode Future<T>interne build, elle sera recréée à chaque buildappel. Ce n'est probablement pas ce que vous voulez.

Alors, où créerfutures?

L'endroit idéal pour créer ou mettre à jour un futur est les méthodes de cycle de vie d'un widget tel que initState, didUpdateWidget, didChangeDependenciesetc. ou tout autre endroit quebuild.

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  late Future<Model> _doCalculationFuture;

  @override
  void initState() {
    super.initState();
    _doCalculationFuture = _doCalculation();
  }

  Future<Model> _doCalculation() async {
    return await Future<Model>.delayed(
      const Duration(seconds: 2),
      () => Model(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Model>(
      future: _doCalculationFuture,
      builder: (BuildContext context, AsyncSnapshot<Model> snapshot) {
        if (snapshot.hasData) {
          return DataWidget(snapshot.requireData);
        } else if (snapshot.hasError) {
          return ErrorWidget();
        } else {
          return CircularProgressIndicator();
        }
        return const SizedBox();
      },
    );
  }
}

Bon codage !!