[Flutter] 하위 항목 자동 줄바꿈 (Wrap Widget)

✍ Wrap Widget

하위 항목을 여러 수평 또는 수직으로 표시하는 위젯입니다. Row, Column 위젯의 하위 항목들의 개수가 많아 너비를 초과하는 경우 오류가 나온다. Wrap 는 하위 항목들이 너비를 초과하면 설정한 방향(수평 또는 수직)으로 다음 줄로 위젯을 자동으로 배치해준다.

Wrap({  
  Key? key,   
  Axis direction = Axis.horizontal, 
  WrapAlignment alignment = WrapAlignment.start, 
  double spacing = 0.0,  
  WrapAlignment runAlignment = WrapAlignment.start, 
  double runSpacing = 0.0, 
  WrapCrossAlignment crossAxisAlignment = WrapCrossAlignment.start, 
  TextDirection? textDirection,  
  VerticalDirection verticalDirection = VerticalDirection.down,  
  Clip clipBehavior = Clip.none, 
  List  children = const  [], 
})

 

 

간단하게 예를 들면 다음과 같다.

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(home: Scaffold(body: SafeArea(child: _HomeScreen()))));

class _HomeScreen extends StatelessWidget {
  const _HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.greenAccent[200],
        width: 350,
        height: 450,
        child: Wrap(
          spacing: 4.0, // gap between adjacent widgets
          runSpacing: 10.0, // gap between lines
          children: <Widget>[
            Container(width: 70, height: 55, color: Colors.green),
            Container(width: 70, height: 30, color: Colors.blue),
            Container(width: 70, height: 70, color: Colors.deepOrange),
            Container(width: 70, height: 10, color: Colors.indigo),
            Container(width: 70, height: 70, color: Colors.red),
            Container(width: 70, height: 70, color: Colors.amberAccent),
            Container(width: 70, height: 70, color: Colors.black12),
            Container(width: 70, height: 70, color: Colors.purple),
            Container(width: 70, height: 70, color: Colors.amberAccent),
            Container(width: 70, height: 70, color: Colors.brown),
            Container(width: 70, height: 70, color: Colors.deepOrange),
          ],
        ),
      ),
    );
  }
}

 

 

위의 예시에서 인자값을 바꿔가며 의미를 알아보면 다음과 같다.

 

 

1. direction

주축으로 사용할 방향을 설정한다.

• Asix.vertical : 주축 수직 방향
• Asix.horizontal : 주축 수평 방향 

 

 

 

2. spacing, runSpacing

spacing 은 주축 방향의 하위 위젯들 사이의 간격이고 runSpacing 은 주축 반대 방향의 사이 간격을 정한다.

 

 

 

 

3. alignment, crossAxisAlignment, runAlignment

정렬에 대한 인자들이다. alignment 는 주축 정렬 방식을 설정하고 runAlignment 는 주축 반대 방향의 정렬 방식을 설정하고 crossAxisAlignment 는 주축 방향의 한 줄에서의 주축 반대 방향의 정렬 방식을 설정한다.

Wrap(
  direction: Axis.horizontal,
  alignment: WrapAlignment.start,
  crossAxisAlignment: WrapCrossAlignment.start,
  runAlignment: WrapAlignment.start,
...  
)

각 인자들이 가질 수 있는 값은 다음과 같다.

• WrapAlignment.start : 시작을 기준으로 배치한다.
• WrapAlignment.end : 끝을 기준으로 배치한다.
• WrapAlignment.center : 가운데를 기준으로 배치한다.
• WrapAlignment.spaceBetween : 각 위젯 사이의 간격이 동일하게 배치한다.
• WrapAlignment.spaceEvenly : 각 위젯 사이의 간격이 동일하게 배치되지만 끝과 끝이 위젯이 아닌 빈 가격으로 시작한다.
• WrapAlignment.spaceAround : 각 위젯 사이의 간격이 동일하게 배치되지만 끝과 끝의 간격이 1/2이다.

 

start 와 end 는 시작과 끝은 의미한다고 하는데 textDirection 에 따라 다르다. textDirection 은 언어마다 읽는 방향이 다른데 왼쪽에서 오른쪽(TextDirection.ltr)으로 설정되었다면 시작은 왼쪽, 끝은 오른쪽을 의미한다. 반대로 오른쪽에서 왼쪽(TextDirection.rtl)으로 설정된다면 시작은 오른쪽, 끝은 왼쪽을 의미한다. 수직방향에서는 start 는 위, end 는 아래를 뜻한다.

 

 

예시)

 

 

 

 

direction: Axis.horizontal

alignment: WrapAlignment.start
crossAxisAlignment: WrapCrossAlignment.end
runAlignment: WrapAlignment.spaceEvenly

 

 

 

 

 

 

 

 

direction: Axis.horizontal
alignment: WrapAlignment.spaceAround
crossAxisAlignment: WrapCrossAlignment.center
runAlignment: WrapAlignment.center

 

 

 

 

 

 

 

 

 

direction: Axis.vertical
alignment: WrapAlignment.start
crossAxisAlignment: WrapCrossAlignment.center
runAlignment: WrapAlignment.end

 

 

 

 

 

 

 

Wrap class - widgets library - Dart API