플러터로 첫 코딩하기! 20 - Container 에 Image넣기!

 

플러터의 위젯으로 못만드는건 없지만 (아마도..?)

때론 외부의 힘을 빌려 빠르게 진행하는게 더 현명할 때가 있습니다. 

 

대표적으로 어플 내에 

Image가 그렇습니다. 

 

모바일 화면이 작다보니 정보전달을 위해서 

 사진이나, 카피라이터로 전달하면 더 좋을테니까요 

 

 

먼저 Image를 사용하기 위한 작업 순서 먼저 알려드리겠습니다. 

1. yaml 파일로 들어가서  assets :   pubget하기  ->assets 라고 안지어도 됩니다만 음 뭐랄까 전세계 플러터 사용자들의 공통된 약속이라 생각해주세요 

2. project 디렉토리 내에 assets 파일 생성하기 

3. assets 파일에 넣고 싶은 image파일 넣기 

4. 사용하기 Image('');

 

 

1. yaml 파일 

 

가장 중요한 부분이 있습니다. 띄어쓰기 입니다.

Image 파일을 넣었는데 인식을 못하는 경우 80% 확률로 yaml 파일내에 assets :  띄어쓰기가 잘 안되어서 발생하는 오류입니다. 

저는 assets/ 파일 아래에 /image파일을 더 만들었습니다. 그래서 

assets/image를 적고 pubget을 했습니다. 

 

 

 

 

2.project내에 assets 파일 만들기 

 

위에 언급했듯이 assets을 만들고 하위 폴더/image 를 만들었습니다. 

 

 

 

3. 해당 폴더에 원하는 이미지를 넣어주기 

 

 

그 밑에 원하는 이미지를 넣어주시면 됩니다. 드래그를 해서 해당 폴더안에만 잘 넣어주시면 됩니다.

 

4. 사용하기 

Image로만 사용도 가능하지만 특정 부분에 위치시키고 강조시키면 

Container나 SizedBox 안에서 사용하는 것이 좀 더 다루기 편합니다. 

저는 Container를 사용했습니다. (' 주소값')을 적을 때 해당 파일 형태의 단위까지 꼭 적어주셔야 합니다. 

 

  /assets / image/zzimkong.png

asstes 폴더안에 image 폴더안에 zzimkong.png 파일을 쓰겠다. 

요렇게 이해하시면 됩니다.

 

Container(

child: Image.asset('assets/image/zzimkong.png',
                            fit: BoxFit.fill,)

 

 

다음은 버튼에 대해 알아보겠습니다.