[flutter] 플러터 GridView에서 아이템을 회전시키는 방법은?

18 Dec 2023

flutter

플러터에서 GridView를 사용하여 그리드 형태의 아이템을 표시하고 싶을 때가 있습니다. 이때 각 아이템을 회전시키는 방법에 대해 알아보겠습니다.

1. GridView 생성

우선, GridView를 생성하여 아이템들을 표시합니다. 아래는 기본적인 GridView의 예시입니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      child: Text('Item $index'),
    );
  },
)

이 코드에서 items는 표시할 아이템들의 리스트를 가정한 것입니다.

2. 아이템 회전

각 아이템을 회전시키기 위해서는 Transform.rotate 위젯을 사용하여 아이템을 감싸면 됩니다. 예를 들어, 아이템을 45도 회전시키는 경우 아래와 같이 코드를 작성할 수 있습니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      child: Transform.rotate(
        angle: 3.14 / 4,
        child: Text('Item $index'),
      ),
    );
  },
)

위 코드에서 angle은 라디안 값이므로, 회전시키고자 하는 각도를 라디안으로 변환하여 사용해야 합니다.

이제 위의 코드를 적용하면 GridView의 각 아이템이 45도로 회전되어 표시될 것입니다.

플러터에서 GridView를 활용하여 아이템을 회전시키는 방법에 대해 알아보았습니다. 추가적으로 Transform 위젯의 다양한 속성들을 이용하여 원하는 방식으로 아이템을 변형시킬 수 있습니다.

이제 직접 시도해보시기 바랍니다!