Flutter의 FutureBuilder

안녕하세요, 플러터 매니아 여러분!

오늘 우리는 Flutter에서 Future<T>비동기 데이터를 올바르게 표시하는 방법에 대해 자세히 알아볼 것입니다 .FutureBuilder

우리 모두는 Future<T>굉장하다는 것을 압니다. Threads 그것은 우리가 그것에 대해 생각하지 않고 서버에서 데이터를 가져오는 것과 같은 비동기 작업을 할 수 있게 해줍니다 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();
        },
      );

일반적 으로 메서드 내부에 있고 Future<T>메서드 가 여러 번 호출될 수 있다는 것을 알고 있으므로 내부에 생성해서는 안 됩니다.FutureBuilder.FutureBuilderbuildbuildFuture<T>

Future<T>내부 메소드를 생성하면 호출될 build때마다 다시 생성됩니다 . build아마도 당신이 원하는 것이 아닐 것입니다.

그래서 생성할 곳futures?

미래를 생성하거나 업데이트하기에 이상적인 장소는 등등과 같은 위젯의 라이프사이클 메서드 initState, didUpdateWidget, didChangeDependencies또는 그 이외의 장소 입니다.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();
      },
    );
  }
}

행복한 코딩!!