[Flutter 트랙] 앱개발 종합반 2-5 - GridView

Flutter GridView 위젯

GridView 위젯은 격자(그리드) 형태의 UI를 쉽게 구현할 수 있도록 도와줍니다. 대표적인 사용 사례로는 갤러리(사진첩), 상품 목록 등이 있습니다.

---

1. GridView 기본 개념

GridView를 사용하면 여러 개의 항목을 격자 형태로 배치할 수 있습니다.

GridView 특징

• 격자(그리드) 형태의 UI 제공
• 열 개수 조절 가능
• 가로/세로 방향 조정 가능
• 컨트롤러를 이용하여 특정 위치로 이동 가능

GridView 기본 예제

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(home: GridViewExample()));
}

class GridViewExample extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: GridView.count(
                crossAxisCount: 3,  // 열 개수
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
                children: List.generate(9, (index) {
                    return Container(
                        color: Colors.blue,
                        child: Center(
                            child: Text(
                                "아이템 ${index + 1}",
                                style: TextStyle(color: Colors.white),
                            ),
                        ),
                    );
                }),
            ),
        );
    }
}

➡️ GridView.count를 사용하면 열 개수(crossAxisCount)를 지정하여 격자 형태의 UI를 쉽게 구현할 수 있습니다.

---

2. GridView 열 개수 지정

crossAxisCount 옵션을 변경하면 열 개수를 조절할 수 있습니다.

열 개수 변경 예제

GridView.count(
    crossAxisCount: 4,  // 4열
    children: List.generate(12, (index) {
        return Container(
            color: Colors.green,
            child: Center(
                child: Text("아이템 ${index + 1}"),
            ),
        );
    }),
),

➡️ crossAxisCount: 4 설정 시, 한 줄에 4개의 아이템이 배치됩니다.

---

3. GridView 동적 크기 조절 (화면 비율 대응)

GridView.extent를 사용하면 각 아이템의 최대 크기를 자동 조절할 수 있습니다.

GridView.extent 예제

GridView.extent(
    maxCrossAxisExtent: 120,  // 각 아이템의 최대 크기 지정
    children: List.generate(10, (index) {
        return Container(
            color: Colors.orange,
            child: Center(
                child: Text("아이템 ${index + 1}"),
            ),
        );
    }),
),

➡️ maxCrossAxisExtent: 120을 설정하면 각 아이템의 크기가 최대 120px을 넘지 않도록 자동 조절됩니다.

---

4. GridView 스크롤 방향 변경

기본적으로 GridView는 세로 방향으로 스크롤됩니다. 하지만 가로 스크롤로 변경할 수도 있습니다.

가로 스크롤 GridView 예제

GridView.count(
    scrollDirection: Axis.horizontal,  // 가로 스크롤
    crossAxisCount: 1,  // 한 줄에 1개씩
    children: List.generate(10, (index) {
        return Container(
            width: 100,
            color: Colors.red,
            child: Center(child: Text("아이템 ${index + 1}")),
        );
    }),
),

➡️ scrollDirection: Axis.horizontal을 설정하면 좌우 스크롤이 가능해집니다.

---

5. GridView 컨트롤러 사용 (특정 위치로 이동)

버튼을 클릭하면 리스트의 특정 위치로 이동할 수 있습니다.

특정 위치로 이동하는 예제

class GridViewWithController extends StatefulWidget {
    @override
    _GridViewWithControllerState createState() => _GridViewWithControllerState();
}

class _GridViewWithControllerState extends State<GridViewWithController> {
    final ScrollController _controller = ScrollController();  // 스크롤 컨트롤러 생성

    void scrollToPosition() {
        _controller.jumpTo(500);  // 특정 위치(픽셀 단위)로 이동
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Column(
                children: [
                    ElevatedButton(
                        onPressed: scrollToPosition,
                        child: Text("500px 위치로 이동"),
                    ),
                    Expanded(
                        child: GridView.builder(
                            controller: _controller,  // 컨트롤러 등록
                            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 3,  // 3열
                                crossAxisSpacing: 8,
                                mainAxisSpacing: 8,
                            ),
                            itemCount: 30,
                            itemBuilder: (context, index) {
                                return Container(
                                    color: Colors.purple,
                                    child: Center(
                                        child: Text("아이템 ${index + 1}"),
                                    ),
                                );
                            },
                        ),
                    ),
                ],
            ),
        );
    }
}

➡️ 버튼을 클릭하면 500픽셀 위치로 스크롤됩니다.

---

6. GridView 패딩 (Padding)

리스트의 내부 여백을 조정할 수 있습니다.

Padding 옵션 예제

GridView.count(
    padding: EdgeInsets.all(20),  // 상하좌우 여백 20
    crossAxisCount: 3,
    children: List.generate(9, (index) {
        return Container(
            color: Colors.teal,
            child: Center(
                child: Text("아이템 ${index + 1}"),
            ),
        );
    }),
),

➡️ EdgeInsets.all(20) 설정 시, 그리드 내부의 모든 방향에 20픽셀 여백이 추가됩니다.

---

7. 결론

• GridView는 격자(그리드) 형태의 UI를 쉽게 구현
• 열 개수, 크기 조정, 패딩, 컨트롤러 등 다양한 옵션 제공
• ScrollController를 활용하면 특정 위치로 이동 가능
• Physics 옵션을 사용하여 스크롤 효과를 조정 가능

다음 강의에서는 탭(Tab) 위젯을 살펴보겠습니다! 🚀