Dart - GridView

GridView란?

행과 열이 복잡한 Layout을 만들 때 사용할 수 있는 class이다.
listVeiw처럼 항목들을 스크롤할 수 있다는 장점이 있다.

어떻게 생성할까?

GridView는 GridView, GridView.count 와 GridView.builder 를 통해 사용할 수 있다.

첫번쨰 예시로 Gridview를 활용한 방법

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body:  MyStatelessWidget(),
      ),
    );
  }
}



class MyStatelessWidget extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp(
       home: SafeArea( 
         child: Scaffold( 
           body: makeGridView1() 
         ) 
       ) 
    ); 
  } 
  
  Widget makeGridView1() { 
    return GridView( 
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 
        crossAxisCount: 2, 
        mainAxisSpacing: 4.0, 
        crossAxisSpacing: 8.0, 
        childAspectRatio: 1.0 
      ), 
      children: [ 
        Container( 
          color: Colors.red, 
          child: Text("This is Red Container!"), 
        ), 
        Container( color: Colors.blue, 
                  child: Text("This is Blue Container!"), 
                 ), 
        Container( color: Colors.yellow,
                  child: Text("This is Yellow Container!"), 
                 ), 
        Container( color: Colors.green,
                  child: Text("This is Green Container!"), 
                 ),  
      ], 
    ); 
  } 
}

실행 결과 확인 1

GridView는 Widget을 그려내기 위해 한 행 혹은 열에 몇 개의 Widget을 만들지, Widget 사이사이의 공간은 몇인지, 각 Widget의 크기 비율은 어떠한지에 대한 정보가 필요하다.
이것에 대한 정보를 갖는 Delegate 객체를 외부에 위임하여 구현하도록 하고 GridView 내부에서는 이 객체를 전달받아 GridView를 구성한다.
GridView의 생성자에 전달한 "SliverGridDelegateWithFixedCrossAxisCount" 을 통해 생성한다.
Delegate라는 개념은 단순하게 생각하면 객체를 생성해서 넘겨주는 것 이라 말하면 좋을 거 같다.

두번째 예시로 GridView.count 를 활용한 방법

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child : GridView.count(
          crossAxisCount: 3, //1 개의 행에 보여줄 item 개수
          childAspectRatio: 1 / 2, //item 의 가로 1, 세로 2 의 비율
          mainAxisSpacing: 10, //수평 Padding
          crossAxisSpacing: 10, //수직 Padding
          children: List.generate(11, (index) {  //item 의 반목문 항목 형성
            return Container(
              color: Colors.lightGreen,
              child: Text(' Item : $index'),
            );
          }),
        ),
    );
  }
}

실행 결과 확인 2

세번째 예시로 GridView.builder를 사용한 방식

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child : GridView.builder(
          itemCount: 11, //item 개수
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, //1 개의 행에 보여줄 item 개수
            childAspectRatio: 1 / 2, //item 의 가로 1, 세로 2 의 비율
            mainAxisSpacing: 10, //수평 Padding
            crossAxisSpacing: 10, //수직 Padding
          ),
          itemBuilder: (BuildContext context, int index) {
            //item 의 반목문 항목 형성
            return Container(
              color: Colors.lightGreen,
              child: Text(' Item : $index'),
            );
          },
        ),
    );
  }
}

실핼 결과 확인 3

참고 자료
참고자료2