Do it! 플러터 앱프로그래밍 4장(플러터 위젯 사용법)

1. 스캐폴드를 이용한 머티리얼 디자인 적용

  1) 머티리얼 디자인 : 구글에서 사용한 플랫디자인 지침

  2) 머티리얼 디자인 적용을 위해 스캐폴드 클래스 이용

    - 위젯을 여러개 만들때는 Row, Column 위젯을 이용(Row : 가로, Column : 세로)

 

2. 이미지와 폰트 추가

  1) 이미지 표시 방법

    - 디렉터리를 생성하고 image 삽입(ex - image.png)

    - pubspec.yaml에 해당 이미지 정보 추가

// image 추가 예시
assets:
 - image/image.png

    - dart 파일에 코드 추가

      (file : 외부의 폴더나 갤러리에 있는 파일사용 / asset : 앱 제작시 미리 넣어놓은 파일 사용 / memory : 배열, 문자열 형대의 이미지 데이터 사용)

    - 이미지 크기 조절

fit 옵션값	설명
BoxFit.fill	width, height를 가득 채워서 그림
BoxFit.contain	이미지가 잘리지 않고 비율이 변하지 않는 범위에서 가능한 크게 그림
BoxFit.cover	비율을 유지한 채 지정한 범위를 모두 덮도록 그림
BoxFit.fitWidth	width를 꽉 채워서 그림(이미지가 잘릴수 있음)
BoxFit.fitHeight	height를 꽉채워서 그림(이미지가 잘릴수 있음)
BoxFit.none	원본 이미지 표시(이미지가 잘릴수 있음)
BoxFit.scaleDown	전체 이미지가 나올수 있도록 이미지 크기를 조절

  2) 폰트 변경

    - 디렉터리를 생성하여 폰트 파일을 삽입

    - pubspec.yaml 파일을 열고 폰트 추가

// Font 추가 예시
fonts:
 - family: Pacifico
  fonts:
   - asset: font/Pacifico-Regular.ttf
    weight: 400

    - dart 파일에 코드 추가

 

3. 사용자와 상호작용하는 앱 만들기

  1) 덧셈 계산기 앱 만들기

    - ElevatedButton 위젯의 onPressed : 버튼이 눌렸을 때 발생하는 이벤트

    - 이미지가 붙어 보일 경우 간격을 벌리기 위해 Padding 사용

    - TextField를 다루기 위해 TextEditngController 설정이 필요

키보드 유형	설명
text	- 기본 텍스트
multiline	- 멀티 라인 텍스트(여러줄을 입력할 때 사용)
number	- 숫자 키패드
phone	- 전화번호 전용 키패드
datatime	- 날짜 입력 키패드
emailAddress	- @ 표시등 이메일 입력 키패드
url	- URL 주소 입력 창

    - setState() : 위젯의 상태를 갱신