10. 악보 편집 기능 만들기 - 커스텀 탭, wrap 위젯, 커스텀 키보드

이전 포스팅까지 작업한 결과로 새 악보를 만드는 화면을 띄우는 것까지 만들었다.

이제 새 악보를 만드는 화면에서 악보를 편집하는 기능을 추가하고자 한다.

---

앱 디자인 구상 및 '커스텀 탭 뷰' 적용

우선 악보추가 기능 만들기 (1) 포스팅에서 다뤘던 내용을 그대로 구현하되, 기능을 추가하기로 했다.

 

대부분의 노래는 verse와 chorus가 반복되는 구조이다.

보통 나오는 구조는 다음과 같다.

verse1 - chorus1 - verse2 - chorus2 - bridge - chorus3

 

이때 보통 verse끼리, 그리고 chorus끼리는 코드가 겹치는 경우가 많지만,

verse와 chorus의 코드가 겹치기도 한다.

만약 이런 구조의 코드 악보를 그린다면 똑같은 코드진행을 계속 반복해서 그려야만 한다.

 

나는 이 문제를 해결하기 위해 구조별로 악보를 따로 그리고,

나중에 각각의 구조를 합쳐 하나의 악보를 완성하는 기능을 구상했다.

 

verse, chorus, bridge 별로 악보를 따로따로 그린다음

나중에 전체 악보에서는 verse - chorus - verse - chorus - bridge - chorus

이 순으로 코드를 보여주게 하면 되는 것이다.

(또는 verse, chorus, bridge 만 나눠서 보여주고,

현재 진행도를 알 수 있게 해서 왔다갔다 반복하도록 하는 것도 방법이다.)

 

나는 이걸 구현하기 위해 고민하다 '탭'을 써보기로 했다.

이 아이디어는 구글 플레이스토어 앱 디자인에서 얻었다.

 

구글 플레이스토어 앱 디자인을 보면

상단에 검색바가 있고, 그 아래에 탭들이 있다.

나는 이 각각의 탭을 하나의 구조를 위한 악보처럼 만들고자 했다.

 

그러나 모든 노래가 똑같은 구조로 되어있지는 않다.

동요같이 단순한 노래는 브릿지가 없는 경우가 많고,

verse1, verse2 가 비슷한 구조이긴하나 중간중간 다른 구조로 되어있기도 하다.

그래서 하나의 구조를 나타낼 탭을 임의로 추가/복사/삭제 할 수 있도록 하기로 했다.

 

이를 위해서 동적으로 숫자가 늘었다 줄었다하는 탭을 만들 필요가 있었는데

스택오버플로우에서 좋은 예시를 얻을 수 있었다.

(역시 영어로 검색하는 법을 알아둬야 좋은 것 같다)

 

https://stackoverflow.com/questions/50036546/how-to-create-a-dynamic-tabbarview-render-a-new-tab-with-a-function-in-flutter

How to create a dynamic TabBarView/ Render a new Tab with a function in Flutter?

두번째 답변의 커스텀 탭뷰가 내가 쓰기 좋은 탭뷰 같아 보였다.

그래서 해당 코드를 가져다가 dart 2.17 null safety 문법에 맞게 고쳐서 적용해보았다.

 

다음과 같이 나왔다.

하단의 + 모양 플로팅버튼을 누르면 탭을 추가한다.

이때 탭의 이름을 설정할 수 있도록 다이어로그를 넣었고, 탭의 이름을 반드시 넣도록 폼 검사를 시행하였다.

 

다음과 같이 나온다.

아무값을 넣지 않고 ok버튼을 누르면 폼검사를 통해 오류를 일으켜 값을 넣도록 요구한다.

 

'가나' 라는 이름을 넣어서 페이지를 새로 만든 모습이다.

---

탭 내부 디자인 구상 및 구현 wrap 위젯

하나의 탭 내부에서는 지난 번에 디자인했던 디자인을 그대로 가져다 쓰기로 했다.

'코드 / 가사' 쌍으로 구성된 하나의 칸을 만들고, 이 칸들을 배치하여 악보를 만들기로 했다.

이때 배치는 지난번 디자인대로,

하나의 줄에 칸을 채우다가 한 줄이 다 차면 다음 줄로 알아서 넘어가는 방식으로 만들고자 했다.

앞으로 이 '칸'을 '코드셀(또는 셀)'로 부르도록 하겠다.

 

