홈 화면 구성 위젯 (이미지)
포스트
취소

화면 구성 위젯 (이미지)

게시 2024/01/11 업데이트 2024/01/11
By Sangwon Lee
9 분읽는 시간

Image (이미지)

  • 이미지를 표시하는 위젯
  • 종류
    • Image
      • ImageProvider를 통해서 이미지 표시
    • Image.asset
      • AsetBundle을 통해서 이미지 표시
    • Image.newwork
      • URL을 통해서 이미지 표시
    • Image.file
      • File 클래스를 통한 이미지 표시
    • Image.memory
      • Uint8List 클래스를 통한 이미지 표시
  • 참고

Image

  • 주로 사용하는 속성
    • ImageProvider<Object> image
      • 표시할 이미지
      • 필수
    • Widget Function(BuildContext, Widget, int?, bool)? frameBuilder
      • 이미지를 나타내는 위젯 생성을 담당하는 빌더 메소드
      • 이미지가 사용가능할 때 페이드인 효과를 주거나,
        이미지가 로드되는 동안의 표시를 해주는 등의 경우에
        사용할 수 있다.
    • Widget Function(BuildContext, Widget, ImageChunkEvent?)? loadingBuilder
      • 이미지가 로드되는 동안 사용자에게 표시할 위젯을 지정하는 빌더 메소드
    • Widget Function(BuildContext, Object, StackTrace?)? errorBuilder
      • 이미지 로딩 중 오류가 발생하면 호출되는 빌더 메소드
    • double? width
      • 이미지의 가로 길이
      • null일 경우 이미지 고유의 가로 길이만큼 지정된다.
    • double? height
      • 이미지의 세로 길이
      • null일 경우 이미지 고유의 세로 길이만큼 지정된다.
    • Animation<double>? opacity
      • null이 아닐 경우 캔버스에 그리기 전에 애니메이션의 값에 투명도를 지정한다.
    • Color? color
      • colorBlendMode에 지정된 방법을 통해 이미지와 결합할 색상
    • BlendMode? colorBlendMode
      • 이미지와 color 속성에서 지정한 색상을 결합하는 방법
      • BlendMode enum에 매우 다양한 방법이 명시되어 있다.
    • BoxFit? fit
      • 할당된 영역에 이미지의 크기를 할당하는 방법
      • 종류
        • BoxFit.contain
          • 원본 크기 유지
          • 비율의 변화가 없다.
        • BoxFit.fill
          • 지정한 영역을 꽉 채운다.
          • 지정된 영역에 맞게 비율이 변경된다.
          • 많이 사용되는 옵션이다.
        • BoxFit.fitWidth
          • 너비에 맞게 확대 및 축소가 이루어진다.
          • 수평 기준으로 스케일링이 되기 떄문에 상하 여백이 발생한다.
          • 일부 이미지가 잘릴 수도 있다.
        • BoxFit.fitHeight
          • 높이에 맞게 확대 및 축소가 이루어진다.
          • 수직 기준으로 스케일링이 되기 떄문에 좌우 여백이 발생한다.
          • 일부 이미지가 잘릴 수도 있다.
        • BoxFit.cover
          • 지정한 영역을 꽉 채운다.
          • 비율의 변화가 없다.
          • 일부 이미지가 잘릴 수도 있다.
        • BoxFit.none
          • 원본 크기 유지
          • 원본으로부터 해당 영역 크기만큼 가운데를 출력한다.
          • 일부 이미지가 잘릴 수도 있다.
      • 기본 값 : BoxFit.none
    • AlignmentGeometry alignment
      • 영역 내에서 이미지를 정렬하는 방법
      • 기본 값 : Alignment.center
    • ImageRepeat repeat
      • 영역 내에서 이미지를 제외한 공간을 그리는 방법
      • 종류
        • ImageRepeat.repeat
          • 상자가 채워질 때까지 x 및 y 방향으로 이미지를 반복한다.
        • ImageRepeat.repeatX
          • 상자가 수평으로 채워질 때까지 x 방향으로 이미지를 반복한다.
        • ImageRepeat.repeatY
          • 상자가 수직으로 채워질 때까지 y 방향으로 이미지를 반복한다.
        • ImageRepeat.noRepeat
          • 채우지 않는다.
      • 기본 값 : ImageRepeat.noRepeat
    • bool gaplessPlayback
      • 이미지 제공자가 변경될 때의 동작
      • true일 경우 이전 이미지를 계속 표시한다.
      • false일 경우 잠시동안 아무것도 표시하지 않는다.
      • 기본 값 : false
    • bool isAntiAlias
      • 안티 앨리어싱 사용 여부
      • 기본 값 : false
    • FilterQuality filterQuality
      • 이미지의 렌더링 품질
      • none → low → medium → hogh 순으로 품질이 좋아진다.
        • 대신 품질을 올리는데 걸리는 시간이 그만큼 길어진다.
      • 기본 값 : FilterQuality.low
  • 참고

