순한맛 시즌2
2-1강 플러터 온보딩 스크린(Flutter Onboarding screen) 만들기
2-2강 리스트뷰 빌더(Listview Builder)와 다이어로그(Dialog) 팝업창 띄우기
2-3강 리스트뷰(List view)에서 데이터 전달하고 페이지 이동하기
반응형 레이아웃으로 유튜브 페이지 구조 만들기
계산기 앱 만들기
| 2-1강 플러터 온보딩 스크린(Flutter Onboarding screen) 만들기 |
외부패키지를 가져와서 하는 게 시간이 확실히 절약 되는 듯.
이제 페이지를 꾸며 보자.
이미지는 핀터레스트에서 아무거나 주워 옴.
여러 페이지를 꾸밀 것이기 때문에 PageDecoration 에 대한 메소드를 만들어 보자.
PageDecoration의 속성들은 필요한 것들만 그때 그때 불러서 사용할 수 있도록 named argument로 구성되어 있기 때문에
메서드에 별다른 인자값을 전달할 필요가 없다.
요로케 아래 따로 만들어주었다.
적용이 잘 된 걸 볼 수 있다
앱을 처음 시작했을 때 온보딩 스크린을 스킵하는 경우도 많으므로 스킵 버튼도 넣어주자.
왼쪽 아래에 skip 버튼이 생긴 것을 볼 수 있다.
이거 누르면 바로 마지막 페이지로 넘어감.
밑에 세 점들도 꾸며 봄.
선택 된 페이지는 요렇게 뜸.
마지막으로 애니메이션 효과도 넣어보자.
여러가지 효과가 있음.
버튼 누르면 색깔 바뀌는 activeColor도 추가해줬다.
마지막 페이지의 done 버튼을 누르면
이렇게 메인페이지로 넘어오는데
저 뒤로가기 버튼을 없애보자.
onDone 메소드에서 push메소드를 pushRelacement메소드로 바꿔주면 됨.
이제 onPressed 메소드 내에 on boarding 페이지로 이동하는 기능을 구현해주자.
onboarding.dart 파일로 넘어가서
이 부분을 복사해서
다시 main.dart로 돌아가서
{} 안에 붙여넣기 해주면
이렇게 됨. 이제 35번줄 끝의 MyPage위젯을 OnBoardingPage로 바꿈.
발표 자료 준비 하느라 하루를 다 썼다ㅠ
계획했던 강의는 다섯 개였지만
하나만 더 듣고 자야지... . .
| 2-2강 리스트뷰 빌더(Listview Builder)와 다이어로그(Dialog) 팝업창 띄우기 |
각 List item을 클릭하면 팝업창이뜨는 기능을 구현하고자 한다.
즉 터치, 제스처 기능이 있어야 함.
제일 많이 쓰는 것이 GestureDetector임.
GestureDetector기능을 제공하지 않는 위젯을 GestureDetector위젯으로 감싸주면
onTap 메서드로 제스쳐 기능을 사용할 수 있게 해주는 위젯임.
GestureDetector은 잠시 후에 사용하고,
아이템 빌더 메서드 내에서 우선 Card 위젯이라는 것을 리턴해주겠다.
* Card 위젯은 네 모서리가 둥글게 처리 되고 드롭 쉐도우 효과가 들어간 패널 모양을 가지고 있음.
그리고 내가 만들 list가 [왼쪽:이미지/오른쪽:직업명&세부설명]을 배치할
row형태이므로 child를 이용해 row 위젯을 불러온다.
저장하면
요로케 뜨고 스크롤 기능도 잘 구현 되는 걸 볼 수 있음
그런데 플러터가 Container 위젯을 SizedBox로 바꾸라고 충고해주길래 바꿈.
sizedBox는 const 생성자를 가지고 있고 런타임 시에 새로운 인스턴스를 생성할 필요가 없음
공간을 확보하기 위한 단순한 용도라면 SizedBox가 더 효율적이라는 말씀.
이제 이미지 오른쪽을 채워보자.
세번째로 넣을 디스크립션은 내용이 길기 때문에 sizedbox로 공간을 띄워주겠다.
단, 스크린이 가로모드가 되었을 때 일정한 배치가 유지될 수 있도록 만들어줘야 함.
그래서 디스크립션 배치는 반응형으로 만들어 주겠다.
반응형 앱은 사용자가 화면에 방향을 바꿀 때마다 그에 맞추어서 화면이 재배치 되어야 하므로
매번 빌드메서드를 통해서 위젯이 리빌드 됨.
빌드 메서드로 가서 double타입으로 width라는 변수를 생성해주자.
오 오랜만에 MediaQuery를 쓴다.
코드팩토리 강의에서 많이 썼었음.
리스트뷰 구현은 이제 끝.
터치에 반응하는 제스쳐 기능을 위해
카드 위젯을 GestureDetector 위젯으로 감싸주자.
하는 중.
그런데 print 메서드에 줄이 생긴다. 이럴 땐
print 메서드 대신에 debugPrint라는 메서드를 사용하면 됨.
완성
이제 콘솔창을 띄우고 오른쪽 에뮬레이터 리스트 아이템 중 하나를 클릭해 보면
요런 식으로 뜬다.
그럼 이제 본격적으로 각 리스트 아이템을 클릭하면
팝업창이 뜨도록 구현해 보자.
이를 위해 위에 void타입의 메서드를 하나 생성해주자.
슬슬 골아푸다 ㅠ
이제 기본적인 틀이 만들어졌으니
onTap 메서드에서 showPopup 메서드를 불러오자.
이제 아이템을 클릭을 해보면
요렇게 팝업창이 뜬다.
다시 showpopup 메서드로 돌아가서
이번에는 컨테이너 위젯의 차일드로 컬럼 위젯을 불러오자.
이제 이미지를 배치하기 위해서 ClipRRect를 쓸 건데
이전에 써봤던 서클아바타 위젯이랑 비슷.
얜 사각형.
잘 뜬다 에효.
description도 추가해줌.
마지막으로 close 버튼을 추가해주자.
물론 다른 영역 눌러도 꺼짐ㅋ
뜬다.
ListViewBuilder에 대한 부연 설명
만약 출력할 리스트데이터가 겁나 많으면?
이 데이터를 매번 불러와야 한다면 버벅거리고 성능이 저하됨.
ListView vs ListView.builder
공통점
스크롤이 가능한 배열형 위젯
차이점
ListView는 리스트뷰안에 모든 차일드를 생성해서 보여줌, 즉 소수의 데이터에 적합
ListView.builder 는 그때그때 필요한 만큼만 데이터를 저장소나 서버에서 불러옴.
즉 스크린에 보여지는 양만큼만 불러옴.
*그리고 gestureDetectop 대신에 InkWell이라는 위젯도 사용 가능,
제스쳐가 감지 되면 잉크가 퍼지는 듯한 애니메이션 보여줌