Image.asset Widget

 

플러터는 웹, 앱, 데스크탑 등 다양한 디바이스 프로그래밍을 지원합니다.

UI를 익힐 때 항상 그러하듯 UI 디자인 연습을 위해 특정 사이트를 따라 복제해 보면

어떤 요소가 해당 웹페이지에 사용되었는지 금방 알 수 있게 되며

훌륭한 목표가 있기 대문에 연습을 함에 있어 훨씬 좋습니다. 

 

이번엔 넷플릭스 데스크톱 웹페이지를 따라해 보려고 합니다.

모바일 앱은 클론코딩하시는 분들이 많던데 데스크탑 웹은 없으시더라구요...

혼자 연습하기엔 더 좋다는..ㅎㅎ

 

그런데 여기서 문제되는 것이 바로 저작권... 넷플릭스 홈페이지는 첫 화면부터.... 넷플릭스 시리즈의 포스터로 한가득이네요...

헐...

 

그럼 어떻게 이 포스터 이미지를 만들어야 할까 하다.. 혹시 몰라 이미지 생성형 AI 서비스를 검색해 봤습니다.

MS에서 제공하는 이미지 생성형 AI 서비스가 눈에 들어오네요..

 

오... Chat GPT처럼 이미지 생성도 가능한 것일까요?

 

MS의 AI 서비스는 뭔가 달라

 

MS의 서비스의 이름은 빙 이미지 크리에이터이며 주소는 아래와 같습니다.

 

https://www.bing.com/create

 

화면에 뜨는 채팅창에 원하는 내용을 입력하면 그에 맞는 이미지를 무료로  만들어 줍니다.

보통 무료 서비스이면 생성형 AI 서비스의 질이 떨어지는데 과연 빙은 어떨지..

 

기대 반 우려 반으로 다음과 같이 채팅창에 입력해 보았습니다.

 

영화포스터 30개를 활용해서 넷플릭스 홈페이지의 첫화면과 같은 이미지 1개를 4K 사이즈로 만들어줘

 

그런데.. 결과는 기대 이상이네요..

 

 

실제 넷플릭스에 있는 이미지처럼은 아니지만 그럴듯한 영화 포스터가 나왔다는..

이제 포토샵에서 살짝 Blur 처리를 하면.. 될 듯 합니다..

 

세상 많이 좋아졌네요~!!

 

 

Image.asset

 

플러터에서 사진이나 이미지 파일을 디스플레이 하기 위해서는 Image 위젯이 필요합니다.

플러터 이미지 위젯은 인터넷 상의 이미지를 가져오는 Image.network 위젯, 로컬 이미지를 가져 오는 Image.asset 위젯 등이 있는데..

굳이 인터넷 이미지를 가져 올 필요가 없으므로 로컬 이미지를 가져오는 코드를 작성했습니다.

 

먼저 프로젝트 폴더에 images라는 이름의 폴더를 만들어야 합니다. 그리고 그 폴더에 이미지 파일을 저장합니다.

다음으로 pubspec.yaml 파일을 열어 다음과 같이 설정합니다.

  assets:
    - images/

 

주의해야할 점이

  assets : 라인은 띄어쓰기 2칸을 해야 하며,

    - images/ 줄은 띄어쓰기를 4칸 해야한다는 점인데... 

이를 지키지 않으면 에러가 나게 됩니다.

이 에러 잡는 데 20분을 허비했다는.....ㅎㅎ

 

그리고 Pub Get 버튼을 눌러 적용을 하면 기본 세팅이 마무리 됩니다.

 

실제 Image.asset  위젯을 쓰는 법은 단순해요.

 

Image.asset("images/wallpapermain.jpg"),

 

문자열 형태로 표시할 이미지의 상대 주소값을 넣으면 끝.. 쉽죠?? 추가적인 매개변수를 넣어 너비(width)와 높이(height)를 설정해도 됩니다.

 

 

다행히 잘 됩니다~!!

이제 다음 단계인 로고 넣기, 로그인 버튼 만들기 등을 해봐야겠어요.