Flutter 및 Dart은 본질적으로 비동기식입니다. Dart'sFuture는 스레드나 교착 상태에 대한 걱정 없이 I/O를 처리할 때 매우 원활한 환경을 제공합니다.

A Future is used to represent a potential value, or error, that will be available at some time in the future.

Future의 수신자는 사용 가능한 값이나 오류를 처리하는 콜백을 등록할 수 있습니다.

FutureBuilder가 필요한 이유!

build 메서드에서 위젯을 반환하려고 하지만 위젯에 필요한 데이터가 async 함수에서 온다고 가정합니다.

class MyWidget extends StatelessWidget {
  @override
  Widget build(context) {
    yourAsyncFetch().then((data) {
      return ...yourStuff(with the data);
    });
  }
}

가져오기가 HTTP 호출, SQLite에 대한 호출 또는 Future 를 반환하는 일반적인 호출일 수 있는 경우 이 접근 방식은 실제로 작동하지 않습니다.

위젯build 메서드는 동기식이며 데이터를 가져오는 동안 기다리지 않기 때문입니다.



여기에서 FutureBuilder( FutureBuilder<T> )가 등장합니다.

수정

AFutureBuilder는 Future와 빌더(위젯의 빌드 메서드에 의해 호출되는 대리자)를 인수로 사용합니다. 빌더는 즉시 호출되며 미래가 데이터 또는 오류로 해결될 때 다시 호출됩니다.
Future를 구성할 때 build 중에 AFutureBuilder를 생성하면 안 됩니다. future가 FutureBuilder와 동시에 생성되면 FutureBuilder의 부모가 다시 빌드될 때마다 비동기 작업이 다시 시작됩니다.
AsyncSnapshot<T>는 단순히 해당 데이터/오류 상태를 나타냅니다.

Future<String> yourAsyncFetch() => Future.delayed(Duration(seconds: 3), () => "Text coming after 3 seconds");

class MyWidget extends StatelessWidget {
  @override
  Widget build(context) {
    return FutureBuilder<String>(
      future: yourAsyncFetch(),
      builder: (context, AsyncSnapshot<String> snapshot) {
        if (snapshot.hasData) {
          return Text(snapshot.data); // Display the data from yourAsyncFetch() function after 3 seconds
        } else {
          return CircularProgressIndicator(); // Display a Circular Progress Indicator if the data is not fetched
        }
      }
    );
  }
}

짜잔! 문제 해결됨.

성능에 미치는 영향

FutureBuilder는 StatefulWidget가 _snapshot인 state일 뿐입니다. 초기 상태는 _snapshot = AsyncSnapshot<T>.withData(ConnectionState.none, widget.initialData);입니다.

그것은 우리가 보내는 미래를 구독하고 그것을 기반으로 상태를 업데이트합니다.

widget.future.then<void>((T data) {
    if (_activeCallbackIdentity == callbackIdentity) {
       setState(() {
          _snapshot = AsyncSnapshot<T>.withData(ConnectionState.done, data);
       });
    }
}, onError: (Object error) {
    if (_activeCallbackIdentity == callbackIdentity) {
       setState(() {
          _snapshot = AsyncSnapshot<T>.withError(ConnectionState.done, error);
       });
    }
});

따라서 FutureBuilder는 우리가 일반적으로 수행하는 래퍼일 뿐이므로 성능에 영향을 미치지 않습니다.

결론

이상입니다 여러분 👨‍🏫 끝까지 읽어주셔서 감사합니다. 이것이 FutureBuilder와 그 실제 응용 프로그램에 대한 더 나은 아이디어를 얻는 데 도움이 되었기를 바랍니다. 제가 놓친 것이 있으면 댓글로 알려주시면 브레인스토밍 세션을 가질 수 있습니다! 👨🏻‍💻



Flutter 개발을 배우고 탐구하려는 사람들을 위한 그룹입니다. 우리는 초보자와 프로 다트 영예를 모두 초대합니다. our Discord에 가입하고 우리와 함께 즐기십시오.

FutureBuilder에 대한 도움이 필요하다고 생각되는 사람과 이러한 리소스를 공유하는 것을 잊지 마십시오. 피스 아웃. ✌🏼