1. Basic Flutter layout concepts

원문을 보고중간중간에 있는 Example들은 반드시 해보시고 이해하셔야합니다.

Flutter의 UI는 XML 파일 등이 아닌 코드로 작성되므로 다른 프레임워크와는 다릅니다. 위젯은 Flutter UI의 기본 구성요소입니다. 이 코드랩을 진행하며 Flutter의 거의 모든 것이 위젯이라는 것을 알 수 있습니다. 위젯은 UI의 특정 부분을 설정하는 불변 객체입니다. 또한 Flutter 위젯은 작성 가능하며 기존 위젯을 결합하여 더 정교한 위젯을 만들 수 있음을 알게된다. 이 코드랩 마지막에, Flutter UI를 사용하여 명함을 사용할 수 있게 될것입니다.

Row and Column classes

Row와 Column은 위젯을 포함하고 배치하는 클래스입니다. Row 또는 Column 내부의 위젯 안에 위젯이 있으면 그것들을 자식이라고 하고 Row 또는 Column을 부모라고합니다. Row는 위젯을 가로로 배치하고 Column은 위젯을 세로로 배치합니다.

Mission: Row와 Column의 차이를 명확히 알아야합니다!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. Run Button을 누르고 Row의 결과를 봅니다
2. 코드에서 Row를 Column으로 바꾸고 결과를 봅니다.

Axis size and alignment

지금까지 BlueBox 위젯은 UI 출력의 왼쪽 또는 상단에 나열되어있었습니다. Axis size 로 위젯의 간격을 지정하고 Alignment로 배치를 지정할 수 있습니다.

mainAxisSize Property

Row와 Column은 다른 main Axis을 가지고 있습니다. Row의 기본 Axis는 수평이고, Column의 기본 Aixs는 수직입니다. mainAxisSize 속성은 main Axis에서 Row와 Column이 차지할 수 있는 공간을 결정합니다. mainAxisSize 특성에는 두가지 가능한 값이 있습니다.

MainAxisSize.max

Row와 Column이 main Axis의 모든 공간을 차지할 수 있게 하는 속성입니다. 자식의 총 넓이가 main Axis의 총 공간보다 작으면 ( 자식크기 < main Axis 크기 ) 자식들 main Axis를 꽉 채울 수 있게 추가 공간이 배치됩니다.

MainAxisSize.min

Row와 Column이 자신만들의 공간만 차지하게하는 속성입니다. 이 속성은 mainAxis의 중간에 놓이게 됩니다.

TIP: MainAxisSize.max는 mainAxisSize 속성의 기본 값입니다.

Mission: MainAxisSize.max와 MainAxisSize.min이 어떤 결과가 나오는지 알아야합니다!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. Run Button을 누르고 MainAixsSize.max 의 결과를 봅니다.
2. 코드에서 MainAxisSize.max를 MainAxisSize.min으로 바꾸고 결과를 봅니다.

mainAxisAlignment Property

mainAxisSize를 MainAxisSize.max로 설정하면 Row과 Column에 뒤에 빈 공간이 추가될 수 있습니다. mainAxisAlignment 속성은 Row와 Column이 자식을 뒤 공간에 배치할 수 있는 방법을 결정합니다. mainAxisAlignment에는 6가지 가능한 값이 있습니다.

MainAxisAlignment.start

Axis의 시작부분에 자식들을 배치합니다. (Row라면 왼쪽에, Column이라면 위에)

MainAxisAlignment.end

Axis의 끝부분에 자식들을 배치합니다. (Row라면 오른쪽, Column이라면 아래쪽)

MainAxisAlignment.center

Axis의 가운데에 자식들을 배치합니다.

MainAxisAlignment.spaceBetween

자식들 사이에 간격을 균등하게 나눕니다.

MainAxisAlignment.spaceEvenly

자식들 사이를 균등하게 나누고 시작과 끝 사이도 자식들 사이 공간만큼 나눕니다.

MainAxisAlignment.spaceAround

MainAxisAlignment.spaceEvenly와 유사하지만 시작과 끝 자식의 공간은 반절만 가지게됩니다.

