플러터로 SNS어플 만들기 3. 메인페이지 제작(BottomNavigation)

이번 시간에는 BottomNavigation 을 통한 메인페이지를 만들어 볼겁니다.

 

 

 

보통 앱들을 보면 밑에 이런것들이 많은데 이걸 우리는 BottomNavigationBar 라고 합니다.

 

기본적인 원리는 int 값을 같은 변수를 한개 지정해두고 (ex int selectedIndex)

밑에 아이콘을 클릭하면 setState가 되면서 인덱스값이 변경되게 해두고,

 

(여기서 setState는 상태를 새로 불러온다는건데 쉽게 그냥 새로 빌드하는겁니다.)

 

그 인덱스값에 맞춰서 페이지와 BottomNavigationBar의 아이콘들이 반응하게 하면됩니다.

 

오늘 할 작업의 목록은

 

1. BottomNavigationBar 위젯생성

 

2. BottomNavigationBarItem 생성

 

3. 페이지 연결

 

4. 아이콘 바꾸기 및 적절한 조절

 

 

 

1. BottomNavigationBar 위젯생성

Scaffold 급에서 bottomNavigationBar라는 옵션을 줄수가 있습니다.

bottomNavigationBar 라는 옵션에 BottomNavigationBar 라는 위젯을 사용할거에요

 

2. BottomNavigationBarItem 생성

BottomNavigationBar 라는 위젯은 기본적으로 items 를 요구하고 이 아이템들 하나하나가

이거 하나하나가 되는것이죠.

items 는 리스트 형태를 가집니다. 복수개 라는 거에요 그래서 저기 빨강 테두리에 List 형태의 변수를 주던지 직접 작성하던지 해야하는데 리스트 형태여햐하니까 직접 작성할려면  [ ]를 붙여야겠죠. 저는 items 에 관련된 변수를 만들어준다음 할당하도록 하겠습니다.

 

여기서 보면 items 의 각각은 BottomNavigationBarItem 이라는 위젯을 사용하고 있네요.

label과 icon을 필수적으로 입력해줍니다.

 

그리고 type, backgroundColor 등등은 바텀네비게이션바의 옵션들인데 읽어보면 직관적으로 알수가 있는 내용들이에요

여기서 onTap 에 index는 아래 items 내용물의 index를 말해요

즉 bottomItems 들의 인덱스죠, 위에 bottomItems 가 보이죠? 위에서부터 인덱스 0 1 2 3 을 가집니다. 저기 위에 label 에 1번이라고 적혀있는 저거는 index 0이겠죠

onTap 즉 클릭할때 _selectedIndex를 선택한놈의 index로 setState를 통해 바꿔주는거죠.

 

이렇게 하면 다음과 같은 페이지가 나오는데요 이건 버튼클릭만될 뿐 페이지가 변경되거나 하지 않죠.

다음은 페이지가 변경될수있도록 해주어야합니다.

 

그럼 우선 연습삼아서 되는지 안되는지 부터 확인해보죠

 

3. 페이지 연결

 

이렇게 body 에 pages[_selectedIndex] 라고 해두고

 

List pages=[
Container(
child: Center(child: Text("1번입니다")),
),
Container(
child: Center(child: Text("2번입니다")),
),
Container(
child: Center(child: Text("3번입니다")),
),
Container(
child: Center(child: Text("4번입니다")),
),
];

 

페이지를 이렇게 정의했습니다.

그러니 이렇게 바텀네비를 클릭하니 페이지가 바뀌네요.

 

 

이렇게 pages라는 리스트변수에 담긴 위젯들을 _selectedIndex를 참고로 body의 내용물로 보여주는걸 해봤는데요

이거는 연습이고, 이제 본격적으로 페이지 연결을 해보겠습니다.

 

lib 에 mainpages 라는 디렉토리를 만들고

여기에 다트파일 4개를 만들어 줍니다.

이 각각들이 메인페이지에서 불러져올 클레스들이에요.

 

저는 홈스크린,그리드뷰로 보기, 내가 라이크한거보기 , 내 페이지 이렇게 나눌거에요

그래서 dart 파일명과 클래스명을 각각

 

homescreen.dart -HomeScreen

showgridscreen.dart - ShowGridScreen

mylikescreen.dart - MyLikeScreen

myscreen.dart - MyScreen

 

으로 할거에요 

 

이렇게 다트파일을 만들어 주었고 각각의 다트파일에 클래스를 생성해서

pages 에 적어줬어요.

그러면 성공적으로 이동이 잘되는걸 볼수있습니다.

 

4. 아이콘 바꾸기 및 적절한 조절

그러면 이제 아이콘을 적절히 바꿔주면 되겠네요.

 

아이콘은 여기서 적절한걸 찾아서 사용하면됩니다.

flutter 에서 기본적으로 제공하는 아이콘이며

각가지 많은 아이콘들을 라이브러리를 통해서 찾을수 있고 그래도 없다싶으면 자기가 직접 만들수도 있어요.

 

이렇게 했는데 저기 밑에 글자가 너무 별로라서 글자는 없애고 아이콘만 보일수있도록 하겠습니다.

 

간단하게 

showSelectedLabels: false,
showUnselectedLabels: false,

이렇게만 주면 해결이됩니다.

요렇게요

 

 

다음시간에는 앱을 휴대폰에 깔아보고, 앱아이콘을 바꿔볼거에요.

ㅅㄱ ㅅㄱ

 

 

 

-----------------공지-------------------

23년 버전 앱강의를 오픈했습니다. 관심있으신분은 클릭 ㅋㅋ

2023.07.29 - [코딩생초보를 위한 플러터 빠르게 한바퀴] - 1. create project

1. create project

개인과외 문의 saran.flutter@gmail.com