[flutter] 플러터 GridView에서 아이템을 확대/축소하여 보여주는 방법은?

18 Dec 2023

flutter

플러터에서 GridView를 사용하여 그리드 형태로 여러 아이템을 보여줄 때, 아이템을 확대하거나 축소하여 보여주는 기능을 구현할 수 있습니다. 이를 위해 transform 속성을 사용하여 각 아이템을 확대/축소하고, gestureDetector를 추가하여 사용자 상호작용을 처리할 수 있습니다.

1. Transform 속성을 사용하여 아이템 확대/축소하기

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemBuilder: (BuildContext context, int index) {
    return GestureDetector(
      onTap: () {
        // 아이템을 확대/축소하는 기능 구현
      },
      child: Transform.scale(
        scale: 1.0, // 기본 크기
        child: Container(
          // 아이템 UI
        ),
      ),
    );
  },
  itemCount: 10,
)

2. GestureDetector를 사용하여 확대/축소 동작 구현하기

GestureDetector를 사용하여 아이템을 터치하거나 스와이프하는 등의 동작을 감지하고, 이벤트에 따라 아이템의 크기를 조절합니다.

bool isZoomed = false;
double scaleFactor = 1.0;

GestureDetector(
  onScaleStart: (details) {
    // 확대/축소 시작
  },
  onScaleUpdate: (details) {
    double newScaleFactor = scaleFactor * details.scale;
    if (newScaleFactor < 0.5) {
      newScaleFactor = 0.5;
    }
    setState(() {
      scaleFactor = newScaleFactor;
    });
  },
  onScaleEnd: (details) {
    // 확대/축소 종료
  },
  child: Transform.scale(
    scale: scaleFactor,
    child: Container(
      // 아이템 UI
    ),
  ),
);

위의 예시 코드를 참고하여, GridView에서 아이템을 확대/축소하여 보여주는 기능을 구현할 수 있습니다.

더 많은 정보는 플러터 공식 문서 Transform 및 GestureDetector를 참고할 수 있습니다.