flutter 화살표 다이얼로그

개요

플러터로 블루투스 원격 제어 앱을 제작하게 되었습니다. 

블루투스에서 오는 데이타를 LCD로 출력을 하고 명령어를 전달하여 장비를 제어하는 앱입니다.

 

개발 

1.디자인 

앱의 기능을 확인한 이후 사용하기 편리하도록 UI/UX를 설계 합니다. 

장비의 하드웨어 버튼과 동일하게 하기를 원하므로 디자인도 동일하게 진행하였습니다. 

 

 

2.개발

일단 다른 위젯은 flutter의 기본위젯으로 충분히 구현이 가능하다. 

하지만 화살표의 다이얼로그는 음.. 검색해도 잘 나오지 않았다. 

따라서 직접 구현을 시도 하였다.

 

(1).먼저 그리드로 2*2의 바둑판을 만든다.

 

코드는 크게 어려운거 없고 버튼을 2*2 로 하여 4개를 생성하였다. 

그리고 아이콘은 rotate 하여 대각선으로 보도록 처리 하였다.(차후 그리드 자체를 rotate 하기 위해서)

코드의 결과는 아래의 사진을 참조

 

 

 

 

 

(2).그리드 자체를 rotate시킨다.

rotate  처리한 결과입니다. 

 

(3).clip rect로 원을 만들어서 튀어 나온 부분을 잘라낸다. 

 

 

cliprect로 원으로 만들었고 가운데 원만 들어가게 되면 종료된다. 

 

 

(4).Stack으로 가운데 원을 넣고 종료한다.

 

기본위젯으로 위치 맞추고 정렬한것이므로 따로 코드설명은 필요없을듯하다. 

 

 

 

 

결론

swift나 android에서 custom view를 만들려면 많은 공수가 걸렸으나 플러터는 진짜 쉽게 개발이 가능하고 많은것들을 지원해준다. 

퍼포먼스도 좋고 간단하다. 

 

 

---

민트소프트는 모바일 앱 개발 전문회사입니다. 하이브리드앱,크로스플랫폼,네이티브영역 전반에 걸친 모바일 앱을 개발하고 있습니다.

하이브리드는 민트앱이라는 솔루션을 보유하고 있어서 Time To Market에 매우 유리합니다. 

언제는 찾아주시면 신속하고 빠른 상담을 진행하도록 하겠습니다. 

 

https://www.mint-soft.com