본문 바로가기
모바일 공부/Flutter

Expanded

by chogigang 2024. 4. 15.

expanded 용도: 

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

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

 

expanded 이론:

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

expanded가 없는 것이 우선적으로 넓이를 가지고, expanded가 남은 것들을 가져갑니다.

 

expanded 예시:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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만큼의 비율
    ),
  ],
),
cs

 

'모바일 공부 > Flutter' 카테고리의 다른 글

DropdwonButton  (0) 2024.05.17
future , async , await  (0) 2024.05.17
TextEditingController  (0) 2024.03.26
BottomSheet  (0) 2024.03.25
intl ,  (0) 2024.03.23