[내배캠 앱창업] Day 37 - 당근(?)마켓 앱 Home 탭 구조

1. 오늘 배운 것 정리

a) 탭 구조 - BottomNavigationBar

마켓 앱의 하단 탭 구조는
BottomNavigationBar으로 구성

Scaffold(
  body: 화면 영역,
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: '홈',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.chat),
        label: '채팅',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: '마이',
      ),
    ],
  ),
);

bottomNavigationBar : 앱 하단 고정 탭 UI

BottomNavigationBarItem : 각 탭의 아이콘 + 라벨 정의

b) 탭 선택 상태 관리 - currentIndex

탭이 눌렸을 때 어떤 화면을 보여줄지 결정하기 위해
선택된 인덱스를 상태로 관리

int currentIndex = 0;

BottomNavigationBar(
  currentIndex: currentIndex,
  onTap: (index) {
    setState(() {
      currentIndex = index;
    });
  },
);

currentIndex : 현재 선택된 탭

onTap : 탭 클릭 시 인덱스 변경

c) 탭별 화면 구성 방식 – IndexedStack

탭에 따라 화면을 전환할 때
강의에서는 IndexedStack 구조를 사용

IndexedStack(
  index: currentIndex,
  children: [
    HomeTab(),
    ChatTab(),
    MyTab(),
  ],
);

index 값에 따라 보여줄 위젯 결정

다른 탭의 위젯은 사라지지 않고 유지됨

탭 이동 시에도 상태가 유지되는 구조

2. 탭 구조 전체 정리

Scaffold(
  body: IndexedStack(
    index: currentIndex,
    children: [
      HomeTab(),
      ChatTab(),
      MyTab(),
    ],
  ),
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: currentIndex,
    onTap: (index) {
      setState(() {
        currentIndex = index;
      });
    },
    items: [...],
  ),
);

하단 탭 UI → BottomNavigationBar

탭별 화면 전환 → IndexedStack

페이지 이동(Navigator) 없이 앱의 메인 구조 구성

3. 오늘 학습 요약

마켓 앱의 기본 탭 구조는
BottomNavigationBar 기반

탭 화면은 리스트가 아니라 IndexedStack으로 관리

탭 전환은 “페이지 이동”이 아니라 화면 전환

내일도 화이팅!!