Flutter Package : Animated_Tree_View 활용

 

Flutter 프로젝트를 하면서 괜찮아 보이는 트리 모양의 메뉴를 만들어보고자 찾아보았는데, 최신 업데이트를 하고있으면서도 다양하고 시각적으로도 괜찮은 패키지를 찾다보니 animated tree view 가 나왔다. 

 

 

하지만 위 같이 단순히 정적인 메뉴를 만들때는 꽤나 쉽지만, json으로 받은 데이터를 가지고 동적으로 메뉴를 만들어야 하다보니 난감한 상황에 봉착하였고, 결국 API를 보면서 함수들을 하나씩 타고 들어가면서 만들게 되었다.

 

(ChatGPT를 활용할 수 있으신 분들은 그걸 이용하는게 정신건강과 시간에 좋습니다. 저는 제대로 안나오고 이상하게 답변 주길래 직접 만들었어요...)

반응형

TreeNode를 만들면서 커스텀 트리뷰도 만들수 있어서 편리하게 data를 활용할 수 있었으나, 동적으로 메뉴를 만들다보면 해당 노드의 자식으로 붙이기 위해서는 elementAt 이라는 함수로 직접 path를 접근해야 했고, 화면딴이 아닌 이상 또는 이미 그려져있는 트리뷰가 아닌 이상 path라는 함수는 사용 할 수가 없었다.(완성된 트리뷰에서는 path로 주소를 쉽게 가져올 수 있다.)

 

결국, 이진탐색트리에 힌트를 얻어 각각의 부모키를 탐색과 삭제를 하면서 접근하여 만들어냈다.

 

 

완성! 만세~

 

 

플러터 스크린의 코드는 아래와 같다. 

 

Animated_Tree_View API

• indentation : 트리 구조에서 부모 자식간의 선 모양
• expansionBehavior : 트리 구조 확장시 화면 이동 
• showRootNode : 루트노드 보이기/감추기
• onItemTap : 노드를 클릭했을때의 액션
• builder : 빌더로 데이터 화면에 뿌려주기~~
  • node.path : 해당 노드의 위치값(elementAt 에 넣으면 바로 해당 위치로 이동할 수 있는 path)

 

 

 

끝!