Overview.
바텀에 네비게이션 바를 만들어 보자
- BottomNavigationBar
- IndexedStack
0. 문서
https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
https://api.flutter.dev/flutter/widgets/IndexedStack-class.html
1. BttomNavigationBar
일반적으로 3~5개 사이의 적은 수의 뷰 중에서 선택하기 위해 앱 하단에 표시되는 머티리얼 위젯입니다.
이 구성요소의 업데이트된 버전인 NavigationBar 가 있는데 , 이는 새 애플리케이션과 Material 3용으로 구성된 애플리케이션에 선호됩니다
하단 탐색 모음은 자료 위에 배치된 텍스트 레이블, 아이콘 또는 둘 다 형태의 여러 항목으로 구성됩니다. 앱의 최상위 보기 간 빠른 탐색을 제공합니다. 더 큰 화면의 경우 측면 탐색이 더 적합할 수 있습니다.
하단 탐색 모음은 일반적으로 Scaffold.bottomNavigationBar 인수 로 제공되는 Scaffold 와 함께 사용됩니다 .
하단 탐색 모음의 유형 에 따라 해당 항목이 표시되는 방식이 변경됩니다. 지정하지 않으면 항목이 4개 미만일 때 자동으로 BottomNavigationBarType.fixed 로 설정되고 그렇지 않으면 BottomNavigationBarType.shifting으로 설정됩니다 .
항목 길이 는 2개 이상이어야 하며 각 항목의 아이콘과 라벨은 null이 아니어야 합니다.
위의 설명과 같이 항목의 길이는 최소 2개 이상이여야 하며 지금은 label 도 함께 같이 넣어야 실행이 됩니다.
또한 위젯은 최대 4개까지만 가능하며 그 이상 등록시 BattomNavigationBarType 을 fixed 로 설정하면 가능합니다.
currentIndex 항목으로 선택 효과 인덱스를 실행할 수 있으며, onTap 으로 해당 인덱스를 확인할 수 있습니다.
Page1 ,2 ,3 ... 은 컬러만 지정했습니다.
import 'package:flutter/material.dart';
import 'package:online_class_3/screens/bottom_navii_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: _Home(),
);
}
}
class _Home extends StatelessWidget {
const _Home({super.key});
@override
Widget build(BuildContext context) {
return SafeArea(
child: BottomNavigationBarPage(),
);
}
}
class BottomNavigationBarPage extends StatefulWidget {
const BottomNavigationBarPage({super.key});
@override
State<BottomNavigationBarPage> createState() => _HomePageState();
}
class _HomePageState extends State<BottomNavigationBarPage> {
var _selecttedindex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
// IndexedStack
body: IndexedStack(
index: _selecttedindex,
children: [
BottomNaviPage1(),
BottomNaviPage2(),
BottomNaviPage3(),
BottomNaviPage4(),
],
),
bottomNavigationBar: buildBottomNavigationBar(),
);
}
BottomNavigationBar buildBottomNavigationBar() {
return BottomNavigationBar(
// BottomNavigationBar 위젯은 3개 한정이므로
// 4개 이상 추가하려면 type 을 fixed 로 교체한다.
type: BottomNavigationBarType.fixed,
currentIndex: _selecttedindex, // 선택 효과 인덱스
onTap: (index) {
setState(() {
_selecttedindex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "home",
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: "school",
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: "business",
),
// 3개로 제한된 위젯이므로 추가시 fix 위젯을 사용해야 한다.
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: "search",
),
],
);
}
}
2. IndexedStack 위젯
위와 BottomNavigationBar 와 같이 쓰이는게 IndexedStack 이 많이 쓰일 것 같습니다.
인덱스에 맞게 화면을 전환할 수 있는데 이는 매우 유용하겠죠??
IndexedStack(
index: _selecttedindex,
children: [
BottomNaviPage1(),
BottomNaviPage2(),
BottomNaviPage3(),
BottomNaviPage4(),
],
)
'flutter & dart' 카테고리의 다른 글
flutter & dart - CircularProgressIndicator (0) | 2024.04.01 |
---|---|
flutter & dart - showModalBottomSheet (0) | 2024.04.01 |
flutter & dart - 블러 처리(모자이크)를 해보자 BackdropFilter (0) | 2024.04.01 |
flutter & dart - Align 위젯 (0) | 2024.04.01 |
flutter & dart - hero animation (0) | 2024.04.01 |