깡샘의 플러터&다트 프로그래밍 12-2

그리드 뷰

그리드 뷰란?

항목을 나열한다는 면에서 리스트 뷰와 같지만 가로, 세로 방향으로 나열하지 않고 한 줄에 여러 개를 함께 나열할 수 있습니다.

• GridView.builder() 생성자 제공(itemCount(항목 개수), itemBuilder(위젯 지정)속성)

• gridDelegate속성 설정 -> SliverGridDelegateWithFixedCrossAxisCount 객체 지정 -> crossAxisCount값이 한 줄에 함께 나오는 항목의 개수이다.

• 그리드 뷰는 방향을 지정하지 않으면 세로로 출력하며 crossAxisCount는 가로를 가리킨다.

  • 만약 항목을 가로로 나열하려면 scrollDirection 속성에 Axis.horizontal,
    이때 crossAxisCount는 세로 방향이다.

그리드 뷰 활용하기

import 'package:flutter/material.dart';

void main() {
  runApp(ch12_2());
}

class ch12_2 extends StatelessWidget {
  ch12_2({super.key});
  List<String> citys = ['서울시', '안산시', '인천시', '천안시', '아산시', '대전시', '대구시', '광주시'];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text('practice'),
      ),
      body: GridView.builder(
        itemCount: citys.length,
   
        itemBuilder: (context, index) {
          return Card(
            child: Column(
              children: [Text(citys[index]), Image.asset('images/Ralo.png')],
            ),
          );
        },
        scrollDirection: Axis.vertical,
        gridDelegate:
            const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      ),
    ));
  }
}