[Flutter] enum을 이용한 ui resouce 관리(1. image)

플루터(Flutter)는 Dart 로 UI를 개발하기에 무척 편리한 프래임워크이죠.

실제로 플루터가 나오기 전까지 Dart 언어에 대해서 평가가 그리 좋지 않았지만, 플루터 이후에 평가가 완전히 뒤바뀌었죠.

 

제가 플루터로 어플리케이션을 개발하면서 쌓은 노하우중 하나가 어플리케이션 리소스를 enum으로 관리하는 것인데요.

어떤것인지 소개 드리겠습니다.

 

플루터로 UI를 꾸밀때, 기본적으로 필요한 요소들이 있는데요. 이미지, 컬러, 텍스트스타일, 레이아웃 등이 있죠.

이런것들을 관리하기 위해서 개발자 분들은 다양한 방법을 사용하고 있을텐데요.

 

저는 enum을 활용하는 방법을 소개하고자 합니다.

 

어떻게 enum으로 리소스를 관리하지? 라고 궁금증이 생기신 분들이 있을텐데요.

먼저 제가 왜 enum을 선호하는지 부터 알려드리겠습니다.

 

제가 프로그래밍을 하면서 리소스와 관련되서 종종 격었던 문제들이 있었습니다.

- 텍스트로 리소스를 정의하여 사용하는 경우, 오타로 특정 위치에서만 정상적으로 안나오는 상황

- 플리케이션 리소스를 정의하는 방법이 개발자 간에 서로 달라서 중복된 리소스를 사용하는 경우

- 필요 없다고 생각되는 리소스를 삭제해서 리소스가 안나오는 경우

- 혹시 사용되고 있을까봐 삭제하지 못한 리소스

 

주로 요런 문제들인데요. 아마 이런 문제들은 프로그래밍 언어와 상관없이 코딩을 하다보면 종종 격는 문제입니다.

 

Enum으로 리소스를 관리하게 되면 장점은,

- 컴파일시 (또는 editing시)에 에러를 바로 발견 할수 있다.

- 리소스 사용에 대한 검색이 쉽다.

 

단점은

- 리소스를 위해서 enum을 만들어야 하는 번거로움이 있다.

- 자칫 잘못 디자인 되면 사용이 복잡해진다.

 

저는 예전 경험으로 String을 enum으로 관리하여 유사한 문제점들을 줄였던 적이 있었는데, 이를 활용하여 "어떻게 하면 

코딩이 복잡하지 않고 리소스를 사용할 수 있을까?"에 대해서 고민하여 다음과 같은 방식을 만들게 되었습니다.

 

 

첫번째,

Container(child:Image.asset( ResImages.beast.path, width: 120) )

이미지 리소스를 ResImages.beast.path 이렇게 리소스를 사용하는 방법입니다.

위와 같이 사용하기 위해서는 이미지 리소스를 어떻게 정의할지 고민이 필요한데요. 저는 다음과 같은 방식으로 정의합니다.

enum ResImages{

  addDevice("beast.png"),
  battery("people.png"),
  check("dog.png"),
  dashDevLandS("cat.png"),
  dashDevProbeS("fox.png"),
}

현재는 에러가 발생할 것이고, 

이와같이 정의할 수 있게 하기 위해서는 생성자 (constructor)와 추가적인 내용이 필요합니다.

 

enum ResImages{

:

  final String name;
  const ResImages( this.name);
}

이렇게 하면 string을 enum 정의할때 사용 할 수 있게 됩니다.

다음으로 image path를 얻어오는 getter가 있으면 매우 편리해지겠죠?

 

  String get path => "assets/images/$name";

이렇게 enum에 getter를 추가해 줍니다.

 

이렇게 하면 ResImages.beast.path 로 리소스의 위치를 얻어올 수 있게 됩니다.

요즘 coding 환경( ide)가 좋아져서 ResImages. 까지만 치면 정의된 리소스를 모두 볼수 있으니 더더욱 좋죠.

getter는 필요에 따라서 다양하게 추가할 수 있겠죠? 작은 이미지를 따로 모아놔서 smallPath 를 추가한다던가, 에니메이션을 위해서 프래임을 나눠서 준비했다고 한다면 getFrame(int idx) 같은 식으로 말이죠.

 

최종 완성본은 다음과 같습니다.

enum ResImages{

  addDevice("beast.png"),
  battery("people.png"),
  check("dog.png"),
  dashDevLandS("cat.png"),
  dashDevProbeS("fox.png"),
    ;
  final String name;
  const ResImages( this.name);
  String get path => "assets/images/$name";
 
}

 

 

음, 여기서 고민이 되네요.

이미지, 텍스트 스타일, 컬러를 모두 블로그 한 페이지에 정리할지 아니면 나눠서 정리를 할지.....[10분 딜레이]..

스압을 피하기 위해서 나눠서 정리하기로 했습니다. ^^

 

추가로 관심있으시면 아래 링크 참조 부탁드립니다.

 

[1.이미지(Image)] 이미지 관리

[2.컬러(Color)] 색상 관리

[3.텍스트스타일(TextStyle] 텍스트 스타일 관리