이미지 출력 위젯 생성 (AssetImage, NetworkImage)

1. asset (로컬 이미지 표시)

방법

1. root 위치에 assets 폴더를 만들어서 이미지를 추가
   
2. pubspec.yaml 에서 image path 등록
   

path folder: /
path file: assets/image/image.jpeg

3. 코드 (이미지 불러올 때)

Image.asset('assets/image/image.jpeg'),

2. network (네트워크 이미지 표시)

• 플러터가 이미지 파일을 다운로드해서 캐시에 저장하고 화면에 띄움
• aseet 이미지보다 로딩이 느림
• 인터넷 연결 필요

Image.network(
    'https://thumbs.gfycat.com/ArcticSameGoldenmantledgroundsquirrel-size_restricted.gif'),
Image.network('https://jjalbang.today/jjv22d.jpg'),

▼ image (Image) 추가 설명

Image(
  image: AssetImage('assets/image/image2.gif'),
)

Image(
  image: NetworkImage(
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

3. file (파일 이미지 표시)

• 외부 폴더나 갤러리에 있는 이미지를 가져올 땐 File type

Image.file(file),

#. 공통된 속성

• width, height
• BoxFit

// 오버플로우 났을때 SingleChildScrollView로 감싸면 스크롤 가능하게 설정
body: SingleChildScrollView(
        child: Column(
          children: [
            Image.asset(
              'assets\\image\\image01.jpg',
              width: 200,
              height: 200,
              fit: BoxFit.contain, // 기본값 (이미지 안잘림, 정해짐 사이즈 안에서 비율이 변하지 않고 나타냄)
            ),
            Image.asset(
              'assets\\image\\image01.jpg',
              width: 200,
              height: 200,
              fit: BoxFit.fill, // 내가정한 사이즈에 맞춰 채움, 이미지 왜곡 일어남
            ),
            Image.asset(
              'assets\\image\\image01.jpg',
              width: 200,
              height: 200,
              fit: BoxFit.cover, // 내가정한 사이즈보다 크면 이미지 짤릴수 있음, 이미지 왜곡은 안일어남
            ),
            Image.asset(
              'assets\\image\\image01.jpg',
              width: 300,
              height: 300,
              fit: BoxFit.fitWidth, // 각 너비 기반, (이미지 짤리수 있으나, 이미지외곡은 안일어남)
            ),
            Image.asset(
              'assets\\image\\image01.jpg',
              width: 300,
              height: 300,
              fit: BoxFit.fitHeight, // 각 높이 기반, (이미지 짤리수 있으나, 이미지외곡은 안일어남)
            ),
            Image.asset(
              'assets\\image\\image01.jpg',
              width: 300,
              height: 300,
              fit: BoxFit.none, // 본 이미지 사이즈 그대로 출력함
            ),
            // Image.network('https://t1.daumcdn.net/cafeattach/1WjuI/013f9608a0d67f18d2b334a3ee75aebb0fcbd787'),
          ],
        ),
      ),