그동안 여러가지 UI를 다루면서 어떤걸 하면 좋을까 고민했는데요. 이번에는 카카오뱅크의 “화면 편집”을 다뤄보려고합니다!
보기에는 간단할 수 있긴 하지만 계좌의 순서를 바꿀 수 있는 기능이 있어서 Flutter에서는 이것을 어떻게 다룰 수 있을지를 공유하면 좋을 것 같다고 생각해서 포스팅 하게 되었습니다.
“화면 편집”은 카카오뱅크 메인화면에서 본인 계좌 하단의 “+”버튼 아래에 있습니다!
이제 본격적으로 구현을 해보도록 할게요!
1. 영역 구분
우선 크게 3부분으로 나눕니다. ①번 영역은 Scaffold의 appBar를 이용해서 구현하면 될 듯 하구요. body 영역에 ②, ③번 영역을 구현하면 될 듯 합니다. 우선 이대로 소스를 작성해 보도록하겠습니다.
2. ①번 영역
이 부분은 스크롤과는 독립적이고, Row로 구현할 수 있지만 AppBar로 구현해도 될 것 같았습니다. leading에 close 버튼을 두고, title을 Text위젯으로 설정하고 centerTitle을 true로 두면 될 것 같습니다.
3. ③번 영역
Body 영역은 Column으로 나누고 ②번영역은 Expanded설정, ③번 영역은 height를 고정하여 설정하였었습니다. 우선 ③번 영역을 먼저 구현하려고 합니다.
이 부분은 Column 으로 나누고 위 영역은 Row, 하단은 버튼을 만들어 주면 될 것 같습니다.
스위치 ON/OFF UI는 Switch 위젯으로 하면 되는데 기본 Switch 위젯의 경우는 Material UI로 구현되는데 카카오뱅크와 동일한 스위치는 CupertinoSwitch 위젯이 있습니다.
버튼의 경우 ElevatedButton으로도 구현할 수 있지만 저는 주로 사용하는 방법은 InkWell 또는 InkResponse를 이용합니다. GestureDetector와 사용방법은 같지만 ripple 효과가 들어가 있기 때문입니다. 여기서 또 InkWell 바깥에 Ink위젯으로 decoration을 했습니다. InkWell 내부에 Container에 decoration을 넣을 수 있지만 그렇게 되면 ripple 효과가 나타나지 않습니다.
4. ②번 영역
해당 영역은 크게 Ⓐ, Ⓑ 2가지 형태의 UI가 존재합니다. 그리고 가장 상단의 고정영역이 하나 있고 그 아래 “자유적금” 부분 부터 맨 아래까지가 스크롤 영역입니다. 자유적금 부분과 그 아래의 조현철의 통장 이라고 되어 있는 부분 오른쪽에는 메뉴아이콘이 있습니다. 여기를 터치해서 위아래로 변경할 수 있게됩니다. Flutter 에서 이러한 기능을 제공하는 위젯이 있습니다. ReorderableListView 인데 Flutter 공식 유튜브에도 간단하게 나와있습니다. (공식유튜브)
4–1. 데이터 클래스 정의
이제 본격적으로 구현해 보겠습니다. 일단 통장 리스트를 구현하려면 먼저 데이터 클래스를 정의합니다.
저는 ContentsItem 이라는 클래스를 정의 했습니다. 여기에 들어가는 항목에 대해 설명하면 아래와 같습니다.
- itemType : 리스트에 들어갈 아이템 타입(Ⓐ, Ⓑ)
- title : 통장 이름 (예: 자유적금)
- money : 금액 (예: 10,000원)
- backgroundColor : 아이템의 배경 색상
- fontColor : 통장 이름, 금액 폰트 색상
- isHeader : 리스트 상단에 고정할 header 인지, header인 경우 우측의 메뉴아이콘 안보이도록 처리를 위해
- isFavorite : 즐겨찾기 활성/비활성화
- accountType : 계좌 타입 (예금 또는 적금) → 제 카카오뱅크에는 계좌가 총3개인데 2개가 예금이고 1개가 적금이어서 이렇게 구분을 했는데, 다른 분들 중 더 있으신 분들은 여기에 타입을 더 추가하시면 될 것 같습니다. 또 이 accountType은 enum 으로 정의해 뒀습니다.
4–2. 외부 라이브러리 설치
10000 을 10,000처럼 천단위 콤마를 표시하기 위해서는 여러가지 방법이 있겠지만 intl 라이브러리를 추가하면 조금 쉽습니다. 저는 아래와 같이 pub add 로 설치 했습니다.
flutter pub add intlⒷ를 보시면 “위 순서로 홈 화면에 보입니다” 좌우에 점선 표시가 되어 있습니다. 이 점선을 그려주는 dotted_line 라이브러리를 추가했습니다. 위의 라이브러리와 마찬가지로 pub add 로 설치했습니다.
flutter pub add dotted_line4–3. Color 클래스
Color를 적용하는 방법은 여러가지가 있지만 저는 주로 Colors 클래스를 만들고 static const로 Color를 정의해서 사용합니다.
4–4. ListView
리스트를 구현하기 위해서는 ReorderableListView를 사용합니다. 간단한 몇가지 사용방법에 대해서만 알면 됩니다.
- buildDefaultDragHandles : true이면 Long Tap 시에 drag를 시작 → 여기서는 우측에 메뉴 버튼을 누르면 바로 drag를 시작해야 하기 때문에 false로 설정했습니다.
- proxyDecorator: drag하고 있는 아이템을 꾸미는 설정
- header : 리스트와 별도로 헤더에 고정할 때 사용
- children : ListView 내부에 들어가는 아이템 위젯 리스트
- onReorder : drag 종료시 callback → 이 부분을 통해서 순서가 변경된 index를 가져와서 변경할 수 있습니다.
4–5. Ⓐ 구현하기
ItemType.CONTENTS인 경우에는 Ⓐ와 같은 UI가 보여지도록 설정했습니다. 실제 소스코드는 아래와 같습니다.
Row 위젯에 spaceBetween으로 설정하고, 즐겨찾기 부분, 통장이름 부분, 금액부분, 메뉴버튼 부분으로 나눠서 위젯을 설정해 줍니다.
ReorderableListView에서 각 item을 설정할 때는 key값이 필요합니다. 그래서 key를 ValueKey(index)로 할당했습니다. 그리고 우측에 메뉴버튼을 누르면 drag가 시작되어야 하기 때문에 ReorderableDragStartListener 위젯으로 사용했습니다.
1000단위 콤마를 찍어주기 위해서 intl 라이브러리를 설치했고, 이것을 실제 사용할 때 NumberFormat을 사용하였습니다.
4–6. Ⓑ 구현하기
ItemType.DIVIDER인 경우에는 Ⓑ와 같은 UI가 보여지도록 설정했습니다. 실제 소스코드는 아래와 같습니다.
Row 위젯을 사용하여 중앙에 텍스트를 배치하고, 좌우에는 점선을 그리기 위해서 위에서 추가한 dotted_line 라이브러리를 사용하였습니다. Expanded로 설정 후 DottedLine 위젯을 사용하였습니다.
5. 전체소스
위에서 작성했던 전체소스는 lib/src/kakaobank 경로에 있으니 필요하신 분들은 아래 링크를 통해 확인해주시면 됩니다!
지금까지 카카오뱅크 앱의 화면 편집 화면을 구현해 보았습니다. 사실 이번에는 ReorderableListView에 대해 구현 하는 방법을 공유하려고 해당 UI를 선택했습니다. 그러면서 겸사겸사 저도 공부를 좀 했습니다.
제가 구현한 방식 외에 다르게 구현하신 분들이나 이해가 안되는 부분이 있다면 댓글로 알려주세요! 저에게도 큰 도움이 될 것같습니다!
지난 번 까지는 다음에 무엇을 할지 미리 공유를 했었는데 다음에 무엇을 해볼까 바로 떠오르지 않아서 더 찾아보고 다음 포스팅을 하도록 하겠습니다!
감사합니다! 🙏🏻
