FutureBuilder in Flutter

Hallo, lieber Flatter-Enthusiast!

Heute erfahren wir mehr darüber, wie man asynchrone Daten im Flattermodus korrekt Future<T>anzeigt FutureBuilder.

Wir alle wissen, Future<T>es ist großartig. Dadurch können wir asynchrone Arbeiten wie das Abrufen von Daten vom Server ausführen, ohne darüber nachdenken zu Threads müssen Deadlocks.

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();
        },
      );

Wir müssen bei der Bereitstellung vorsichtig sein. Future<T>Da FutureBuilder.sich die FutureBuilderMethode normalerweise innerhalb der buildMethode befindet und wir wissen, dass builddie Methode mehrmals aufgerufen werden kann, dürfen wir Future<T>sie nicht innerhalb der Methode erstellen.

Wenn wir Future<T>eine interne buildMethode erstellen, wird sie bei jedem buildAufruf erneut erstellt. Es ist wahrscheinlich nicht das, was Sie wollen.

Also, wo erstellenfutures?

Der ideale Ort zum Erstellen oder Aktualisieren einer Zukunft sind die Lebenszyklusmethoden eines Widgets wie initState, didUpdateWidget, didChangeDependenciesusw. oder ein anderer Ortbuild.

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();
      },
    );
  }
}

Viel Spaß beim Codieren!!