image를 정리해서 쉽게 불러오자

이미지를 불러올 때마다 pubspec.yaml에 이미지 등록하고,,, 귀찮았던 시절이 있었다.

이 귀찮음을 해결하기위해 알아보다 찾아낸 아주 조금 효율적인 방법에 대해 정리해보고자 한다(Gen 패키지를 사용하면 자동화가 된다. 작은 프로젝트라, 내가 이미지 명을 직접 설정하고싶어서 수작업 방법을 택했다)

pubspec.yaml 관리

굳이 하나씩 등록할 필요없이 다음과 같이 경로를 설정해준다.
이전에 assets폴더 안에 images 폴더를 만들어준다.

(❗dev_dependencies와 flutter가 같은 위치임을 주의하자. yaml파일은 간격이 매우 중요하다)

image_data.dart

이제 Data 폴더를 생성하고, 그 안에 image_data.dart파일을 만든다
class 이름은 ImageData로 하겠다.

width는 설정하고싶지않으면 안해도 된다.

이후 아래에 ImagePath라는 클래스를 만들고 변수 명을 선언해준 후, 파일의 경로를 넣어주면 된다.

이러면 assets/images/ 에 있는 splash.png라는 파일이 splash에 등록이 된 것이다.

사용방법

기존에 이미지를 불러왔던 방식보다 코드가 깔끔해진다.
나는 사진을 splash screen 대체용으로 사용하기 위해 sized box를 이용하여 꽉 채웠는데 이건 예시일 뿐이고 사용방법은 아래와 같다.

이렇게 Image.asset(Imagepath.내가정한변수명)을 선언해주면 된다.

Gen사용법에 익숙해지면 Gen을 이용한 효율적인? 자동화되는 관리법을 소개하겠다.