In Flutter, which Empty Widget is most fastest?

Flutter로 위젯을 구현하다보면 아무것도 없는 빈 위젯을 사용해야할 때가 종종 있습니다.

예를 들면, 네트워크 통신을 통해서 데이터를 가지고 올 때에 보통 다음과 같은 상태값을 가집니다.

 

1. Idle (유휴값, 보통은 초기값)
2. Loading (네트워크 통신할 때의 값)
3. Success (네트워크 통신 성공)
4. Failure (네트워크 통신 실패)

이럴 때에, Idle 값으로 사용하는 위젯은 보통 Container 아니면 SizedBox 입니다.

그런데, 문득 저 두 개의 값 중에서 빌드 속도가 가장 빠른 것은 무엇일까? 라는 궁금증이 들었습니다.

 

간단한 Flutter 프로젝트를 생성해서 위젯 테스트를 진행해보면서 확인해보겠습니다.

테스트에서 비교할 위젯은 총 3개입니다.

 

1. Container
2. SizedBox
3. SizedBox.shrink (검색을 하다보니 빌드 속도가 가장 빠르다는 얘기가 있어서 추가해보았습니다)

다음은 테스트에 사용한 테스트 코드입니다.

 

void main() async {
  testWidgets('test', (WidgetTester tester) async {
    await tester.pumpWidget( const Container());
    final Stopwatch timer = Stopwatch()..start();
    for (int index = 0; index < 500000; index += 1) {
      await tester.pump();
    }
    timer.stop();
    debugPrint('Time taken: ${timer.elapsedMilliseconds}ms');
  });
}

 

각각의 위젯들을 10번씩 돌려본 값들 중에서 최소값과 최대값을 적어보자면,

 

1. Container : 8278ms, 8019ms
2. SizedBox: 8144ms, 8023ms
3. SizedBox.shrink: 8135ms, 8055ms

 

결과를 살펴보면, 빌드 속도 최대값이 가장 큰 위젯은 Container이고, 최소값이 가장 작은 위젯도 Container 였습니다.

하지만, 50만번이나 돌렸음에도 차이가 n00ms 정도로 미미해서 차이를 따지는 것이 의미가 없을 듯 합니다.