Flutter에서 스크롤 가능한 그리드 만들기: SliverGrid
Flutter는 강력한 스크롤 가능한 위젯 시스템을 제공하며, 그 중 슬리버(Slivers)는 복잡한 스크롤 효과와 레이아웃을 만들 때 매우 유용합니다.
SliverGrid는 여러 박스(children)를 2차원 배열로 배치하는 슬리버(sliver)입니다. 스크롤 가능한 영역 내에서 그리드 형태의 요소를 배치할 때 유용하며, CustomScrollView 내에서 주로 사용됩니다.
주요 속성
gridDelegate: 그리드 항목의 배치를 결정하는SliverGridDelegate를 설정합니다. 주로SliverGridDelegateWithMaxCrossAxisExtent나SliverGridDelegateWithFixedCrossAxisCount를 사용합니다.delegate: 그리드 항목을 생성하는 데 사용되는SliverChildDelegate를 설정합니다.SliverChildBuilderDelegate나SliverChildListDelegate를 주로 사용합니다.SliverChildBuilderDelegate:
- 동적 생성: 필요할 때마다 자식 요소를 생성합니다. 즉, 화면에 보이는 부분만 렌더링하여 성능을 최적화합니다.SliverChildListDelegate:
- 정적 생성: 미리 정의된 리스트를 기반으로 자식 요소를 생성합니다. 모든 항목이 처음부터 생성되기 때문에 데이터가 적을 때 유용합니다.
주요 활용도
- 유연한 그리드 레이아웃: 그리드 항목의 크기와 배치를 자유롭게 설정할 수 있습니다.
- 효율적인 스크롤: 화면에 보이지 않는 항목은 렌더링하지 않아 성능을 최적화할 수
습니다.
코드 예제
아래 예제는 SliverGrid를 사용하여 스크롤 가능한 그리드를 구현하는 방법을 보여줍니다.
CustomScrollView(
slivers: <Widget>[
SliverGrid(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('grid item $index'),
);
},
childCount: 20,
),
),
],
)
추가 팁
- 그리드 레이아웃 최적화:
SliverGridDelegateWithFixedCrossAxisCount와 같은 고정 크기 배치를 사용하면 더 효율적으로 그리드를 구성할 수 있습니다. - 상태 유지: 자식 요소가 화면에서 벗어났을 때 상태를 유지하려면
KeepAlive나AutomaticKeepAlive를 사용합니다.
Child Elements' Lifecycle
Creation
- 설명: 리스트를 레이아웃하는 동안, 화면에 보이는 자식 요소들은 필요에 따라 천천히(lazily) 생성됩니다.
- 예시:
SliverChildListDelegate와SliverChildBuilderDelegate는 필요할 때 자식 요소를 생성합니다. 즉, 처음에는 보이는 부분만 생성하고, 스크롤하면 필요한 부분을 추가로 생성합니다.
Destruction
- 설명: 자식 요소가 화면에서 벗어나면, 해당 요소 트리, 상태 및 렌더 객체가 소멸됩니다.
- 예시: 자식 요소가 화면 밖으로 스크롤되면, 해당 요소는 메모리에서 제거됩니다. 다시 스크롤해서 화면에 나타나면 새로 생성됩니다.
Destruction Mitigation (소멸 방지 방법)
자식 요소가 화면에서 벗어났을 때 상태를 유지하는 방법들:
상태 저장 (State Preservation)
- 설명: 중요한 UI 상태를 슬리버 자식 요소 외부의 데이터 모델에 저장합니다. 이렇게 하면 자식 요소들이 다시 생성될 때 쉽게 상태를 복원할 수 있습니다.
KeepAlive 사용
- 설명:
KeepAlive위젯을 사용하여 자식 요소가 화면에서 벗어나도 메모리에 유지되도록 합니다.
AutomaticKeepAlive 사용
- 설명:
AutomaticKeepAlive는 자식 위젯이 필요에 따라 서브트리를 유지하도록 합니다. 예를 들어,EditableText위젯은 입력 포커스가 있을 때 서브트리를 유지합니다.
Using More Than One Delegate in a Viewport
설명
하나의 스크롤 뷰에서 여러 델리게이트를 사용할 경우, 각 델리게이트의 첫 번째 자식은 항상 레이아웃됩니다. 이는 전체 스크롤 뷰의 스크롤 오프셋을 추정하기 위해 필요합니다.
예시
예를 들어, CustomScrollView 내에서 SliverList와 SliverGrid를 동시에 사용할 때, 각 델리게이트의 첫 번째 항목은 항상 화면에 그려집니다. 이렇게 하면 스크롤 뷰는 전체 길이를 더 잘 계산할 수 있습니다.
관련 자료
- SliverGrid: 2차원 그리드로 여러 자식 요소를 배치하는 슬리버.
- SliverFixedExtentList: 주 축에서 고정된 크기의 자식 요소를 가진 더 효율적인 슬리버 리스트.
- SliverPrototypeExtentList: 픽셀 값 대신 프로토타입 항목을 사용하여 주 축 크기를 정의하는 슬리버 리스트.
- SliverAnimatedGrid: 그리드에 항목이 추가되거나 제거될 때 애니메이션 효과를 주는 슬리버.
추가 참고 리소스
flutter 개발자(진)