Mission: 모든 Alignment가 어떻게 동작했는지 기억하세요!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. Run Button을 누르고 MainAxisAlignment.start 의 결과를 봅니다.
2. 코드에서 MainAxisAlignment.start를 나머지 5개로 하나씩 바꿔보며 결과를 확인합니다.

crossAxisAglinment Property

Row와 Column은 다른 crossAxis을 가지고 있습니다. Row의 기본 Axis는 수평이고, Column의 기본 Aixs는 수직입니다. 이는 mainAxis의 반대 방향입니다 crossAxisAlignment 특성에는 다섯가지 가능한 값이 있습니다.

CrossAxisAlignment.start

CrossAxis 시작부분에 자식들을 배치합니다. ( Row면 위, Column이면 왼쪽 )

CrossAxisAlignment.end

CrossAxis의 끝 부분에 자식들을 배치합니다. ( row면 아래, Column이면 오른쪽 )

CrossAxisAlignment.center

CrossAxis의 가운데 부분에 자식들을 배치합니다.

CrossAxisAlignment.stretch

자식들을 CrossAxis 방향으로 쭉 펼치게합니다. ( Row면 아래위로, Column이면 왼쪽, 오른쪽으로 )

CrossAxisAlignment.baseline

문자 기준선에 따라 자식들을 정렬합니다. ( 뒤에서 나오니 지금은 건너뛰어요! )

Mission: CrossAxisAlignment이 어떻게 동작했는지 기억해주세요!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. Run Button을 누르고 CrossAxisAlignment.center 의 결과를 봅니다.
2. 코드에서 CrossAxisAlignment.center를 다른 4개로 하나씩 바꿔보며 결과를 확인합니다.
	- CrossAxisAlignment.baseline은 동작하지 않으니 넘어가주세요!

Flexible Widget

위에서 본 것처럼 maxinAxisAlignment 및 crossAxisAlignment 속성은 행과 열이 두 축을 따라 위젯을 배치하는 방법을 결정합니다. 행과 열은 먼저 고정 된 크기의 위젯을 배치합니다. 고정된 크기의 위젯은 배치된 후 스스로 크기를 조정할 수 없기 때문에 유연하지 않습니다.

Flexible Widget은 위젯을 래핑해서 위젯의 크기를 조정할 수 있습니다. Flexible Widget이 위젯을 래핑하면 위젯이 Flexible Widget의 자식이 되고 크기를 유연하게 조정할 수 있습니다. 위젯은 Flex 및 Fit 속성에 따라 크기가 조정됩니다.

flex

각 Flexible 위젯은 남은 공간의 비율을 결정하기 전에 다른 Flexible 속성과 자신을 비교합니다.

flex 속성은 서로를 비교할 때 flex 값의 비율에 따라 각 flex 위젯의 공간이 결정됩니다.

남은공간 * ( flex 값 / flex 값들의 총 합 )

아래 예에서 flex 값의 합 ( 2 )는 두 Flex 위젯이 남은 공간을 절반씩 가지도록 합니다.

Mission: flex값을 통해 비율을 조정할 수 있다는걸 알아주세요!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. FlexFit.loose 두개를 FlexFit.tight 로 바꿔주세요. (이게 뭔지 지금은 넘어가주세요!)
2. RUN하여 Flexible Widget이 1:1 인걸 확인해주세요.
3. 첫 Flexible Widget의 flex를 3으로 바꿔주세요.
4. RUN하여 두 Flexible Widget의 크기가 3:1인걸 확인해주세요.

fit

Flexible Widget이 추가 공간을 모두 채울지 여부를 결정합니다.

여기서 사용할 수 있는 속성은 두가지 있습니다.

• FlexFit.loose ( 기본 )
  • 위젯의 기본 크기를 사용합니다.
• FlexFit.tight
  • 위젯이 flex 비율만큼 공간을 채웁니다.

Mission: tight가 어떤건지 확실히 알고 넘어갑시다!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. 실행 결과를 확인합니다.
2. 첫 Flexible Widget의 FlexFit.loose를 FlexFit.tight로 변경하고 RUN 해주세요.
3. 첫번째 Flexible Widget를 FlexFit.loose로 되돌립니다.
3. 두번째 Flexible Widget의 FlexFit.loose를 FlexFit.tight로 변경하고 RUN 해주세요.

