[Flutter] 코딩 스터디 13회차 | 이미지와 폰트 추가해보기

✨ 목표

• 책 '플러터 앱 프로그래밍' p.96~103 학습.

 

✨ 이해한 것

• 자주 사용되는 이미지는 앱에 넣어두었다가 직접 호출하는편이 데이터 사용 혹은 속도 면에서도 유리함.
• pubspec.yaml 파일에 이미지, 폰트 정보를 추가해야 플러터 앱의 환경설정에 맞게끔 출력이 가능해짐.
  • pubspec.yaml은 들여쓰기에 주의해야 함. 앱이 제대로 동작하지 않을 수 있기 때문에.
  • pubspec.yaml을 수정했을 경우 노란 알림창에 뜨는 Get dependencies를 클릭해줘야 자동으로 변경된 정보를 출력할 수 있게 됌.
  • 해당 파일에 이미지, 폰트등을 집어넣는 코드는 다음과 같다.

flutter:
(...)
 assets:
  - 이미지파일 경로
 fonts:
  - family: 폰트명
    fonts:
      - asset: 폰트파일 경로

 

• 이미지 크기를 넣을 때는 단위를 입력하지 않아도 number만 적어도 기본적으로 px로 인식하는듯.
• CSS처럼 이미지 크기 조절값등이 BoxFit을 이용하여 .fill, .contain, .cover, fitWidth,Height, none, scaleDown등이 있다. 아무래도 마크업 하는것처럼 contain 혹은 scaleDown위주로 사용하게 되지 않을까 싶음. 후자의 scaleDown 속성은 전체 이미지가 나올 수 있게끔 이미지 크기를 조절해서 표시하는 기능이라고 하는데 일단 contain과 비슷하게 사용하되 전체 꽉 차게 사용하면서 비율 맞게끔 쓰려면 contain, 이미지의 최대크기를 변경하지 않으려면 scaleDown 위주로 사용하면 될 것 같다.

오늘의 결과화면~!

​

✨ 이해 안되는 것

• 없다. 

​

✨ 소감

• 너무 연동성이 직관적으로 이루어져 있어서 계속 이게 맞나? 싶어서 몇번이고 다시 들여다보게 됨.
• 이미지나 폰트등을 사용할때는 일종의 package.json같은 pubspec.yaml을 이용하여 하나하나 추가해서 사용해야 한다는것이 재밌게 느껴졌다. 폴더로 바로 넣으면 왜 인식이 바로 안되는거징 궁금.