[Flutter] 16. 모두의 마켓 앱 만들기 (1) - BottomNavigationBar 및 화면 전환 상태 관리 (구조)

김주희

Jun 08, 2025

[Flutter] 16. 모두의 마켓 앱 만들기 (1) - BottomNavigationBar 및 화면 전환 상태 관리 (구조)

디렉토리 생성 및 models 파일 복사

라이브러리 연결

intl : 숫자 포맷 시 ,이나 $ 같은거 붙는 거에 대한 라이브러리 - 국제화할 때 많이 쓴다.

screens 디렉토리 내부 파일 및 디렉토리 생성

네비게이션 바 위의 화면을 바꿔치기하면서 화면을 변경 → 변경하지 않는 화면 = main_screens.dart가 될 예정

메인 화면 변경 HomePage → MainScreens

bottomNavigationBar 속성 설정

Scaffold body 속성 IndexedStack

stack으로 쌓아올릴거고 ~~~? 니까 (1:05:00~?)

indexedStack은 순서대로 stack이 빠지는게 아니고 인덱스로 처리됨

화면 전환하는 상태 관리

복잡한거 아니고 데이터를 관리하는 것도 아니고 화면전환하는 상태 관리하는 것이니까 그냥 riverpod말고 stateful로 관리

화면 전환되면 동네생활로 네비게이션바가 전환되어야 하므로

바텀네비게이션바 클릭시 화면이 전환된다.

화면 전환 = UI에 관련된거니까 데이터 바인딩 관련은 지금 당장X일단 상수로 꽂아두고 그림만 먼저 그리기

버튼 눌렸을때 액션X 근데 화면전환은 UI에 관련된거니까 얘는 해야됨

바텀 네비게이션바 클릭 시 선택되도록 하기

어떤 인덱스가 선택되어있는지 현재 인덱스에 대한 속성

BottomNavigationBar 여러 속성 추가

BottomNavigationBar 메서드로 분리

여기서만 쓸건데 코드가 여기 전부 있으면 복잡하니까 메서드로 분리한다.

근데 이때 상태는 무조건 행위를 만들어주는 것이 좋다.

나머지 BottomNavigationBar 아이템 완성


import 'package:carrot_market/screens/chatting/chatting_screen.dart';
import 'package:carrot_market/screens/home/home_screen.dart';
import 'package:carrot_market/screens/my_carrot/my_carrot_screen.dart';
import 'package:carrot_market/screens/near_me/near_me_screen.dart';
import 'package:carrot_market/screens/neighborhood_life/neighborhood_life_screen.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MainScreens extends StatefulWidget {
  @override
  State<MainScreens> createState() => _MainScreensState();
}

class _MainScreensState extends State<MainScreens> {
  int selectedIndex = 0;

  void selectBottomMenu(int index) {
    selectedIndex = index;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: selectedIndex,
        children: [
          HomeScreen(),
          NeighborhoodLifeScreen(),
          NearMeScreen(),
          ChattingScreen(),
          MyCarrotScreen(),
        ],
      ),
      bottomNavigationBar: _bottomNavigationBar(),
    );
  }

  BottomNavigationBar _bottomNavigationBar() {
    return BottomNavigationBar(
      //showSelectedLabels: false,
      //showUnselectedLabels: false,
      type: BottomNavigationBarType.fixed,
      selectedFontSize: 12.0,
      unselectedFontSize: 12.0,
      selectedItemColor: Colors.orange,
      unselectedItemColor: Colors.black54,
      currentIndex: selectedIndex,
      onTap: selectBottomMenu,
      items: [
        BottomNavigationBarItem(label: "홈", icon: Icon(CupertinoIcons.home)),
        BottomNavigationBarItem(label: "동네생활", icon: Icon(CupertinoIcons.square_on_square)),
        BottomNavigationBarItem(label: "내근처", icon: Icon(CupertinoIcons.placemark)),
        BottomNavigationBarItem(label: "채팅", icon: Icon(CupertinoIcons.chat_bubble_2)),
        BottomNavigationBarItem(label: "나의당근", icon: Icon(CupertinoIcons.person)),
      ],
    );
  }
}

build 로그 찍어보기

화면 하나 들어가는데 모든 화면을 build하는 문제 → 리팩토링하면서 정리해야됨 이렇게 되면 통신이 개느려짐

성능개선

클릭된 것만 객체가 뜨면 됨

상태가 하나 더 필요하다.

const rebuild 될 때 기존에 있으면 다시 안그려지고

loadPages 리스트에 0만 있는 상태였다가 나의 당근을 클릭하면 index가 4가 들어오게 되고 loadPages가 4를 contain하고 있지 않으므로 add를 통해 [0,4]가 된다. 그리고 setState로 rebuild되는데 IndexStack의 children에서 loadPages가 0을 가지고 있지만 HomeScreen은 이미 new되어서 존재하는 객체이므로 재사용하고 나머지 1부터 3까지는 존재하지 않으니 Contianer로 뜨다가 4번 인덱스는 존재하므로 MyCarrotScreen을 new해서 build하게 된다.

const를 못 쓰는 경우 → 초기화할 때 값을 변경해둬야 하는 경우? 2:45:00~?

다른 방법


import 'package:carrot_market/screens/chatting/chatting_screen.dart';
import 'package:carrot_market/screens/home/home_screen.dart';
import 'package:carrot_market/screens/my_carrot/my_carrot_screen.dart';
import 'package:carrot_market/screens/near_me/near_me_screen.dart';
import 'package:carrot_market/screens/neighborhood_life/neighborhood_life_screen.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MainScreens extends StatefulWidget {
  @override
  State<MainScreens> createState() => _MainScreensState();
}

class _MainScreensState extends State<MainScreens> {
  int selectedIndex = 0;
  final List<Widget?> _screens = List.filled(5, null);

  @override
  void initState() {
    super.initState();
    _screens[0] = HomeScreen(); // 처음은 미리 생성
  }

  void selectBottomMenu(int index) {
    if (_screens[index] == null) {
      _screens[index] = _buildScreen(index); // 처음 클릭 시 생성
    }

    setState(() {
      selectedIndex = index;
    });
  }

  Widget _buildScreen(int index) {
    switch (index) {
      case 0:
        return HomeScreen();
      case 1:
        return NeighborhoodLifeScreen();
      case 2:
        return NearMeScreen();
      case 3:
        return ChattingScreen();
      case 4:
        return MyCarrotScreen();
      default:
        return Container();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: selectedIndex,
        children: _screens.map((screen) => screen ?? Container()).toList(),
      ),
      bottomNavigationBar: _bottomNavigationBar(),
    );
  }

  BottomNavigationBar _bottomNavigationBar() {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      selectedFontSize: 12.0,
      unselectedFontSize: 12.0,
      selectedItemColor: Colors.orange,
      unselectedItemColor: Colors.black54,
      currentIndex: selectedIndex,
      onTap: selectBottomMenu,
      items: const [
        BottomNavigationBarItem(label: "홈", icon: Icon(CupertinoIcons.home)),
        BottomNavigationBarItem(label: "동네생활", icon: Icon(CupertinoIcons.square_on_square)),
        BottomNavigationBarItem(label: "내근처", icon: Icon(CupertinoIcons.placemark)),
        BottomNavigationBarItem(label: "채팅", icon: Icon(CupertinoIcons.chat_bubble_2)),
        BottomNavigationBarItem(label: "나의당근", icon: Icon(CupertinoIcons.person)),
      ],
    );
  }
}

See more posts