플러터 (flutter) addPostFrameCallback과 Future.delayed

이번에 회사 프로젝트로 Flutter를 진행 중에 [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 107 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views. 에러를 맞이하게 되었다. 그래서 이 문제를 해결하다가 addPostFrameCallback과 Future.delayed을 알게 되어 정리를 해본다.

ScrollController not attached to any scroll views 에러,

이 에러는 레이아웃이 완전히 렌더링이 되지 않아 ScrollController가 어떤 스크롤 뷰에도 연결이 되어있지 않을 때 발생한다.

해결 방법

두 가지의 방법이 있다

1) Future.delayed

@override
  void initState() {
    super.initState();

     Future.delayed(const Duration(milliseconds: 300), () async {
       //여기에 하고자 하는 동작을 넣으면 된다.
     });
  }

2) addPostFrameCallback

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      //여기에 하고자 하는 동작을 넣으면 된다.
    });
  }

두 가지의 방법 모두 해결은 가능하지만 차이점이 있다.

1) WidgetBinding.instance.addPostFrameCallback은 현재 프레임이 그려진 후 호출 된다. Futrue.delayed는 사용자가 입력한 일정 시간이 지난 후에 호출이 된다.

2) addPostFrameCallback은 콜백 함수만을 매개변수로 받고 반환값이 없다. Future.delayed는 작업을 수행하는 함수와 지연 시간을 매개 변수로 받고 Future 객체를 반환한다.

표로 두 방법의 차이점과 장단점을 요약해보자

방법	호출 시기	매개변수	장점	단점
addPostFrameCallback	현재 프레임이 그려진 후	콜백 함수	레이아웃과 렌더링이 완료된 후 작업 가능	1) 현재 프레임이 그려진 후 작업이 수행되어서 작업 속도가 늦어짐 2) 콜백 함수에서 예외가 발생하면 처리 불가능
Future.delayed	사용자가 입력한 일정 시간이 지난 후	함수와 지연 시간	1) 예정된 시간에 작업 수행 가능 2) Future 객체를 반환하므로, 비동기 작업을 쉽게 구현	레이아웃과 렌더링이 완료되지 않았더라도 작업이 수행될 수 있음

마치며

addPostFrameCallback과 Future.delayed에 대하여 알아볼 수 있는 시간이었고, 둘 다 근본적인 문제를 해결할 수 있지만, 그래도 상황에 맞도록 사용하는 연습을 해야겠다. 레이아웃과 렌더링이 꼭 완료되어야 하면 addPostFrameCallback, 일정 시간 지난 후 작업을 해야 하는 것이면 Future.delayed를 사용하면 될 것 같다. 더 좋은 방법이나 잘못된 점은 언제든 댓글 달아주시면 감사하겠습니다 :)