bottom.dart
import 'package:flutter/material.dart';
import 'package:flutter_bottom/ex_page/ex01_page.dart';
import 'package:flutter_bottom/ex_page/ex02_page.dart';
// 바텀 아이템을 선택한 인덱스
int selectedIndex = 0;
List<Widget> bodyList = [Ex01Page(), Ex02Page()];
class ExBottom extends StatefulWidget {
const ExBottom({super.key});
@override
State<ExBottom> createState() => _ExBottomState();
}
class _ExBottomState extends State<ExBottom> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: bodyList[selectedIndex],
bottomNavigationBar: BottomNavigationBar(items: [
// 아이템은 2개 이상만 가능
BottomNavigationBarItem(
icon: Icon(Icons.person), label: "사람"),
BottomNavigationBarItem(
icon: Icon(Icons.chat_bubble_outline_rounded), label: "채팅"),
],
// 라벨을 지우고 싶은 경우
showSelectedLabels: false,
showUnselectedLabels: false,
// bottom navigation bar 색상 변경
backgroundColor: Colors.green,
// 선택 되었을 때 색상 변경
selectedItemColor: Colors.orange,
// 선택 되지 않은 bottom 색상 변경
unselectedItemColor: Colors.white,
// 현재 선택 된 아이템 --> currentIndex를 변수로 설정
currentIndex: selectedIndex,
// 아이템 클릭시 이벤트
onTap: (int index){
print(index);
setState(() {
selectedIndex = index;
print(selectedIndex);
});
},
),
);
}
}
page1.dart
import 'package:flutter/material.dart';
class Ex01Page extends StatelessWidget {
const Ex01Page({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
color: Colors.blue,
child: Center(child: Text("Hello world")),
);
}
}
page2.dart
import 'package:flutter/material.dart';
class Ex02Page extends StatelessWidget {
const Ex02Page({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
color: Colors.orange,
child: Center(child: Text("안녕"),),
);
}
}
바텀 네비게이션 버튼 누르면 페이지1,2 이동