FutureBuilder내의 future 함수 원할때만 실행하기

Chocomilk·2021년 3월 29일
3
post-thumbnail
@override
void initState() {
  super.initState();
  
  // Assign that variable your Future.
  myFuture = getFuture();
}

@override
Widget build(BuildContext context) {
  return FutureBuilder(
      builder: myFuture, // Use that variable here.
      ...
  );
}  

위와 같은 코드에서 만약 UI변경을 위해 setState를 한다고 가정하면 Future함수가 실행된다.
해당 화면 내의 Data변화를 위해 setState를 할 수도 있지만 단순 UI만 바뀌는 경우에는 Future함수가 굳이 실행될 필요가 없다.

실행되면 불필요한 로딩시간이 발생하여 사용자에게 불편함을 줄 수 있다.

공식 문서에도 다음과 같이 되어 있다.


The future must be obtained earlier, because if the future is created at the same time as the FutureBuilder, then every time the FutureBuilder's parent is rebuilt, the asynchronous task will be restarted.


위를 해석하자면 FutureBuilder에 필요한 정보가 Future함수내에 포함되어 있기 때문에 FutureBuilder의 부모가 rebuild가 되는 경우 항상 future함수는 실행된다.
이를 피하기 위해 다음과 같은 방법으로 코드를 구성한다.

// Create an instance variable.
Future myFuture;

@override
void initState() {
  super.initState();
  
  // Assign that variable your Future.
  myFuture = getFuture();
}

@override
Widget build(BuildContext context) {
  return FutureBuilder(
      builder: myFuture, // Use that variable here.
      ...
  );
}  
  • Future속성을 갖는 myFuture변수를 정의한다.
  • initState에서 실행되었으면 하는 함수를 할당한다.
  • 그리고 FutureBuilder내의 future에 해당 future변수를 연결시켜준다.

    위와 같이 코드를 구성하게 될 경우 setState를 통해 UI의 변화를 확인할 때 FutureBuilder의 Future는 실행되지 않는다.

그럼 위의 상황과 반대로 future함수가 실행되게 하는 방법은 무엇일까?
위에서 했던 대로 myFuture라는 변수에 해당 함수를 지정하면 된다.

 setState(() {
                myFuture = getFuture();
              });

profile
어제보다 한 발짝 더 나아가려는 Flutter 개발자

1개의 댓글

comment-user-thumbnail
2022년 10월 6일

도움많이됐습니다 고맙습니다

답글 달기