본문 바로가기
Flutter

Flutter로 Bottom Navigation Bar를 활용한 화면 전환 방법

by 난타코다옹 2023. 9. 30.

목차

    Flutter에서는 Bottom Navigation Bar를 활용하여 화면 전환을 구현할 수 있어요. 이번 글에서는 Bottom Navigation Bar를 사용하여 화면을 전환하는 방법에 대해 알아볼게요.

     

    1. Bottom Navigation Bar 생성
      먼저 Bottom Navigation Bar를 생성해야 해요. Scaffold 위젯 안에 BottomNavigationBar 위젯을 추가하고, items 속성을 통해 각 Bottom Navigation Bar 아이템을 생성해줘요. 각 아이템은 Icon과 title 속성을 가지고 있어요.
    Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
    1. 화면 전환 기능 구현
      Bottom Navigation Bar 아이템을 클릭하면 해당 화면으로 전환되도록 구현해야 해요. 이를 위해선 _selectedIndex 변수를 사용하여 현재 선택된 아이템의 인덱스를 저장하고, _onItemTapped 함수를 통해 해당 인덱스에 맞는 화면으로 전환해줘요.
    int _selectedIndex = 0;
    List<Widget> _pages = [
      HomePage(),
      SearchPage(),
      ProfilePage(),
    ];
    
    void _onItemTapped(int index) {
      setState(() {
        _selectedIndex = index;
      });
    }
    1. 각 화면 구현
      각 Bottom Navigation Bar 아이템에 해당하는 화면을 구현해줘야 해요. 이를 위해선 StatefulWidget을 상속받은 클래스를 생성하고, build 함수 안에 해당 화면을 구현해줘요.
    class HomePage extends StatefulWidget {
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Center(
            child: Text('Home Page'),
          ),
        );
      }
    }
    
    class SearchPage extends StatefulWidget {
      @override
      _SearchPageState createState() => _SearchPageState();
    }
    
    class _SearchPageState extends State<SearchPage> {
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Center(
            child: Text('Search Page'),
          ),
        );
      }
    }
    
    class ProfilePage extends StatefulWidget {
      @override
      _ProfilePageState createState() => _ProfilePageState();
    }
    
    class _ProfilePageState extends State<ProfilePage> {
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Center(
            child: Text('Profile Page'),
          ),
        );
      }
    }


    이번 글에서는 Bottom Navigation Bar를 사용하여 Flutter에서 화면 전환을 구현하는 방법에 대해 알아봤어요. Bottom Navigation Bar를 사용하면 사용자가 쉽게 화면을 전환할 수 있어서 앱의 사용성을 높일 수 있어요. 이제 여러분도 Bottom Navigation Bar를 활용하여 멋진 앱을 만들어보세요!