플러터 그리드 뷰 사용해보기

그리드뷰는 리스트 뷰와는 다르게 행과 열에 아이템을 넣어줄수있는 위젯을 말합니다.

먼저 앱바와 그리드뷰의 스크롤이 이어지게 하기위해선 sliver 로 그리드뷰를 지정해주어야합니다

SliverGrid라는 위젯을 사용하게되는데

SliverGrid(
required gridDelegate://그리드뷰의 설정
SliverGridDelegateWithMaxCrossAxisExtent(가로축의 최대크기를 지정해서 자동으로 그리드뷰의 열수를 맞춥니다)
(
	maxCrossAxisExtend:최대 가로크기 ex 100
    crossAxisSpacing:가로 패딩 ex 20
    mainAxisSpacing:세로 패딩 ex 30
    chidAspectRatio:가로/세로 비율 지정 ex 1/2
)
required delegate://그리드뷰의 자식을 설정
SliverChildBuilderDelegate((BuildContext ctx,int index)=>item,childCount:item.length)
//아이템 빌더를 사용해서 자식을 설정
)

해당 위젯의 구조는 이러하고 제가 사용한 소스는

 Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 100,
        crossAxisSpacing: kDefaultPadding,
        mainAxisSpacing: kDefaultPadding+10,
        childAspectRatio: 1 / 2,
      ),
      delegate:
          SliverChildBuilderDelegate((BuildContext ctx, int index) => FileThumbnail(file: dummyFile[index])
              ,childCount:dummyFile.length),
    );
  }

아이템은 따로 분리해서 위젯으로 만들어 두었습니다.

해당 아이템은

return Container(
     child: Column(
       children: [
         Container(
           decoration: BoxDecoration(
             border: Border.all(color: Colors.grey.withOpacity(0.7),width: 1),
             borderRadius: BorderRadius.circular(10)
           ),
           height: 150,
         ),
         Spacer(flex: 2,),
         Text(file.fileName,style: Styles.contentText),
         SizedBox(height: kDefaultPadding/4,),
         Text(DateFormat.kRDateFormat(file.date),style: Styles.subContentText,),
       ],
     ),
   );

라고 지정해서

이런식의 형태로 만들었고 그리드뷰의 전체는

이런식으로 만들어지게 됩니다.

고럼 다음에는 파일 관련해서 저장 불러오기에대해 준비해보겠습니다~

고럼 이만 ~