Flutter - 페이지 이동 기술 - 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. 코드로 작성해보기

import 'package:flutter/material.dart';

// 상태 관리로 페이지 이동 처리 - IndexedStack, BottomNavigationBar 활용
void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late int _index;

  @override
  void initState() {
    // 이 함수는 객체 생성시에 단 한번 호출 되는 함수
    super.initState();
    _index = 0;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text('page move 1'),
          ),
          body: IndexedStack(
            index: _index,
            children: [PageA(), PageB(), PageC()],
          ),
          bottomNavigationBar: BottomNavigationBar(
            // 주위 !!
            // 1. 화면을 이동시킬 갯수가 맞아야 한다.
            // 2. 2 ~ 5까지만 넣을 수 있다.
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.search), label: 'search'),
              BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
              BottomNavigationBarItem(icon: Icon(Icons.person), label: 'person')
            ],
            currentIndex: _index,
            onTap: (newIndex) {
              print('newIndex : ${newIndex}');
              setState(() {
                _index = newIndex;
              });
            },
          ),
        ),
      ),
    );
  }
}

class PageA extends StatelessWidget {
  const PageA({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[500],
      child: Center(child: Text('Page A')),
    );
  }
}

class PageB extends StatelessWidget {
  const PageB({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green[500],
      child: Center(child: Text('Page B')),
    );
  }
}

class PageC extends StatelessWidget {
  const PageC({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.redAccent[500],
      child: Center(child: Text('Page C')),
    );
  }
}