[flutter] 플러터(IndexedStack)에서 인덱스 변경시 화면을 다시 그리는 방법은 무엇인가요?

07 Dec 2023

flutter

플러터의 IndexedStack 위젯은 여러 개의 자식 위젯을 겹쳐서 보여줄 수 있는 위젯입니다. 인덱스를 변경하여 보여주는 자식 위젯을 변경할 수 있지만, 기본적으로 IndexedStack은 인덱스 변경에 따라 화면을 다시 그리지 않습니다.

하지만, 화면을 다시 그리고 싶은 경우에는 몇 가지 방법을 사용할 수 있습니다.

setState 메소드 사용: IndexedStack을 감싸고 있는 부모 위젯에서 setState 메소드를 호출하여 상태를 변경합니다. 이는 부모 위젯 전체를 다시 그리는 것이므로 IndexedStack의 자식 위젯도 함께 다시 그려집니다.

예시 코드:

int currentIndex = 0;

void changeIndex(int index) {
  setState(() {
    currentIndex = index;
  });
}

// 부모 위젯에서 IndexedStack을 사용한 예시
IndexedStack(
  index: currentIndex,
  children: [
    ChildWidget1(),
    ChildWidget2(),
    ChildWidget3(),
  ],
)

// 인덱스 변경 예시
changeIndex(1); // 인덱스 1로 변경

Visibility 위젯 사용: Visibility 위젯을 사용하여 보여줄 자식 위젯을 조건에 따라 보이거나 숨길 수 있습니다. 이때, 상태를 변경하여 Visibility 위젯의 조건을 변경하면 해당 자식 위젯이 다시 그려집니다.

예시 코드:

int currentIndex = 0;

void changeIndex(int index) {
  setState(() {
    currentIndex = index;
  });
}

// Visibility 위젯을 사용한 예시
Column(
  children: [
    Visibility(
      visible: currentIndex == 0,
      child: ChildWidget1(),
    ),
    Visibility(
      visible: currentIndex == 1,
      child: ChildWidget2(),
    ),
    Visibility(
      visible: currentIndex == 2,
      child: ChildWidget3(),
    ),
  ],
)

// 인덱스 변경 예시
changeIndex(1); // 인덱스 1로 변경

위의 두 가지 방법 중에서 적절한 방식을 선택하여 사용하면 됩니다. 어떤 방법을 선택하더라도 인덱스 변경에 따라 화면이 다시 그려지므로, 플러터의 IndexedStack을 원하는 방식으로 사용할 수 있습니다.

참고 문서:

Flutter - Rebuild Indexed Stack