플러터 위젯 활용

머티리얼 디자인과 스캐폴드

머티리얼 디자인

• 구글에서 2014년부터 사용한 플랫 디자인 지침 → 머티리얼 디자인이 나오기 전까지는 앱마다 디자인이 달랐음. 앱 개발사 별로 추구하는 디자인 철학과 설계 방식에 따라 아이콘이나 버튼을 만듦. ⇒ 이 때문에 개성은 있지만, 통일되지 않은 사용자 경험을 줄 수 밖에 없었음.
  
• 머티리얼 디자인을 적용하면 평면, 단색 위주의 간결한 디자인을 바탕으로 앱의 용량을 줄이고 동시에 속도를 개선할 수 있음.
• 머티리얼 디자인을 적용하기 위해서는 스캐폴드 클래스를 사용해야 함. → 스캐폴드 클래스는 머티리얼 디자인 레이아웃으로 설계하는 것을 돕는 역할을 함.
  
• 제목 줄의 경우 스캐폴드 위젯에서 앱바 옵션으로 구현함.

( + ) 오른쪽에 떠 있는 듯한 버튼을 floating button이라고 따로 부름.

( + ) Container는 위젯을 담아 관리하는 상자임.

이미지와 폰트 플러터에서 사용하는 방법

서버에서 직접 이미지를 가져와 출력하는 방법도 있지만,

자주 사용하는 이미지는 앱에 넣어두었다가 직접 호출하는 편이 데이터 사용이나 속도 면에서 유리함.

이미지 삽입 방법

이미지를 플러터에서 삽입하는 방법은 아래와 같음.

1. New → Direcotory 생성한 다음 image라는 이름으로 폴더 생성.

2. 이미지 파일을 마우스로 드래그 앤 드롭하여 1에서 생성한 폴더에 넣기

3. pubspec.yaml 파일에 해당 이미지 정보 추가.

   기존 안드로이드나 스위프트 네이티브 앱 개발에서는 프로젝트에 이미지만 추가하면 바로 사용 가능하지만,

   플러터 앱의 환경 설정과 관련된 부분인 pubspec.yaml에 이미지와 관련된 부분을 추가해야 함.

   해당 파일에 플러터 버전 관리나 새로운 패키지 역시 추가 가능하며 이미지와 폰트 역시 추가 가능함.

   ( + ) pubspec.yaml 파일에 코드 추가 시 유의할 점

   • 해당 파일에 코드 추가 시 들여쓰기에 유의해야 함. 들여쓰기를 잘못하면, 앱이 제대로 동작하지 않을 수 있음. 아래와 같이 이미지를 추가해야 함.

     flutter:
     	uses-material-design : true
     	assets: # 이미지는 이런 식으로 추가함. 
     		- image/flutter_logo.png

   1. 이렇게 앱에 포함된 이미지를 호출하는 방법에는 크게 3가지가 있음.

      • file 외부의 폴더나 갤러리에 있는 파일을 사용하는 경우
        
      • asset 앱을 만들 때 미리 넣어놓은 파일을 사용하는 경우
        
      • memory 배열이나 문자열 형태의 이미지 데이터를 사용하는 경우
        

      각 상황에 맞춰 이미지_경로 형태로 이미지를 호출하면 됨. 아래는 asset의 예시임.

      children: <Widget> [
      	Image.asset('image/flutter_logo.png')
      ]

   2. 이미지의 크기 조정은 위의 이미지 호출하는 코드에서 따로 옵션을 지정해주면 됨.

      Image.asset('image/flutter_logo.png', width:200, height:100)

      이미지의 높이와 넓이를 지정해야 할 때, fit을 사용하면 원하는 형태로 표시할 수 있음.

      ( + ) 이미지 크기를 조절하는 fit의 옵션 값들

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

      ---

      폰트 변경 방법

      이미지 추가와 마찬가지로, font라는 새 폴더를 만들고 준비한 폰트 파일을 끌어 넣음.

      → 폰트 파일 이름은 영어로만 가능.

      폰트를 불러오는 코드는 아래와 같음.

      flutter:
      	- family : Pacifico
      	fonts :
      		- asset : font / Pacifico-Regular.ttf
      			weight: 400

      불러온 폰트를 실제 앱에 적용하는 코드는 아래와 같음.

      Text('Hello Flutter', 
      			style : TextStyle(fontFamily: 'Pacifico',
      			fontSize: 30, color: Colors.blue),
      )

      ( + ) pubspec.yaml 파일을 이용하면 안드로이드의 gradle이나 node.js의 npm처럼 간단하게 패키지를 내려받아 사용 가능함.

   ---

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

   • 기본적으로 버튼은 사용자가 눌렀을 때, onPressed라는 이벤트가 발생함.
   • Padding 코드를 활용해 위젯 사이의 간격을 넓힐 수 있음.
     • Padding을 이용해 EdgeInsets.all 옵션을 지정하면 사방으로 모든 공간에 여백이 생김
     • EdgeInsets.only 옵션은 left, right, top, bottom에 원하는 값을 넣어 여백을 줄 수 있음.
   • 텍스트 필드에서 keyboardType에는 사용자에게 보일 키보드를 지정할 수 있음. 플러터는 자주 사용되는 키보드 유형을 미리 지정해 놓음.

     text	기본 텍스트
     multiline	멀티라인 텍스트
     number	숫자키보드 표시
     phone	전화번호 전용 키보드
     datetime	날짜 입력 키보드
     emailAddress	@ 표시 등 이메일 입력 키보드
     url	주소 입력 창

   • setState() 함수는 위젯의 상태를 갱신하는 역할을 수행함.
     • setState() 함수에서 데이터가 바뀌면 해당 데이터를 사용하는 모든 위젯에 알려줌.
     • 또한 setState() 함수는 state 클래스를 상속받은 클래스에서만 호출할 수 있음.
   • DropdownButton 기능
     • DropdownButton에 전달한 items는 펼침 버튼에 표시할 아이템 목록
     • onChanged는 아이템이 바뀔 때 처리하는 이벤트
     • 펼침 버튼에 표시할 아이템 목록을 만들어야 함 → 리스트를 선언하고 아이템들을 할당 한 다음, DropdownButton 형식의 리스트를 하나 더 선언함.