FutureBuilder we Flutterze

Witaj, kolego entuzjasta trzepotania!

Dzisiaj dowiemy się więcej o tym, jak poprawnie wyświetlać dane asynchroniczne z Future<T>in FutureBuilderflutter.

Wszyscy wiemy, Future<T>jest super. Pozwala nam wykonywać pracę asynchroniczną, taką jak pobieranie danych z serwera, bez zastanawiania się Threads iw Deadlocksogóle.

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

Musimy być ostrożni podczas dostarczania Future<T>in FutureBuilder.Ponieważ FutureBuilderwill zwykle znajduje się wewnątrz metody buildi wiemy, że buildmetoda może być wywoływana wiele razy, nie wolno nam tworzyć Future<T>jej wewnątrz.

Jeśli utworzymy metodę Future<T>wewnętrzną build, zostanie ona utworzona ponownie za każdym razem, gdy buildzostanie wywołana. To chyba nie jest to, czego chcesz.

Więc gdzie tworzyćfutures?

Idealnym miejscem do tworzenia lub aktualizowania przyszłości są metody cyklu życia widżetu, takie jak initState, didUpdateWidget, didChangeDependenciesitp. Lub dowolne miejsce inne niżbuild.

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

Miłego kodowania!!