Flutter - 반응형 레이아웃 짜기. Flexible, Expanded

왜 반응형 레이아웃을 해야할까요?

우리가 쓰는 기기의 크기가 다 다르기때문에! 특정 픽셀로 위젯 크기를 지정해버리면 너무 여백이 많이남거나 오버플로우가 발생할 수 있다!

 

HOW?

1. Flexible위젯으로 감싸기.

flexible로 감싸게 되면 일단 화면을 다 쓰도록 알아서 조정을 합니다. 

flex : ? 를 넣을 수 있는데 이를 넣을 경우 사용하는 화면에서 비율에 맞게 조정을 합니다. 

위의 그림에서 알 수 있듯이 flex 1, 2, 3에 맞춰 컨테이너의 비율이 1:2:3이네요. 밑에 파란 컨테이너는 따로 flex를 설정하지않았는데 

flex : 1 과 같은 비율로 설정됨을 알 수 있습니다.!

 

2. Expanded 위젯으로 감싸기.

flexible로 감쌌다고 해도 픽셀을 지정해주면 그에 맞춰집니다.

이때 flex를 따로 지정해주면 그에따라 expanded위젯의 크기가 변한다.(why?)

 

의문점.

expanded와 flexible 같이쓰면 expanded의 크기가 예상치 못하게 변한다. 이를 추후에 알아보자.