상세 컨텐츠

본문 제목

FlutterFlow 기초 - #24 베이스 위젯 Image

앱 개발/개발 Tool

by 2^7 2025. 4. 2. 21:00

본문

베이스 위젯 Imgae위젯  사용방법

  이미지(Image)위젯은 페이지에 이미지를 추가할 때 사용하는 위젯

Properties 설정하기

1) Padding & Alignment

  • Image전체의 Padding과 Ailgnment를 설정

2) Image Properties

  • Width & Height : 이미지의 가로, 세로 사이즈
  • Mem Width & Height : 이미지가 디코딩되어야 하고 메모리에 캐시되어야 하는 가로, 세로 사이즈
  • Border Radius : 모서리를 둥글게 설정
  • Image Type : 사용할 이미지를 어디서 가져올 지 정함
    • Network : 온라인에 있는 이미지 경로를 가져올때
    • Asset : 로컬에 있는 이미지를 사용할 때(이미지 업로드)
    • Uploaded File : 데이터베이스에 저장되어 있는 이미지를 가져올 때
  •  Image Format
    • Auto : 가져온 이미지에 따라 자동으로 이미지 형식을 설정
    • Image : jpg나 png로 설정
    • SVG : svg파일로 설정
  • Box Fit : 이미지 채움 방식 설정
    • Fill : 이미지를 전체 공간에 채움
    • Contain : 원본 사이즈 비율 그대로 이미지를 채움
    • Cover : 원본 사이즈 비율은 유지한채로 공간을 채움
    • Fit Width : 이미지 가로 사이즈에 맞춰 공간을 채움
    • Fit Height : 이미지 세로 사이즈에 맞춰 공간을 채움
    • None : 이미지를 중심 기준으로 공간을 채움
    • Scale Down : 이미지를 공간 중심에 맞추기 위해 크기를 줄여서 채움
728x90

관련글 더보기