ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [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은 자동으로 다음 행에 자식 위젯을 배치합니다.

    반응형
Designed by Tistory.