0117_코드팩토리 플러터 프로그래밍 cpt6

6장

기본위젯 알아보기

6.1 위젯소개

• everything is a widget
• 위젯은 현재 주어진 상태를 기반으로 어떤 UI 를 구현할지 정의함. 위젯의 상태가 변경되면 변경 사항에 알맞게 변경된 UI 를 화면에 다시 그려줌 이때 플러터 프레임워크는 기존 상태의 위젯과 새로운 상태의 위젯을 비교해서 UI 변화를 반영할 때 필요한 최소한의 변경 사항을 산출해서 화면을 그려냄. 결과적으로 플러터는 최소한의 리소스를 이용해서 UI 변경을 이끌어낼 수 있으며 쉽게 최대 120FPS 까지 높은 퍼포먼스를 발휘할 수 있음.

Container 위젯 : 자식을 담는 역할. 그리고 배경색, 너비와 높이, 테두리 등 디자인을 지정할 수 있음.

SizedBox 위젯 : 높이와 너비 지정. Container 와 다르게 디자인적 요소는 적용할 수 없고, const 생성자로 선언할 수 있어서 퍼포먼스 측면에서 효율적

ListView 위젯 : 리스트 구현시 사용. children 매개변수에 다수의 위젯을 입력할 수 있으며 입력된 위젯이 화면을 벗어나게 되면 스크롤이 가능해짐

UI를 위젯트리로 그릴 수 있어야 프로그래밍할 수 있음!

GestureDetector 위젯

• onTap
• onDoubleTap
• onLongPress
• onPanStart: 수평 또는 수직으로 드래그를 하는동안 드래그 위치가 업데이트 될 떄마다 실행되는 함수
• onPanEnd : 수평 또는 수직으로 드래그가 끝났을때 실행되는 함수

Padding 위젯

• EdgeInsets.symmetric (horizontal: 16, vertical:16) 가로와 세로 패딩 따로 적용

MainAxisAlignment.spaceArount : 자식위젯의 간격을 균등하게 배정하고, 왼쪽과 오른쪽 끝을 위젯 사이 거리의 반 만큼 배정해 정렬.

CrossAxisÅlignment.stretch : 반대축 최대한 늘려서 정렬

Flexible 위젯

• flex 매개변수를 사용해 각 Flexible 위젯이 얼만큼의 비율로 공간을 차지할지 지정할 수 있음.

  Column(
  	children:[
  		Flexible(
  			flex:1,
  ...
  		Flexible(
  			flex:1,
  ...
  

Expanded 위젯

위젯이 남아있는 공간을 최대한 차지함.

Expanded 위젯이 자식위젯으로 두 개라면 반반 공간을 차지하게 됨

stack 위젯

위젯을 겹치는 기능. 플러터 그래픽 엔진인 스키아 엔진은 2D 엔진이기 때문에 두께를 표현하진 못하지만 위젯 위에 위젯을 올린 효과 줌