[flutter] 플러터 Scaffold에서 BottomNavigationBar를 사용하는 방법은 어떻게 되나요?
BottomNavigationBar 추가하기
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
final List<Widget> _children = [
// 각 탭에 표시할 콘텐츠 위젯들을 추가합니다
PlaceholderWidget(Colors.white),
PlaceholderWidget(Colors.deepOrange),
PlaceholderWidget(Colors.green)
];
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BottomNavigationBar 예제'),
),
body: _children[_currentIndex], // 현재 선택된 탭의 콘텐츠를 보여줍니다
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped, // 탭을 눌렀을 때 호출되는 콜백 함수를 지정합니다
currentIndex:
_currentIndex, // 현재 선택된 탭의 인덱스. 콘텐츠 위젯과 매핑됩니다
items: [
// BottomNavigationBarItem을 통해 각 탭의 아이콘과 레이블을 지정합니다
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '홈',
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
label: '알림',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: '프로필',
)
],
),
);
}
}
class PlaceholderWidget extends StatelessWidget {
final Color color;
PlaceholderWidget(this.color);
@override
Widget build(BuildContext context) {
return Container(
color: color,
);
}
}
위 예제는 Scaffold와 BottomNavigationBar를 사용하여 간단한 앱을 만드는 방법을 보여줍니다. BottomNavigationBar를 추가하는 과정에서 각 탭의 아이콘, 레이블 및 콘텐츠 위젯을 지정하여 사용자 경험을 향상시킬 수 있습니다.
원하는 대로 수정하여 다양한 스타일의 BottomNavigationBar를 만들어 보세요.
더 많은 정보는 flutter.dev를 참고해주세요.