타일 그리드

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

사진 갤러리나 앱의 홈 화면은 항목을 긴 열 하나로 나열하지 않고 여러 행에 나란히 보여 줍니다. GridView.count는 자식 위젯을 그리드에 배치하고 목록처럼 스크롤합니다:

GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
)

crossAxisCount는 각 행에 들어가는 타일의 개수입니다. 타일은 왼쪽에서 오른쪽으로 행을 채운 다음 새 행을 시작합니다. 각 타일은 정사각형이며, 한 행의 타일들은 행의 너비를 나누어 사용합니다.

mainAxisSpacing은 행 사이의 간격이고, crossAxisSpacing은 한 행에서 타일 사이의 간격입니다.

챌린지

쉬움

여섯 가지 색상이 ListView에 한 행에 하나씩 쌓여 있습니다. 대신 한 행에 타일 두 개씩 그리드로 표시하세요. crossAxisCount: 2인 GridView.count를 사용하세요. 타일 사이의 간격은 8픽셀로 유지하세요.

직접 해보기

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('Colors')),
        body: ListView(
          padding: const EdgeInsets.all(8),
          children: [
            Container(
              color: Colors.red,
              alignment: Alignment.center,
              child: const Text('Red'),
            ),
            Container(
              color: Colors.orange,
              alignment: Alignment.center,
              child: const Text('Orange'),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: const Text('Yellow'),
            ),
            Container(
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text('Green'),
            ),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              child: const Text('Blue'),
            ),
            Container(
              color: Colors.purple,
              alignment: Alignment.center,
              child: const Text('Purple'),
            ),
          ],
        ),
      ),
    );
  }
}