플러터 기본기 다지기 - 3 (GridView 위젯)

GridView 위젯

• 리스트 뷰와 마찬가지로 항목을 나열하는 위젯이지만, 리스트 뷰와 달리 한 줄에 여러 개를 함께 나열할 수 있음 (그리드 형태)
• 리스트 뷰와 마찬가지로 그리드뷰도 GridView.builder() 생성자를 제공하며,
  • itemCount, itemBuilder 속성을 통해 항목의 개수와 위젯을 지정
  • gridDelegate 속성을 설정해야 함
    • 이 속성에는 SliverGridDelegateWithFixedCrossAxisCount 객체를 지정해줘야 함
    • 해당 객체에서 crossAxisCount 값이 한 줄에 함께 나와야 하는 항목의 개수임
    • 그리드 두 방향을 설정하지 않으면, crossAxisCount는 가로를 가리킴
• 참고: scrollDirection 속성에 Axis.horizontal을 설정하면, crossAxisCount는 세로 방향을 가리킴

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('그리드뷰 위젯 연습'),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 16,
            mainAxisSpacing: 16
          ),
          itemCount: 10,
          itemBuilder: (context, index) {
            return Container(
              color: Colors.blueGrey,
              child: Center(child: Text('index number : $index')),
            );
          },
        ),
      ),
    );
  }
}