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

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,
  ),
);

2. 화면 전환 기능 구현
   Bottom Navigation Bar 아이템을 클릭하면 해당 화면으로 전환되도록 구현해야 해요. 이를 위해선 _selectedIndex 변수를 사용하여 현재 선택된 아이템의 인덱스를 저장하고, _onItemTapped 함수를 통해 해당 인덱스에 맞는 화면으로 전환해줘요.

int _selectedIndex = 0;
List<Widget> _pages = [
  HomePage(),
  SearchPage(),
  ProfilePage(),
];

void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

3. 각 화면 구현
   각 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를 활용하여 멋진 앱을 만들어보세요!