쏘니의 개발블로그

mage 위젯은 Flutter에서 이미지를 표시하는 가장 기본적인 위젯입니다. 다양한 이미지 소스에서 이미지를 가져올 수 있도록 지원합니다. 여기서는 NetworkImage를 사용하여 네트워크에서 이미지를 가져와 표시하는 예제에 대해 설명합니다.

주요 속성

• image: 이미지 소스를 지정합니다. NetworkImage, AssetImage, FileImage, MemoryImage 등을 사용할 수 있습니다.

• fit: 이미지의 박스 내에서의 배치 방법을 지정합니다. BoxFit 속성을 사용하여 조정합니다.

assets images 보여주기

body: Center(
          child: Image.asset('assets/images/my_image.png'),
        ),

네트워크 이미지 가져오기 예시

body: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  child: Image(
    image: NetworkImage(
      'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg'
    ),
    // fit: BoxFit.fill,
  ),
)

body: Center(
          child: Image.network('https://flutter.dev/images/flutter-logo-sharing.png'),
        ),

속성 설명

1. Image 위젯:

• image: NetworkImage를 사용하여 네트워크 URL에서 이미지를 가져옵니다.

• fit: BoxFit.fill을 사용하여 이미지가 위젯의 박스를 채우도록 합니다.

2. NetworkImage:

• url: 이미지의 URL을 지정합니다. 네트워크에서 이미지를 가져옵니다.

BoxFit 옵션

• BoxFit.fill: 이미지의 원본 비율을 무시하고, 컨테이너를 완전히 채우도록 크기를 조정합니다.

• BoxFit.contain: 이미지의 원본 비율을 유지하면서, 컨테이너 안에 완전히 들어가도록 크기를 조정합니다.

• BoxFit.cover: 이미지의 원본 비율을 유지하면서, 컨테이너를 완전히 덮도록 크기를 조정합니다.

• BoxFit.fitWidth: 이미지의 너비가 컨테이너의 너비에 맞춰지도록 크기를 조정합니다. 높이는 원본 비율을 유지합니다.

• BoxFit.fitHeight: 이미지의 높이가 컨테이너의 높이에 맞춰지도록 크기를 조정합니다. 너비는 원본 비율을 유지합니다.

• BoxFit.none: 이미지의 크기를 조정하지 않고, 원본 크기를 유지합니다.

• BoxFit.scaleDown: 이미지의 크기를 원본 비율을 유지하면서 컨테이너에 맞도록 축소합니다.

예제 변경: BoxFit 옵션 비교

body: Column(
          children: <Widget>[
            Expanded(
              child: Image(
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg',
                ),
                fit: BoxFit.fill,
              ),
            ),
            Expanded(
              child: Image(
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg',
                ),
                fit: BoxFit.contain,
              ),
            ),
            Expanded(
              child: Image(
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2024/06/23/06/27/lake-8847415_1280.jpg',
                ),
                fit: BoxFit.cover,
              ),
            ),
          ]

요약

• Image 위젯: Flutter에서 이미지를 표시하는 기본 위젯입니다.

• NetworkImage: 네트워크 URL에서 이미지를 가져오는 이미지 프로바이더입니다.

• BoxFit: 이미지를 컨테이너 내에서 어떻게 맞출지 결정하는 속성입니다. 다양한 옵션을 통해 이미지의 배치 방법을 조정할 수 있습니다.

문서 참고

• Image 클래스 문서

• NetworkImage 클래스 문서

• BoxFit 클래스 문서