Flutter addPostFrameCallback

Page Rendering Process

Flutter의 Page Rendering Process (Frame Rendering) 아래와 같습니다.

1. Create an element (BuildContext)

2. initState

3. didChangeDependencies

4. Build

일단 페이지가 완성되고 나면(Build 완료) 다른 것을 그리게 할 수 있습니다. 만약에 initState 시점에 context를 이용해서 페이지에 무언가를 그리라고 호출 한다고 가정해보겠습니다. initState가 호출되는시점은 Page Rendering Process 도중입니다. 따라서 setState() 오류 혹은 markNeedsBuild()를 만나게 됩니다.

addPostFrameCallback

이 메소드는 프레임 렌더링이 끝난 후에 콜백을 실행하도록 예약할 수 있게 해줍니다. 이는 애니메이션을 설정하거나, UI가 완전히 렌더링된 후에 어떤 작업을 수행해야 할 때 유용합니다.

...

class _CounterPageState extends State<CounterPage> {
  int myCounter = 0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      context.read<Counter>().Increment();
      myCounter = context.read<Counter>().counter + 10;
    });
  }
  
...

원하는 작업을 UI가 완전히 그려진 이후에 수행하려는 경우 유용합니다. 예를 들어, Snackbar를 표시하거나, 다이얼로그를 보여주거나, 다른 페이지로 이동하는 등의 작업을 수행할 수 있습니다. 이러한 작업은 일반적으로 UI가 완전히 로드된 후에만 수행할 수 있습니다.

동일한 효과를 내는 다른 방법

1. // Future.delayed(Duration(seconds: 0) {})

@override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 0), () {
      context.read<Counter>().Increment();
      myCounter = context.read<Counter>().counter + 10;
    });
  }
  

2. // Future.microtask(() {})

@override
  void initState() {
    super.initState();
    Future.microtask(() {
      context.read<Counter>().Increment();
      myCounter = context.read<Counter>().counter + 10;
    });
  }

Flutter version 3.0의 addPostFrameCallback

Flutter version 3.0으로 업그레이드 된 후 addPostFrameCallback method 호출 방식에 변화가 생겼습니다.

version 3.0 이전 (! operator 적용 필요)

WidgetsBinding.instance!.addPostFrameCallback((_) {});

version 3.0 이후 (! operator 적용 불필요)

WidgetsBinding.instance.addPostFrameCallback((_) {});