flutter expanded 사용법

expanded 용도: 

Row나 Column등에서 핸드폰 화면에 맞게 균일하게 배치하기 위해서 사용함.

pixel기준으로 할 경우, 핸드폰 규격에 맞추기 어렵지만, expanded를 사용할 경우 핸드폰 규격에 맞추기 쉽다.

 

expanded 이론:

부모의 남은 범위를 flex의 비율에 맞춰서 "모두" 가져간다. 

expanded가 없는것이 우선적으로 넓이를 가지고, expanded가 남은 것들을 가져간다고 생각하면 쉽다.

 

expanded 예시:

child: Column(
  children: [
    Expanded( //Expanded 안에 child로 다른걸 넣는다.
      child: Container(
        color: Colors.red,
      ),
      flex: 2, //총 flex 합에서 2만큼의 비율을 가져간다
    ),
    Text('hello'), //Expanded 범위에 포함되지 않음
    Expanded(
      child:Container(
        color:Colors.green,
      ),
      flex: 1, //총 flex 합에서 1만큼의 비율을 가져간다.
    ),
  ],
),

이렇게 2:1로 나눠지는걸 알 수있다. (위에 하늘색은 AppBar이니 양해를 부탁한다)

 

Tip: 안드로이드 스튜디오에서 추가하고 싶은 widget에 우클릭- 전구모양 아이콘- wrap with widget을 이용하면 쉽게 추가할 수 있다.