커스텀 위젯

커스텀 위젯

커스텀 위젯이란 위젯을 작성할 때 길어진 코드를 위젯 형태로 만들어서 깔끔하게 작성하기 위해 사용한다. 쉽게 말하면 우리가 사용하는 모든 위젯은 클래스인데 그냥 클래스를 내가 필요한 용도에 맞게 하나 만드는 것이다.

예를 들어 아래와 같은 앱이 있다고 해보자.

현재 scaffold 위젯을 사용하여 그 안에 bottomNavigationBar를 만들었다.
커스텀 위젯을 사용하지 않는 경우에는 아래와 같이 굉장히 지저분하고 보기 싫은 코드를 작성해야한다.

지금은 간단한 위젯을 만드느라 그래도 봐줄만 하지만 몇 백줄이 된다면 보기 어려워진다.
이런 것을 쉽게 만들기 위해 사용하는 것이 커스텀 이벤트 이다.

작성법

1. 우선 하단 빈 곳에 class를 생성 (stless+tab) 및 작명을 해준다.
   

2. 이후 return에 내가 만들 위젯을 만든다.
   나의 경우, bottomNavigationBar에 작성한 코드를 그대로 붙여 넣었다.

3. 작명한 class명(BottomItem)을 기존에 위젯을 사용하던 형식대로 작성한다.

커스텀 이벤트를 사용하면 이런 식으로 몇 줄이 되던 것을 한 위젯으로 생략하여 깔끔하게 볼 수 있다.

참고로 이러한 위젯은 변수에 담아도 된다고 하나 성능 이슈가 있을 수 있다고 한다. 따라서 영속적으로 변하지 않는 UI들은 변수에 담아도 되나 실시간으로 바뀌는 것들은 class형태로 만들어야한다고 한다. 그리고 추후 다룰 예정인 state관리(stateful위젯으로 관리)가 어려우니
1. 재사용이 많거나
2. 페이지 단위로
만드는 것이 좋다고 한다. state관리는 추후 글에서 다뤄볼 예정이다.