Expanded widget

Flexible Widget과 비슷하게 Expanded 위젯은 다른 위젯을 래핑하고 위젯이 남은 공간을 채우도록 강제할 수 있다.

TIP: Flexible 과 Expanded의 다른 점은 무엇인가?

Flexible은 Row와 Column 안에 사용하여 크기를 조정한다.

Expanded는 자식 위젯의 크기를 변경하여 크기를 조정한다.

Mission: Expanded가 어떤 역할을 아는지 알고 넘어갑시다!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. 실행 결과를 확인합니다.
2. 두번째 BlueBox를 Expanded widget으로 래핑합니다.
예시:
`Expanded(child: BlueBox(),),`

SizedBox widget

정확한 치수를 가진 위젯을 만들고 싶을 때 사용하는 두 가지 방법 중 하나이다. SizedBox 위젯은 width, height 속성을 사용하여 위젯의 크기를 조정한다. 만약 아무 자식을 가지지 않는 SizedBox를 사용하면 Width, Height만큼의 빈 공간을 만든다.

Mission: SizedBox를 사용하여 자식 사이즈를 리사이즈할 수 있음을 압시다!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. 실행 결과를 확인합니다.
2. SizedBox 위젯에 height을 100 줍니다.

Mission: SizedBox를 사용하여 빈 공간을 만들 수 있음을 압시다!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. 실행 결과를 확인합니다.
2. 마지막 BlueBox 이전에 25px의 빈 공간을 가질 수 있도록 SizedBox Widget를 생성합니다.

Spacer widget

SizedBox의 빈 공간을 만드는 기능과 비슷한 위젯입니다.

TIP: SizedBox와 Spacer의 차이는 무엇인가?

정확한 치수의 빈 공간을 만드려면 SizedBox를 사용한다.

flex 속성을 사용하려면 Spacer를 사용한다.

Mission: Flexible한 Spacer가 생성가능함을 압시다!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. 실행 결과를 확인합니다.
2. 마지막 BlueBox 이전에 flex: 1의 빈 공간을 가질 수 있도록 Spacer Widget를 생성합니다.

Text widget

Text Widget은 텍스트를 표시하고 다른 글꼴, 크기 및 색상을 구성할 수 있습니다.

Mission: 텍스트를 정렬할 수 있습니다!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. 실행 결과를 확인합니다.
2. CrossAxisAlignment.center를 CrossAxisAlignment.baseline로 변경합니다.

Icon Widget

아이콘을 쉽게 사용할 수 있는 위젯입니다. 기본적으로 Meterial 및 Cupertino 아이콘 패키지가 사전 설치되어있습니다.

Mission: 아이콘 사용법을 익힙시다!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

1. 실행 결과를 확인합니다.
2. 사이즈 50의 Icon을 [Mertial Icon library](https://api.flutter.dev/flutter/material/Icons-class.html) 에서 마음에 드는 하나를 선택하여 추가합니다.
3. Icon의 컬러를 Mertial [Color Palette](https://api.flutter.dev/flutter/material/Colors-class.html)의 Colors.amber로 설정하고 실행해봅니다.

Image Widget

이미지 위젯은 URL 및 패키지 내 이미지를 포함 할 수 있습니다.

Mission: 이미지 사용법을 익힙시다!

Mission을 수행할 수 있는 주소입니다, 클릭해주세요!

DartPad에서는 이미지를 내장하고 있지 않기 때문에 외부의 이미지 URL을 사용하여 이미지를 보여줍니다. 이 때 외부 URL을 사용하여 Image를 보여주는 방법은 `Image.network` 를 사용합니다.

1. 실행 결과를 확인합니다.
2. 아래 URL의 Image.network를 추가합니다.
https://github.com/flutter/website/blob/master/examples/layout/sizing/images/pic3.jpg?raw=true

3. pic3를 pic1, pic2 로 바꿔보면서 다시실행해븝니다

실습!

명함만들기 실습이 있습니다. 공식 사이트로가서 Exercise를 모두 따라하시면됩니다.

Exercise의 결과는 다음 Exercise의 초기상태여야합니다. 만약 결과가 다르거나 중간에 모르는게 있으면 다시 위를 참고하여 찾아봅시다.