전에는 이런 배치를 위해 손수 코드로 구현하여 만드려고 고생을 많이 했다.

그러나 위젯중에 wrap 위젯이 딱 내가 원하던 위젯배치를 지원하는 컨터이너 역할을 해주었다.

따라서 해당 위젯을 사용하여 내가 원하는 대로 셀을 배치하였다.

 

셀을 임의로 추가하고 삭제하기 위해 화면 하단에 버튼을 추가하였다.

정확히는 Scaffold() 위젯의 bottom 속성에 버튼을 추가하였다.

그래서 키보드가 나오더라도 이 버튼들이 키보드 위에 생긴다.

 

아직 '줄넘김' 버튼은 구현을 하지 않았다.

코드 추가, 코드 삭제만 구현하였는데,

선택한 코드 오른쪽에 직접 새로운 코드를 추가하거나, 현재 선택한 코드를 삭제할 수 있도록 하였다.

 

아직은 코드를 선택하기 전이라,

이 상태에서는 무조건 맨 뒤에 새로운 코드셀을 추가한다.

가사를 수정하려고 셀의 가사 부분을 클릭하면 다음과 같이 나온다.

 

선택된 셀은 노란색 배경으로 색이 칠해지고, 키보드가 나온다.

이 상태에서 가사를 수정하고

 

코드 삭제 버튼을 누르면 이 셀은 삭제된다.

 

사실 이 기능을 구현하려고 고생을 많이 했다.

플러터 stateful 위젯의 key에 대한 이해가 필요했다.

분명 선택한 셀을 변수에 저장했는데, 선택한 셀 기준으로 삭제, 추가를 시도해도

항상 마지막 셀이 삭제되고, 마지막 셀 다음에 새로운 셀이 추가가 되는 문제가 있었다.

(처음엔 dart언어의 List 관련 메소드들의 버그인줄 알았다...)

 

이렇게 가사를 수정한 상태에서 코드 추가를 누르면,

가사1과 가사2 사이에 새로운 코드 셀이 생성된다.

 

---

'커스텀 키보드'로 코드 입력하기 - 커스텀 키보드 테스트

그 다음으로 가사가 아닌 '코드'를 입력할 수 있게 만들고자 했다.

코드를 입력할 때는 일반키보드를 사용하는 것이 불편하다.

자주 사용하는 문자가 정해져있기 때문에 커스텀 키보드를 만들어서 입력을 받기로 결정했다.

 

커스텀 키보드는 아래 포스팅을 참고했다.

https://medium.com/flutter-community/custom-in-app-keyboard-in-flutter-b925d56c8465

Custom In-App Keyboard in Flutter

우선은 테스트로 키보드에 코드대신 숫자를 넣어서 값의 입력이 잘 되는지 테스트 해보았다.

 

코드를 입력하려고 하면 이렇게 키보드가 나온다.

키보드 사이즈를 테스트하고자 5*5 사이즈의 키보드를 넣어보았다.

 

키보드를 터치하면 값이 잘 들어간다.

---

다음엔 키보드 구성을 어떻게 할 지 구상하고,

구상한 내용을 토대로 실제 코드 입력을 받아볼 것이다.

 

일본 코드 악보 사이트인 U-fret 처럼 "근음 - 추가 구성 - 베이스코드" 세 부분으로 나누어 입력하는 방법과

그냥 텍스트를 쓰듯이 입력하는 방법

이 두 가지 중에 어떤 것이 키보드로 구성했을 때 더 입력하기 편리할 지 고민해보고자 한다.

---

또한 보통 하나의 구조안에서도 코드진행이 반복되는 경우가 많기 때문에

(보통은 4개씩 묶어서 반복되는 경우가 많다.)

반복되는 코드를 쉽게 입력할 수 있는 장치를 넣을 방법을 고민해보려고 한다.

 

이를 위해 지금 생각중인 것은 두 가지가 있다.

첫 번째는 키보드로 최근 입력한 코드를 입력할 수 있게 하는 것인데,

구현을 한다면 큐를 이용해서 4개 또는 8개의 코드를 버튼하나만 가지고 반복해서 입력하는 것을 생각하고 있다.

 

두 번째는 코드셀을 복수 선택해서 복사 붙여넣기를 할 수 있게 하는 것이다.

 

가능하면 둘 다 구현하고 싶다.

복사 붙여넣기는 특히 폭넓게 사용하기 좋을 것 같아 꼭 구현하고 싶다.