WAVVE의 홈화면을 보니 크게 ①~⑨까지만 구현하면 될 것으로 보였습니다. ④번과 ⑧번은 하나의 위젯으로 만들어서 둘 다 사용할 수 있을 것 같습니다.
③번 영역은 BottomNavigationBar이고, 이 영역을 제외한 부분은 전부 스크롤 가능 영역입니다.
2. 영역 구분
①번 영역
StatusBar, AppBar 부분을 통합한 부분입니다. StatusBar의 색상은 투명하게 해야하고, AppBar내부에 PageView가 추가되어 있으며 스크롤되었을 때 AppBar의 변화가 일어납니다. 스크롤을 올렸다가 다시 내리면 Wavve 로고와 우측에 Live아이콘이 보이는 구조입니다. 이와 같이 구현하기 위해서 CustomScrollView의 slivers 속성을 통해 위젯을 구현해야 합니다.
Wavve 웹페이지를 통해서 분석해보니 “wavve”라는 로고와 “live”라는 이미지는 svg 이미지로 되어 있었습니다. Flutter에서 SVG를 사용하기 위해서는 라이브러리를 설치해야 합니다.
flutter_svg 라이브러리 설치
flutter pub add flutter_svg설치가 완료되면 svg파일이 있는 디렉토리를 pubspec.yaml 파일 내부에 등록해주어야 합니다.
SliverAppBar의 title에 SVG 이미지를 추가해주면 됩니다.
이미지가 보여지는 부분은 배경이미지와 글자가 적혀있는 이미지 2개로 분리되어 있었습니다. (가장 우측 흰 이미지는 투명배경에 흰색 글씨입니다.)이 두개의 이미지를 Stack 위젯을 사용하여 겹치도록 하면 될 것 같습니다.
PageView 내부에 들어갈 이미지의 비율이 1125:1440 인것을 확인하여 expandedHeight를 설정했습니다.
expandedHeight : MediaQuery.of(context).size.width * 1440 / 1125좌측하단에는 페이지를 가리키는 인디케이터가 보입니다. 이것은 PageView와 연동하여 페이지가 넘어가면 인디케이터가 넘어가도록 구현해야 합니다. 직접 구현할 수도 있지만 잘 만들어져 있는 패키지가 있어서 설치후 사용했습니다.
smooth_page_indicator 라이브러리 설치
flutter pub add smooth_page_indicator
SmoothPageIndicator를 이용해서 circle indicator를 쉽게 구현했습니다. PageView의 controller와 SmoothPageIndicator의 controller를 연결해서 페이지가 넘어가면 indicator가 변경되도록 했습니다.
아래와 같이 결과가 나오는 것을 볼 수 있습니다.
로고와 LIVE 아이콘이 있는 AppBar 부분의 구현방식이 사실 조금 다릅니다. 똑같이 하려고 했는데 구조가 많이 복잡해 질 것 같아서 SliverAppBar를 이용해서 구현했습니다.
②번 영역
해당 영역은 가로로 스크롤이 되는 영역입니다. 타이틀/더보기 영역, 스크롤영역으로 나누어 Column으로 설정하고, 타이틀/더보기는 Row로 설정해야 배분정렬합니다. 스크롤영역은 SingleChildScrollView를 구현하여 scrollDirection을 Axis.horizontal로 설정하면 가로 스크롤을 할 수 있습니다.
③번 영역
Scaffold 위젯의 bottomNavigationBar 속성에 추가해주면 쉽게 구현할 수 있습니다.
④번 영역
해당 영역은 ②번 영역과 크게 다르지 않습니다. 가로로 스크롤이 되는 영역입니다. 타이틀/더보기 영역, 스크롤영역으로 나누어 Column으로 설정하고, 타이틀/더보기는 Row로 설정해야 배분정렬합니다. 스크롤영역은 SingleChildScrollView를 구현하여 scrollDirection을 Axis.horizontal로 설정하면 가로 스크롤을 할 수 있습니다. 이미지가 들어가는 부분만 다르면 크게 다르지 않은 것을 볼 수 있습니다.
⑤번 영역
이 부분은 이미지 하나만 있는 위젯이라 특별한 것은 없습니다. 이미지가 있고 이미지를 터치하면 링크페이지로 이동하는 구조입니다. 여기서 터치이벤트를 발생시키려고 InkWell을 사용했는데 Ripple 효과가 나오지 않았습니다. 아마도 이미지가 ripple 보다 우선순위가 높은 듯 합니다.
위 소스코드와 같이 Stack위젯에 Image를 놓고 그 위에 뷰를 하나 얹어서 클릭이벤트를 발생시키는 구조를 만들었습니다. 이렇게 하면 Ripple 효과가 나타나는 것을 확인할 수 있습니다.
⑥번 영역
해당 영역은 ④번 영역과 크게 다르지 않습니다. 이미지 하단의 텍스트 영역만 변경된 형태입니다.
⑦번 영역
해당 영역 또한 ④번 영역과 크게 다르지 않습니다. 타이틀 부분에 “더보기”만 빠져있고, 이미지 위에 순위를 나타내는 숫자가 있습니다.
⑧번 영역
⑨번 영역
이 영역은 Footer 영역입니다. 크게 공지사항, 소셜연동, 약관 관련 정보, 회사 정보 이런 정보들이 나열되어 있는 부분입니다. 다른 것들은 크게 어려움이 없으실거라고 보입니다.
공지사항 부분은 3초마다 공지사항 내용이 위로 스크롤 되는 형태입니다. 그것을 구현하기 위해서 고민하다가 PageView를 세로 방향으로 설정하고 Timer를 사용하여 3초마다 수행하도록 했습니다.
3. 전체소스
제가 샘플로 만들고 있는 flutter_ui_sample github 소스 입니다. lib/src/wavve 경로에 전체 소스가 있습니다. 확인하실 분들은 아래 링크를 확인해주시면 됩니다!
지금까지 WAVVE 홈화면 UI를 구현해 보았습니다. 이전 포스팅 했던 글들과는 다르게 이번에는 구현해야 할 것들이 많아 내용이 많이 길어졌습니다. 제가 설명을 잘 했는지 잘 모르겠네요.😅
혹시 저와 다르게 구현하시는 분들의 의견도 듣고 싶습니다. 댓글로 알려주세요! 😁
Next Flutter UI
다음은 금융서비스 중 하나인 Toss 앱의 “송금” 화면을 다뤄보려고 합니다! 혹시 다뤘으면 하는 UI가 있다면 알려주세요. 감사합니다! 🙌
