빌더로 만드는 그리드

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 11번째.

사진 100장으로 이루어진 그리드도 긴 목록과 같은 문제가 있습니다. 모든 타일을 하나씩 작성할 수 없고, 타일을 한꺼번에 모두 만들면 느립니다. GridView.builder는 ListView.builder처럼 타일이 스크롤되어 화면에 들어올 때 만듭니다.

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemCount: photos.length,
  itemBuilder: (context, index) {
    return Image.network(photos[index]);
  },
)

긴 이름인 SliverGridDelegateWithFixedCrossAxisCount는 그리드의 레이아웃을 지정합니다. 즉, 행마다 타일 수를 고정합니다. 이 이름은 GridView.count에 직접 전달하던 crossAxisCount와 간격을 받습니다.

itemCount와 itemBuilder는 목록에서와 똑같이 작동합니다. 빌더는 각 타일의 index를 받으며, 인덱스는 0부터 시작합니다.

챌린지

쉬움

달력에는 손으로 작성한 6월의 첫째 주만 표시됩니다. GridView.count를 GridView.builder로 바꾸어 1부터 번호가 매겨진 30일 전체를 한 행에 7개씩 표시하세요.

직접 해보기

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('June')),
        body: GridView.count(
          padding: const EdgeInsets.all(8),
          crossAxisCount: 7,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          children: [
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('1'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('2'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('3'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('4'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('5'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('6'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('7'),
            ),
          ],
        ),
      ),
    );
  }
}