[ Flutter ] GridView

3 x 2 형태로 데이터를 보여주고자 하여 GridView를 사용하여 구현

Table 보다는 Grid 형식으로 사용하는 이유는 테이블의 경우에는 데이터를 구조에 맞춰서 보여줘야하지만

Grid의 경우에는 알아서 개수를 나누어 구조를 만들어주기 때문에 GridView를 사용

 

https://api.flutter.dev/flutter/widgets/GridView-class.html

GridView class - widgets library - Dart API

---

GridView

3 x 2 형태로 데이터를 보여주기위해 틀을 잡는다.

 

GridView를 사용하다보니 각 행의 최소높이가 지정되어있는것 같았다.

그러다 보니 화면 높이가 계속 정해둔 영역에서 벗어났다.

 

shrinkWrap속성을 true로 주면 높이를 조절을 할 수 있다.

이후 가로 세로 크기를 조절하기 위해 childAspectRatio 속성을 사용한다.

 

이 속성은 가로와 세로의 비율을 설정할 수 있다.

6 / 1로 설정하여 가로 세로 비율을 6:1로 우선 설정

 

crossAxiosCount는 한 행에 몇개의 아이템을 놔둘것인지 설정한다.

 

children에는 gridView로 만들 아이템들을 나란히 설정한다.

GridView.count(
          shrinkWrap: true,
          crossAxisCount: 3,
          childAspectRatio: 6 / 1,
          children: [
            Center(
                child: OutLineText(
              text: "1",
              color: textColor,
              fontSize: 16.0,
            )),
            Center(
                child: OutLineText(
              text: "2",
              color: textColor,
              fontSize: 16.0,
            )),
            Center(
                child: OutLineText(
              text: "3",
              color: textColor,
              fontSize: 16.0,
            )),
            Center(
                child: Text("4",
                    style: TextStyle(color: textColor, fontSize: 15.0))),
            Center(
                child: Text("5",
                    style: TextStyle(color: textColor, fontSize: 15.0))),
            Center(
                child: Text("6",
                    style: TextStyle(color: textColor, fontSize: 15.0))),
          ],
        ),

 

그럼 아래와 같이 3x2 형태로 children에 넣은 순서대로 채워지게 된다.