[Flutter] 위젯 간 상태 유지 IndexedStack

길위에 히피·2023년 5월 10일
0

Flutter

목록 보기
12/44

IndexdStack은 제공된 인덱스에 따라 한 번에 하나의 자식만 표시하는 위젯으로, Stack 위젯과 비슷하지만 인덱스에 따라 Widget을 전환할 수 있는 기능을 가지고 있다. 인덱스스택을 사용하면 BottomNavigationBar를 사용 해서, 페이지 전환시 마다 re-build가 되어 이전 페이지의 기록이 사라지는 현상이 발생하는데 IndexdStack을 사용하여 이를 방지할수 있다.

IndexedStack 위젯에는 다음과 같은 속성있다:

index: 표시할 자식의 인덱스를 나타내는 정수 값. 인덱스에 새 값을 설정하면 표시되는 Widget이 그에 따라 업데이트 된다.
정렬: 인덱싱된 Stack 내 Widget의 정렬을 정의하는 선택적 속성. 기본값은 AlignmentDirectional.topStart.
sizing: 인덱싱된 스택 내에서 Widget의 크기를 정의하는 선택적 속성. 기본값은 StackFit.loose로, Widget의 크기를 독립적으로 조정할 수 있다.
children: 인덱싱된 스택의 Widget을 나타내는 위젯 목록. 지정된 인덱스에 있는 위젯은 표시되고 다른 위젯은 숨겨진다.

다음은 Flutter에서 IndexedStack을 사용하는 방법의 예:

Scaffold(
  body: IndexedStack(
    index: _currentIndex,
    children: Widget[
    	Widget1(),
        Widget2(),
        Widget3()
    ],
  ),
  bottomNavigationBar: BottomNavigationBar(
    fixedColor: Colors.black,
    type: BottomNavigationBarType.fixed,
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    items: [
      BottomNavigationBarItem(
        icon: new Icon(Icons.format_list_bulleted),
        title: new Text(_l10n.tripsTitle),
      ),
      BottomNavigationBarItem(
        icon: new Icon(Icons.settings),
        title: new Text(_l10n.settingsTitle),
      )
    ],
  ),
);
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

IndexdStack 사용시 주의할 사항
IndexedStack 내의 개별 자식 위젯의 메모리 사용량을 고려하는 것이 중요하다. 자식 위젯 자체에 메모리 누수가 있거나 상당한 양의 메모리를 소비하는 경우 인덱싱된 스택과 애플리케이션의 전체 메모리 사용량에 간접적으로 영향을 미칠 수 있다.

Flutter에서 메모리 누수를 방지하려면 스트림을 닫고, 컨트롤러를 폐기하고, 더 이상 필요하지 않은 객체에 대한 참조를 해제하는 등 리소스를 적절히 관리하는 것이 좋다. 이는 인덱싱된 스택 내의 자식 위젯에도 적용된다.

또한 Flutter에는 참조되지 않는 객체를 자동으로 정리하고 메모리를 확보하는 가비지 수집기가 있으므로 모범 사례를 따르고 불필요한 참조를 유지하지 않는다면 메모리 누수 위험을 최소화할 수 있다.

요약하자면, IndexedStack을 사용한다고 해서 메모리 누수가 발생하지는 않지만 잠재적인 메모리 문제를 피하려면 하위 위젯 내에서 적절한 리소스 관리가 필수적이다.

https://ezrealdev.tistory.com/56

https://stackoverflow.com/questions/52598900/flutter-bottomnavigationbar-rebuilds-page-on-change-of-tab

profile
마음맘은 히피인 일꾼러

0개의 댓글