플러터 Wrap 위젯: 사용방법 및 옵션 [자동 줄바꿈]

 

Wrap 위젯은 자식 위젯들이 줄을 넘어가면 자동으로 줄을 바꿔 배치해주는 위젯입니다.

Row나 Column처럼 가로 또는 세로 방향으로 배치할 수 있지만, 주어진 공간을 넘어갈 때 자동으로 줄바꿈이 되기 때문에 더 유연한 레이아웃 구성이 가능합니다.

특히 태그, 버튼, 이미지 갤러리와 같은 UI를 만들 때 유용하게 사용할 수 있습니다.

1. Wrap 위젯 기본 사용법

 

기본적으로 Wrap 위젯은 자식 위젯들을 가로 방향으로 배치하다가 공간이 부족하면 다음 줄로 넘깁니다.

예시: 기본 Wrap 사용

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Wrap Example')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Wrap(
            children: <Widget>[
              Chip(label: Text('Flutter')),
              Chip(label: Text('Dart')),
              Chip(label: Text('Wrap Widget')),
              Chip(label: Text('Layout')),
              Chip(label: Text('Responsive UI')),
            ],
          ),
        ),
      ),
    );
  }
}

 

이 코드에서는 Wrap 위젯이 여러 개의 Chip 위젯을 담고 있습니다.

각 Chip은 레이블을 표시하며, 화면의 가로 폭을 넘어가면 자동으로 다음 줄로 이동하여 배치됩니다.

 

예시2: 기본 Wrap 사용

기존의 Row 위젯을 Wrap 위젯으로 변경하여, 이미지들이 화면 크기에 따라 자동으로 줄을 넘겨가며 배치합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Example image widget
    Widget _image = Image.asset(
      'images/borealis.jpg',
      height: 100,
      width: 100,
      fit: BoxFit.cover,
    );

    // List of image widgets
    List<Widget> _list = [_image, _image, _image, _image, _image, _image];

    return Scaffold(
      appBar: AppBar(
        title: Text('Wrap Example'),
      ),
      body: Center(
      	//child: Row( 오버플로우 해결을 위해 Wrap 위젯으로 변경
        child: Wrap(
          spacing: 8.0, // spacing between each child
          runSpacing: 4.0, // spacing between lines
          children: _list,
        ),
      ),
    );
  }
}

코드 설명

1. Wrap 위젯 사용

Row 대신 Wrap 위젯을 사용하여 자식 위젯들이 화면 너비를 초과할 때 자동으로 줄을 바꿔 배치됩니다.

2. spacing 옵션

spacing 옵션을 사용하여 각 이미지 간의 가로 간격을 설정했습니다.

 

3. runSpacing 옵션

runSpacing 옵션을 사용하여 각 줄 사이의 세로 간격을 설정했습니다.

 

이 코드를 통해 여러 개의 이미지가 화면 너비에 맞춰 자동으로 줄바꿈되어 배치되는 효과를 얻을 수 있습니다.

Wrap 위젯은 특히 반응형 레이아웃을 구현할 때 매우 유용합니다.

2. Wrap 위젯의 주요 옵션

Wrap 위젯에는 다양한 옵션이 있어, 자식 위젯들을 더 유연하게 배치할 수 있습니다. 주요 옵션들을 살펴보겠습니다.

2.1. direction

자식 위젯들을 배치할 방향을 지정합니다. 기본값은 Axis.horizontal로, 가로 방향으로 배치됩니다. Axis.vertical로 설정하면 세로 방향으로 배치됩니다.

Wrap(
  direction: Axis.vertical, // 세로 방향 배치
  children: <Widget>[
    Chip(label: Text('Vertical')),
    Chip(label: Text('Wrap')),
  ],
)

2.2. spacing

자식 위젯들 간의 간격을 설정합니다. 단위는 double입니다.

Wrap(
  spacing: 8.0, // 가로 간격
  children: <Widget>[
    Chip(label: Text('Spacing')),
    Chip(label: Text('Between')),
    Chip(label: Text('Items')),
  ],
)

2.3. runSpacing

줄 간의 간격을 설정합니다. 가로 방향에서는 행 사이의 간격, 세로 방향에서는 열 사이의 간격을 의미합니다.

Wrap(
  spacing: 8.0, // 가로 간격
  runSpacing: 4.0, // 줄 간의 간격
  children: <Widget>[
    Chip(label: Text('Spacing')),
    Chip(label: Text('Between')),
    Chip(label: Text('Rows')),
  ],
)

2.4. alignment

자식 위젯들을 정렬하는 방법을 설정합니다. 기본값은 WrapAlignment.start로, 왼쪽 정렬입니다.

center, end, spaceBetween, spaceAround, spaceEvenly와 같은 옵션을 사용할 수 있습니다.

Wrap(
  alignment: WrapAlignment.center, // 중앙 정렬
  children: <Widget>[
    Chip(label: Text('Center')),
    Chip(label: Text('Alignment')),
  ],
)

 

2.5. runAlignment

줄을 기준으로 자식 위젯들을 정렬하는 방법을 설정합니다. 기본값은 WrapAlignment.start입니다.

Wrap(
  runAlignment: WrapAlignment.center, // 행을 중앙으로 정렬
  children: <Widget>[
    Chip(label: Text('Run Alignment')),
    Chip(label: Text('Centered')),
  ],
)

3. Wrap과 유사한 위젯 비교

Wrap 위젯과 비슷한 위젯으로 Row와 Column이 있습니다.

Row와 Column은 각각 가로와 세로 방향으로 자식 위젯을 배치하지만, 공간이 부족할 경우 자동으로 줄바꿈이 되지 않습니다.

반면 Wrap은 공간이 부족할 경우 자동으로 줄을 바꿔줍니다.

이 차이로 인해 Wrap은 태그 리스트, 버튼 그룹, 동적 레이아웃을 구성할 때 유용합니다.

마치며

Wrap 위젯은 Flutter에서 유연한 레이아웃을 구현할 때 매우 유용한 도구입니다.

자식 위젯들이 화면의 가로 폭을 넘길 때 자동으로 줄바꿈을 하여, 화면 크기에 따라 동적으로 레이아웃을 조정할 수 있습니다.

다양한 옵션을 활용하여 원하는 레이아웃을 만들어보세요!

 

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