Wrap

1. 역할

• 화면 공간에 맞춰 자식 위젯들을 여러 줄로 배치.

2. 주요 속성

• direction: 배치 방향 설정(기본: 가로).

• spacing: 자식 간의 간격 설정.

• runSpacing: 줄 간 간격 설정.

• alignment: 주축 방향 정렬 방식.

• runAlignment: 줄 간 정렬 방식.

• crossAxisAlignment: 교차 축 정렬 방식.

3. 특징

• 자식 위젯이 화면을 넘칠 경우 자동 줄바꿈 처리.

• 가로, 세로 배치 모두 가능.

4. 사용 예

• 태그, 버튼 그룹, 동적 레이아웃 등 화면 크기에 따라 유동적으로 배치해야 하는 경우.

5. 예시코드와 출력

• 예시코드

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            child: Text("Wrap", style: TextStyle(fontSize: 50)),
          ),
          Wrap(
            children: [
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
              Icon(Icons.person, size: 50,),
            ],
          ),
        ],
      ),
    );
  }
}

• 출력

6. Grid와의 차이

• 줄바꿈: Wrap은 자동, GridView는 고정 셀 사용.

• 스크롤: Wrap은 비활성 기본값, GridView는 활성 기본값.

• 간격 설정: Wrap은 간단한 속성 제공, GridView는 gridDelegate 사용.

• 위젯 크기: Wrap은 개별 크기 설정 가능, GridView는 동일한 크기 유지.