플러터 3.3.8 버전에서 개발중입니당.
탭뷰를 개발하기로 했다.
기본적인 탭뷰는 탭이 위로 가있는데, 내가 할 것은 탭이 바텀에 있는 것이다. 따라서 bottomNavigationBar를 이용할 것이다
class _MainTabPage extends State<MainTabPage> {
final List<Widget> _tabScreens = [const AOSPage(), const IOSPage()];
int _tabScreenIndex = 0;
@override
void initState() {
super.initState();
}
void tabSelected(int index) {
setState(() {
_tabScreenIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('요즘 IT'),
// ignore: prefer_const_constructors
titleTextStyle:
const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
backgroundColor: Colors.white,
),
body: _tabScreens[_tabScreenIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: tabSelected,
currentIndex: _tabScreenIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.android),
label: 'AOS',
),
BottomNavigationBarItem(
icon: Icon(Icons.apple),
label: 'IOS',
),
]),
);
}
}
사실 탭뷰에서는 데이터 정의할 것은 딱히 없어서 initState에 코딩할 것은 없다.
중요한 부분은 build 메소드이고, return을 Scaffold 메소드로 하게 되는데, Scaffold 메소드는 화면에 알맞게 배치되게 해주는 위젯이라 보면되겠다.
프로퍼티로 appBar와 body가 대표적이고, 앱바는 간단하게 요즘 IT를 기입해주었다. 일단은 디자인은 보류한 상태로 개발을 진행하고 추후에 디자인을 첨가하는 방식으로 프로젝트를 진행하도록 하겠다.
body부분에 _tabScreenIndexs 리스트의 인덱스에 따라 Page가 디스플레이 되는 구조이고, 인덱스 컨트롤을 bottomNavigationBar의 onTap프로퍼티에 부착된 메소드인 tabSelected에서 한다고 보면 되겠다.
간단히 말하자면 탭 버튼의 인덱스가 onTapdml tabSelected메소드로 인해 _tabScreens의 인덱스가 되고 화면에 해당 페이지가 디스플레이가 되는 구조이다. 같은 말을 반복한건가 암튼;;
그 밖의 프로퍼티의 설명으로 currentIndex는 탭 버튼을 눌렀을 때 활성화(색 변화)효과를 주기 위해 인덱스 변경을 해주어야 하는 부분이다.
items는 뭐... 말 그대로 탭 버튼에 뭐 들어갈지 설정해 주는데 BottomNavigationBarItem 리스트로 설정해주면 된다.
너무 코드 설명만 했으니 다트 관련 얘기도 하나 해보자면 const와 final에 대해 이야기해볼 필요가 있다.
위 코드에도 const나 final이 종종 보이는데 왜 쓸까? 그리고 안쓰면 왜이렇게 파란 줄이 뜨고 가끔 빨간줄이 뜰까?
- final - 코드 실행 결과로 결정되는 상수
- const - 코드 실행 전 결정되는 상수
즉, 개발을 하다가 상수인데, final이나 const 처리가 안되어 있으면 성능상에 문제가 있고 실수로 인해 변경의 여지가 있기 때문에 파란 줄이 뜰 수 있다. 그리고 date.now() 같은 경우 코드 실행 결과로 결정되는 상수이기 때문에 const를 사용할 수 없다 뭐 이런 느낌?
여튼 이 두개를 쓰는 가장 큰 이유는 성능 때문이라 보면 되겠다. 고정 값들은 무조건 const 또는 final을 적용하는 습관을 기르자.
이제 우리가 해야할 것은 AOSPage와 IOSPage를 만드는 것이다. 지금은 페이지가 없어서 실행조차 못한다. ㅠㅠ
그래서 여태 이 포스트에 이미지가 없다...
암튼 간단한 페이지를 만들어보자.
AOSPage.dart
IOS는 그냥 텍스트만 바꿨다.
실행화면
아주 잘 작동하는 것을 확인할 수 있다~!
'Flutter' 카테고리의 다른 글
| Flutter 프로젝트 만들기 - 2 (0) | 2022.11.13 |
|---|---|
| Flutter 프로젝트 만들기 - 1 (0) | 2022.11.13 |
| Flutter vs React Native (0) | 2022.10.02 |
