페이지 이동 기술 - 1 (상태 관리)

학습 목표

1. IndexedStack 위젯이란?

2. BottomNavigationBar 와 BottomNavigationBarItem 위젯이란?

3. 코드 작성 해보기

 

1. IndexedStack 위젯이란?

IndexedStack은 Flutter에서 제공하는 위젯 중 하나로, 자식 위젯 중 하나만을 한 번에 표시하는 스택입니다. 기본 Stack 위젯과의 주요 차이점은 Stack이 자신의 자식을 겹쳐서 표시하는 반면 IndexedStack은 특정 인덱스에 있는 하나의 자식만 화면에 표시하고 나머지는 숨깁니다.

 

주요 특징

• 단일 자식 표시 - 한 번에 하나의 자식 위젯만 표시되며, 나머지는 화면에서 숨겨집니다.
• 인덱스 기반 선택 - index 속성을 사용하여 현재 화면에 표시되어야 할 자식의 인덱스를 지정합니다. 이 인덱스를 변경하면 새로운 자식이 화면에 표시되며 이전에 표시되던 자식은 숨겨집니다.
• 성능 - IndexedStack은 미리 모든 자식 위젯을 로드하기 때문에 자식 간의 전환 시 추가적인 빌드나 로드 없이 빠르게 전환할 수 있습니다.

IndexedStack(
  index: _selectedIndex,
  children: [
    PageOne(),
    PageTwo(),
    PageThree(),
  ],
)

 

2. BottomNavigationBar 와 BottomNavigationBarItem 위젯이란?

BottomNavigationBar와 BottomNavigationBarItem은 Flutter 애플리케이션의 하단에 위치하는 탐색 바를 구현하기 위한 위젯입니다.

1. BottomNavigationBar BottomNavigationBar는 Flutter에서 제공하는 위젯으로, 화면 하단에 탐색 링크를 표시하는 탐색 바를 구현할 때 사용됩니다. 이 탐색 바는 주로 애플리케이션의 주요 탐색 또는 액션 링크를 보여주는데 사용됩니다. 여러 개의 항목(BottomNavigationBarItem)을 포함할 수 있으며, 사용자가 항목을 탭하면 해당 항목에 연결된 화면 또는 기능으로 이동하게 됩니다. 단 항목 수는 일반적으로 2~5개의 항목을 포함합니다. 선택된 항목은 강조 표시되어 사용자에게 현재 위치를 나타냅니다.
2. BottomNavigationBarItem BottomNavigationBarItem은 BottomNavigationBar 위젯의 각 항목을 나타내는 위젯입니다. 주로 아이콘(icon)과 텍스트 레이블(label)로 구성되며, 선택될 때의 아이콘(activeIcon)을 별도로 지정할 수도 있습니다. 이 외에도 배경색(backgroundColor)을 지정하여 각 항목의 배경색을 변경할 수 있습니다

BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.business),
      label: 'Business',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.school),
      label: 'School',
    ),
  ],
)

 

3. 코드 작성 해보기