FutureBuilder 가 계속 동작해요!

내 마음 속 통계청 오피셜, 플러터로 개발 할 때 제일 빡치는 순간 1순위
"퓨처 빌더가 지 멋대로 동작 할 때"

키보드가 올라 올 때 마다 FutureBuilder가 다시 동작해, 화면이 계속 새로고침 된다.

FutureBuilder와 TextField 가 한 화면에 있을 때, 초보 플러터 개발자들이 쉽게 만날 수 있는 문제. 이유는 간단하다. 키보드가 올라오면 화면이 새롭게 그려지면서, FutureBuilder가 비동기 작업을 또! 하는 것이다.

스마트 폰의 키보드는 컴퓨터의 그것과는 다르다. 하드웨어적으로 존재 하는 것이 아니다. 앱에서 키보드가 올라온다는 것은 곧 화면에 새로운 요소가 그려지고, build 메소드가 호출 된다는 뜻이다.

즉 우리가 문제를 해결 하기 위해선, FutureBuilder의 비동기 작업이 최초 1회만 동작 하고, 그 후엔 build 메소드가 호출 돼도 더이상 동작 하지 않아야 한다.

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의 공식 문서 내용 중 일부를 발췌 한 내용이다. build메소드가 호출 될 때 FutureBuilder 안의 future 비동기 작업도 다시 동작 하니까, 이를 피하기 위해선 future를 '일찍' 설정 하라는 내용이다.

여기서 '일찍'이란 말은 그냥 initState메소드에 넣으라는 뜻이다. initState는 위젯이 생성 될 때 최초로 '한번만' 동작하니까.

  Future<dynamic> fetchList() async => await Dio().get("http://www.naver.com");
  Future? future;
  
  @override
  void initState() {
    future = fetchList();
    super.initState();
  }

initState에서 Future 타입 변수에 비동기 작업을 할당 해주고, 이를 다시 FutureBuilder의 future 파라미터로 전달 해주면 된다.

FutureBuilder(
    future: future,
    builder: (context, snapshot) {
    ...생략...
    }
)

이제 키보드가 올라와도, FutureBuilder가 다시 동작 하지 않는다.