[Flutter] Wrap widget 에 대하여...

 

Wrap widget

Row / Column 과 같이 가로 또는 세로 방향으로 children을 둘수있는 위젯입니다.

 

 

Wrap(
  direction: Axis.horizontal,
  spacing: 10,
  runSpacing: 10,
  children: [
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, 
      				child: const Text('AH')),
      label: const Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, 
      				child: const Text('ML')),
      label: const Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, 
      				child: const Text('HM')),
      label: const Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, 
      				child: const Text('JL')),
      label: const Text('Laurens'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, 
      				child: const Text('AH')),
       label: const Text('Hamilton'),
    ),
     Chip(
        avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, 
        				child: const Text('ML')),
       label: const Text('Lafayette'),
    ),
  ],
)

 

Wrap Widget

 

 

위와 같이 가로 방향으로 더이상 child를 채울 공간이 없다면 다음 라인으로 넘어가 child를 그리게 됩니다.

반면, 비슷한 Row 위젯으로 그려보면 화면 사이즈를 넘어버리면 overflowed가 발생해버리는 문제점이 있습니다.

 

Row Widget

 

 

상황에 맞춰 편리하게 사용할 위젯일듯합니다.

 

 

Properties

Property	Description	Type
children	자식 위젯들	List<Widget>
direction	주축 방향.	Axis
crossAxisAlignment	교차축 한 줄 내에서 나열 방식	WrapCrossAlignment
alignment	주축에서 child 나열 방식	WrapAlignment
runAlignment	교차축에서 각 줄의 나열 방식	WrapAlignment
spacing	주축 자식 사이 간격	double
runSpacing	교차축간 줄 사이 간격	double
textDirection	수평 배치 방향	TextDirection?
verticalDirection	수직 배치 방향	VerticalDirection