[Flutter] 행에서 위젯을 자동 줄바꿈 해주는 wrap 사용방법

Page를 구성할 때 위젯이 일정한 간격으로 배열이 되는 경우가 있습니다. 이럴 때 유의 해야 되는 점은 기기의 화면 크기마다 배열이 자동 줄 바꿈 되어야 한다는 것인데요. 이때 필요한 위젯이 Wrap 위젯입니다.

Wrap을 사용하면 화면크기 데이터를 불러와 위젯의 크기로 나누어서 계산하는 그런 복잡한 과정을 생략할 수 있습니다.

목차

1. WRAP 예시 코드

 

WRAP 예시 코드

Wrap(
            runSpacing: 10,
            spacing: 10,
            children: [
              for (int index = 0;
                  index < ExhibitionsKeyword.values.length;
                  index++)
                CommonBorderContainer(
                  padding:
                      EdgeInsets.only(left: 12, right: 12, top: 6, bottom: 6),
                  bordercolor: Colors.transparent,
                  backcolor: Color(0Xbbfeeaea),
                  widget: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        width: 20,
                        height: 20,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: ExhibitionsKeyword.values[index].image,
                                fit: BoxFit.fill)),
                      ),
                      SizedBox(
                        width: 2,
                      ),
                      Text(
                        ExhibitionsKeyword.values[index].korean,
                        style: TextStyle(
                          color: Colors.red,
                          fontSize: 15,
                        ),
                      ),
                    ],
                  ),
                ),
            ],
          ),

사용방법은 간단합니다. 위젯의 배열을 children에 넣어주고 상하좌우의 간격을 설정해주면 됩니다. 주로 사용하는 속성은 runspacing, spacing, children입니다.

• spacing : main axis 방향의 위젯사이의 간격을 정하는 속성입니다. 즉 direction 속성이 horizontal이면 수평에서의 위젯 간격이고, vertical이면 수직에서의 위젯 간격입니다.
• runspacing : cross axis 방향의 위젯사이의 간격을 정하는 속성입니다. direction이 horizontal이면 수직에서의 위젯 간격이고, vertical이면 수평에서의 위젯 간격입니다.
• children : 위젯의 배열을 넣는 속성입니다.
• direction : children에 들어가는 위젯배열의 정렬 방향을 정하는 속성입니다. 기본값은 horizontal로 정해져 있습니다.