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

베이스 위젯 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 : 이미지를 공간 중심에 맞추기 위해 크기를 줄여서 채움