[flutter] 특정 위젯 rebuild에서 제외시키기: AsyncMemoizer

flutter는 수 많은 rebuild가 이뤄진다.

대표적인 예로 TextField가 있는데

TextField를 클릭만 해도 rebuild가 일어난다.

 

이런 rebuild는 좋은 역할도 많이 하지만 방해할 때도 많다.

인스타그램에서 검색뷰를 보자

검색에서 검색어 입력창을 누르면 검색결과를 보여주는 화면전환이 일어나고

검색어를 입력한 뒤에 결과리스트 스크롤을 내리면 자연스럽게 결과리스트를 보게된다.

 

이렇게 간단해보이는 뷰도 불필요한 rebuild로 인해 구현되기 어렵다.

 

나는 검색어를 입력하면

1) 데이터를 불러오는 시간
2) 2초 딜레이

 

를 진행하는 future를 선언하여 검색결과 창안의 Future.builder에 적용하였다.

위의 future이 완료되지 않으면 로딩창이 나타난다.

 

하지만 불필요한 rebuild는 future를 지속적으로 재선언하여 

검색결과를 본 다음 다시 TextField를 누르면 

rebuild가 일어나 future를 재선언하여

로딩창을 갑자기 보여주는 등 부자연스러운 모습을 보여주게 만들었다

 

결국 특정 위젯에 대해서 rebuild를 피할 수 있도록 해야했는데

그래서 발견한게 AsyncMemoizer이다

 

 

해결법

 

사용법은 간단하다

 

0. async: ^2.3.0 의존성을 설치한다.

1. AsyncMemoizer를 선언한다.

2. AsyncMemoizer의 runOnce메소드 안에 rebuild되지 않아야 하는 함수를 넣는다.

3. Future.builder에 사용한다.

//1.
final AsyncMemoizer _memoizer = AsyncMemoizer();

//2.
_fetchData(Future future) {
  return this._memoizer.runOnce(() async {
    await future;
    await Future.delayed(Duration(milliseconds: 1500));
    return 'REMOTE DATA';
  });
}

//3. 
@override
Widget build(BuildContext context) {
	
    .
    .
    .
    return Future.builder(
    	future: _fetchData(
        	원하는 future함수
            )
        .
        .
        .
    )
}

 

참고:

idlecomputer.tistory.com/326