Flutter에서는 Bottom Navigation Bar를 활용하여 화면 전환을 구현할 수 있어요. 이번 글에서는 Bottom Navigation Bar를 사용하여 화면을 전환하는 방법에 대해 알아볼게요.
- 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,
),
);
- 화면 전환 기능 구현
Bottom Navigation Bar 아이템을 클릭하면 해당 화면으로 전환되도록 구현해야 해요. 이를 위해선 _selectedIndex 변수를 사용하여 현재 선택된 아이템의 인덱스를 저장하고, _onItemTapped 함수를 통해 해당 인덱스에 맞는 화면으로 전환해줘요.
int _selectedIndex = 0;
List<Widget> _pages = [
HomePage(),
SearchPage(),
ProfilePage(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
- 각 화면 구현
각 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를 활용하여 멋진 앱을 만들어보세요!
'Flutter' 카테고리의 다른 글
Flutter 앱 배포하기: Play Store와 App Store에 앱 출시하기 (0) | 2023.10.01 |
---|---|
Flutter에서 Firestore를 이용한 stream snapshot 사용하기 (0) | 2023.10.01 |
Riverpod State Management으로 Flutter 앱 성능 최적화하기 (0) | 2023.10.01 |
Flutter로 Firebase Auth를 활용한 Google 로그인 구현하기 (0) | 2023.09.30 |
chatGPT를 파이썬으로 더 많은 기능 사용하기 openai API 이용! (1) | 2023.09.30 |
flutter alarm 알람 라이브러리 pub.dev에서 사용해보기 (0) | 2023.09.29 |
연인을 아침에 깨워보세요 커플 알람 앱 (0) | 2023.08.02 |
개인정보처리방침 (0) | 2023.07.25 |