flutter - flutter_staggered_grid_view, 서로 다른 높이를 가진 그리드뷰

그리드뷰를 사용하면 동일한 크기의 위젯을 열로 맞추어 만들어 낼 수 있다.

하지만 좀 더 다이나믹하게 앱을 만들기 위해 크기가 섞여있는 그리드 형식을 구현해야 한다.

 

flutter_staggered_grid_view 패키지를 사용하면 된다.

 

flutter_staggered_grid_view | Flutter Package

 

flutter pub add flutter_staggered_grid_view

 

 

1. Staggered

 

 

- 적은 수의 항목을 나타낼 때 사용

- 스크롤 불가

 

 

2. Masonry

 

 

- 각 열의 위젯 크기가 다양하다.

 

 

3. Quilted

 

 

- 각 행의 높이는 각 열의 너비와 같다.

- 타일 안에 패턴을 다양하게 할 수 있다.

- 다른 항목보다 특정 항목을 강조할 때 사용

 

4. Woven

 

 

- 높이는 aspectRatio(너비/높이) 로 정의된다.

- 너비는 crossAxisRatio0(제외)과 1(포함) 사이의 (너비/열 너비) 로 정의된다.

- 행의 높이는 타일의 최대 높이

- 좀 더 리드미컬한 레이아웃을 만들기 위해 다양한 비율의 컨테이너 위젯을 사용해야할 때 사용

 

 

5. Staired

 

 

- 컨테이너 크기와 비율을 번갈아 사용하여 리드미컬한 효과를 나타내고 싶을 때 사용

 

 

6. Aligned

 

 

- 웹의 일반적인 그리드 형식

- 행의 높이를 다르게 할 수 있다.

 

 

이렇게 나타낼 수 있는 여러가지 방식이 있다.

그중 Masonry를 사용해본다.

 

MasonryGridView.count(
    crossAxisCount: 2,
    mainAxisSpacing: 12.0,
    crossAxisSpacing: 12.0,
    itemCount: 100,
    itemBuilder: (context, index) {
      // 랜덤 값 부여
      double height = Random().nextInt(256).toDouble();
      Color color = Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1);
      return Container(
        height: height,
        color: color,
      ); 
    },
  ),

 

CustomScrollView를 사용하고 있다면 SliverMasonryGrid.count 를 사용할 수 있다.