안티 앨리어싱 (Anti Aliasing, AA)이란
높은 해상도의 신호를 낮은 해상도에서 나타낼 때 생기는 계단 현상(깨진 패턴)을
최소화하는 방법을 말한다.

Image.asset

  • AssetBundle에서 얻는 ImageStream을 표시하는 위젯
  • 주로 사용하는 속성
    • String name
      • 보여줄 이미지 파일의 경로 및 파일명을 지정한다.
      • 명시한 경로는 pubspec.yaml 파일에 명시되어 있어야 한다.
    • int? cacheWidth
      • 실제로 랜더링될 이미지의 가로 길이
    • int? cacheHeight
      • 실제로 랜더링될 이미지의 세로 길이
    • Image 생성자 설명 참고
      • Widget Function(BuildContext, Widget, int?, bool)? frameBuilder
      • Widget Function(BuildContext, Object, StackTrace?)? errorBuilder
      • double? width
      • double? height
      • Color? color
      • Animation<double>? opacity
      • BlendMode? colorBlendMode
      • BoxFit? fit
      • AlignmentGeometry alignment
      • ImageRepeat repeat
      • bool isAntiAlias
      • FilterQuality filterQuality
  • 참고

Image.newwork

  • 네트워크에서 얻는 ImageStream을 표시하는 위젯
  • 주로 사용하는 속성
    • String src
      • 네트워크 상에 있는 이미지 파일의 주소
    • Map<String, String>? headers
      • 사용자 정의 HTTP 헤더
      • 예시 : httpHeaders: const { 'Accept': 'image/*', }
    • int? cacheWidth
      • 실제로 랜더링될 이미지의 가로 길이
    • int? cacheHeight
      • 실제로 랜더링될 이미지의 세로 길이
    • Image 생성자 설명 참고
      • Widget Function(BuildContext, Widget, int?, bool)? frameBuilder
      • Function(BuildContext, Widget, ImageChunkEvent?)? loadingBuilder
      • Widget Function(BuildContext, Object, StackTrace?)? errorBuilder
      • double? width
      • double? height
      • Color? color
      • Animation<double>? opacity
      • BlendMode? colorBlendMode
      • BoxFit? fit
      • AlignmentGeometry alignment
      • ImageRepeat repeat
      • bool isAntiAlias
      • FilterQuality filterQuality
  • 참고

Image.file

  • File 객체에서 얻은 ImageStream을 표시하는 위젯
  • Android에서는 android.permission.READ_EXTERNAL_STORAGE 권한이 필요할 수 있다.
  • 파일에서 이미지를 로드하면 ImageCache에 유지되는 파일의 메모리 복사본이 생성된다.
  • 파일의 변경 사항은 모니터링되지 않는다.
  • 파일이 변경된 경우 ImageCache에서 해당 항목을 제거해야 한다.
  • 주로 사용하는 속성
    • File file
      • 보여줄 이미지에 대한 정보를 담고 있는 File 객체
    • int? cacheWidth
      • 실제로 랜더링될 이미지의 가로 길이
    • int? cacheHeight
      • 실제로 랜더링될 이미지의 세로 길이
    • Image 생성자 설명 참고
      • Widget Function(BuildContext, Widget, int?, bool)? frameBuilder
      • Widget Function(BuildContext, Object, StackTrace?)? errorBuilder
      • double? width
      • double? height
      • Color? color
      • Animation<double>? opacity
      • BlendMode? colorBlendMode
      • BoxFit? fit
      • AlignmentGeometry alignment
      • ImageRepeat repeat
      • bool isAntiAlias
      • FilterQuality filterQuality
  • 참고

Image.memory

  • 주로 사용하는 속성
    • Uint8List bytes
      • JPEG, PNG, GIF, 애니메이션 GIF, WebP, 애니메이션 WebP, BMP 및 WBMP같은
        이미지 형식으로 인코딩될 수 있는 인코딩된 이미지 바이트
    • int? cacheWidth
      • 실제로 랜더링될 이미지의 가로 길이
    • int? cacheHeight
      • 실제로 랜더링될 이미지의 세로 길이
    • Image 생성자 설명 참고
      • Widget Function(BuildContext, Widget, int?, bool)? frameBuilder
      • Widget Function(BuildContext, Object, StackTrace?)? errorBuilder
      • double? width
      • double? height
      • Color? color
      • Animation<double>? opacity
      • BlendMode? colorBlendMode
      • BoxFit? fit
      • AlignmentGeometry alignment
      • ImageRepeat repeat
      • bool isAntiAlias
      • FilterQuality filterQuality
  • 참고
Flutter
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.
최근 업데이트
바로가기