개요

이미지를 표시할 때, 이미지 파일을 취급할 준비가 조금 번거롭기 때문에, 순서를 정리했습니다.

이미지 파일 준비

먼저 이미지를 넣을 폴더를 준비합니다.
Project의 맨 위에 있는 항목을 마우스 오른쪽 버튼으로 클릭하고 New > Directory

이번에는 이런 폴더 구성으로 했습니다.

화상은 「드래그＆드롭」혹은 「복사＆붙여넣기」로 등록해 주세요.

pubspec.yaml 파일 편집

pubspec.yaml 파일에 "이미지가 저장된 디렉토리"를 지정합니다.

flutter:

  uses-material-design: true
  assets:
    - assets/images/

※인덴트에 따라서는 정상적으로 움직이지 않을지도 모릅니다. 복사 한 것으로 잘 작동하지 않을 때는 직접 입력해보십시오.
※assets/images/의 머리에 있는 「-」를 써 잊으면 에러가 되므로 주의해 주세요

이미지를 표시하는 코드 추가

이미지를 보려는 위치에 코드를 추가합니다.

Image.asset('assets/images/dog.png'),

보충 1

네트워크에 준비된 이미지를 표시하고 싶은 경우는, 이하의 코드를 기술하는 것만으로 할 수 있습니다.

Image.network('https://picture/test.png');

보충 2

화면 상단에 이런 것이 표시될지도 모릅니다. pubspec.yaml 파일을 편집한 것으로 「패키지 정보 등으로 변경이 필요할지도 모릅니다만 갱신합니까?」라고 하는 알림입니다만, 이번의 경우는 무시해도 괜찮습니다.