-
[Flutter] Wrap함께 공부하는 Flutter 2023. 4. 30. 19:07반응형
Flutter에서 Wrap은 자식 위젯들을 행과 열로 묶어서 표시할 수 있게 해주는 위젯입니다. Wrap은 자식 위젯들의 폭이나 높이가 제한된 상황에서 유용하게 사용됩니다. 만약 자식 위젯들이 모두 같은 크기를 가지고 있지 않거나, 자식 위젯의 크기를 알 수 없을 때, Wrap을 사용하여 자식 위젯을 자동으로 배치할 수 있습니다.
다음은 Wrap을 사용하여 자식 위젯을 자동으로 배치하는 간단한 예시 코드입니다.
Wrap( spacing: 8.0, // 위젯간 간격 runSpacing: 4.0, // 행 또는 열간 간격 children: <Widget>[ Chip( avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('A')), label: Text('Apple'), ), Chip( avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('B')), label: Text('Banana'), ), Chip( avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('C')), label: Text('Cherry'), ), Chip( avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('D')), label: Text('Durian'), ), Chip( avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('E')), label: Text('Elderberry'), ), ], )
위 코드는 5개의 Chip 위젯을 Wrap에 포함시켜 각 행마다 8.0의 간격을 두고 자동으로 배치하도록 합니다. 만약 화면 폭이 부족하여 다음 행으로 넘어가야 할 경우 Wrap은 자동으로 다음 행에 자식 위젯을 배치합니다.
반응형'함께 공부하는 Flutter' 카테고리의 다른 글
[Flutter] AnimatedOpacity (0) 2023.05.01 [Flutter] Scrollbar (0) 2023.05.01 [Flutter] 이메일 형식 정규식 검증 (0) 2023.04.30 [Flutter] TextFiled 기초 (0) 2023.04.23 [Flutter] 화면을 눌렀을 때 키보드 화면 등이 사라지게 하는 법 (0) 2023.04.23