Flutter - GridView.count, 격자 레이아웃, 타일 레이아웃

안녕하세요. 독학코딩입니다. 오늘은 Flutter에서 격자무늬의 레이아웃을 만드는 GridView에 대해서 배워보겠습니다. 리스트로 이루어진 위젯들을 그리드로 만들기 좋고 기본적으로 화면 스크롤을 지원하니 정말 유용한 위젯입니다.

 

Flutter GridView.count

GridView.count(
  crossAxisCount: 4,
  children: List.generate(40, (index) {
    return Container(
      color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0)
    );
  },),
)

위는 GridView.count의 기본 사용 방법 입니다. crossAxicCount는 GridView를 몇 개로 나눌지 정하는 것입니다. 1로 하면 단순한 ListView가 되고 크게 설정할수록 더 잘잘하게 화면이 나뉩니다.

 

children에는 GrildView에 넣으실 위젯들을 리스트로 넣으시면 됩니다. 위의 예제의 경우는 코드 간소화를 위해 List.generate를 사용했는데 꼭 이렇게 하실 필요는 없습니다. 보통은 아래와 같이 합니다.

children: [
	mywidget1,
    mywidget2,
    mywidget3
    ......
]

 

Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0)

위 코드는 그냥 색을 랜덤으로 생성하는 코드입니다. 크게 신경안쓰셔도 됩니다.

 

GridView.count는 crossAxicCount 말고도 다른 인자도 많습니다. 아래 인자들도 한번 테스트 해보시면 재밌을 겁니다.

crossAxisSpacing: 10.0, // 세로로 띄우기
mainAxisSpacing: 10.0, // 가로로 띄우기,
padding: EdgeInsets.all(10), // 겉테투리 페딩,
childAspectRatio: 2.2, // children 위젯의 가로*세로 비율 설정