UI 만들기 - 반응형 위젯 Flexible, Expanded

이번에는 컨테이너의 크기를 컨트롤하는데 사용되는 Flexible과 Expanded 위젯을 만들어볼 것이다 

화면 분할을 위해 Scaffold의 body에 Column 위젯을 만들어주고 childeren에 Container를 두 개 넣어준다

그리고 color,width,height를 지정해줬다

 

 

그러면 이렇게 되는데, 이 두개를 화면에 채우기 위해서는 디바이스의 높이를 알아야 된다

그치만 컨테이너가 가변적으로 크기가 변하도록 하는게 좋다

 

컨테이너를 반응형으로 만들기 위해서는 두번째 컨테이너를 flexible 위젯으로 감싸줘 보겠다

그리고 코드에서 정해준 값들인 width, height 값을 지워보면 아래처럼 두번째 컨테이너는 화면을 채우는 것을 볼 수 있다

 

 

이제 둘 다 채우고, 비율을 나눠서 하고 싶으면 flex: 1    flex:2  이런 flex 속성을 통해서 나눠서 채워줄 수 있다

 

 

Flexible은 아래처럼 자식 container의 크기에 맞춰서 공간을 유동적으로 저장한다

여기서 자식 컨테이너는 플러터 로고이다

 

 

여기서 Flexible을 Expanded로 변경하게 되면,

현재 Column이기 때문에 main축인 세로가 최대 크기가 되고 cross축인 가로는 이미지의 크기를 따르게 된다

 

이때 크로스축의 화면을 채우기 위해서는 alignment 속성을 이용해서 정렬을 해주면 된다

alignment: Alignment.center

근데 이렇게 하면 flexible과 expanded의 차이가 없다

 

다음은 화면에 일정한 비율로 나누지 않고, 1개의 위젯을 원하는 크기로 만드는 방법에 대해 알아볼 것이다

일단 화면의 값을 가져오는 변수를 만든다

var screenWidth = MediaQuery.of(context).size.width;
var screenHeight = MediaQuery.of(context).size.height;

 

그리고 콘솔창에 출력한다

print('screenWidth: $screenWidth');
print('screenHeight: $screenHeight');

 

 

값을 확인할 수 있다

그리고 선언된 값을 container의 width와 height에 넣어준다

이렇게 가변적으로 값을 넣어주게 되면 디바이스의 크기와 상관없이 화면의 크기를 지정할 수 있다