Flutter Super Grid는 Flutter 앱용으로 다양한 그리드 뷰 구현을 제공하는 유연한 패키지입니다. 간단한 레이아웃에는 SimpleGridView를, 고도의 커스터마이징과 고급 기능에는 FlatGridView를, 추가 스타일링 옵션을 갖춘 섹션으로 콘텐츠를 정리하려면 SectionGridView를 포함합니다. 크로스플랫폼 사용을 위해 설계되어 Android, iOS, Web, macOS, Windows, Linux를 지원합니다. 복잡한 그리드 구조를 단순화하면서 장치 간 유연성과 성능을 유지합니다.
사용 사례
반응형 제품 그리드 만들기
헤더가 있는 섹션 목록 만들기
사용자 정의 가능한 대시보드 레이아웃 설계
다이나믹 그리드 인터페이스 구현
그룹화된 미디어 컬렉션 표시
스타일링된 그리드 섹션으로 UI 개선
주요 기능
다양한 그리드 유형: 간단, 플랫, 섹션
고급 사용자 지정 옵션
섹션 헤더 및 스타일링 지원
크로스 플랫폼 호환성
경량이며 성능이 뛰어남
pub add를 통한 간편한 통합
적합한 대상
유연한 그리드 레이아웃이 필요한 개발자
분류되거나 그룹화된 콘텐츠를 가진 앱
시각적 정리가 필요한 UI 중심 애플리케이션
다중 플랫폼을 대상으로 하는 프로젝트
코드의 단순성과 재사용성을 우선시하는 팀
고려 사항
Flutter 레이아웃 원칙에 대한 이해 필요
복잡한 디자인의 경우 추가 스타일링이 필요할 수 있습니다
기본 사용법 외에 문서가 제한적
정적 또는 반동적 데이터 구조에 가장 적합
높은 상호작용 또는 애니메이션 그리드에는 적합하지 않음
원본 README
연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
Flutter Super Grid
A customizable Flutter package for displaying grid views of sections.
Installation
Add the following to your pubspec.yaml file:
dependencies:flutter_super_grid:^1.0.9
Then, run:
$ flutter pub get
Features
Customizable grid view with sections and various configuration options.
Support for item tap callbacks with section and item indices.
Option to invert the row and display the grid horizontally.
Section titles with customizable styling and alignment.
SectionGridView
Usage
import'package:flutter_super_grid/flutter_super_grid.dart';
SectionGridView(
sections: yourSectionsList,
renderItem: (itemData) {
// Customize how each item is renderedreturnYourCustomItemWidget(itemData);
},
itemsPerRow: 3,
// ... (See Configuration Table below)
)
FlatGridView
Usage
import'package:flutter_super_grid/flutter_super_grid.dart';
FlatGridView(
data: yourDataList,
renderItem: (itemData) {
// Customize how each item is renderedreturnYourCustomItemWidget(itemData);
},
itemsPerRow: 3,
// ... (See Configuration Table below)
)
SimpleGridView
Usage
import'package:flutter_super_grid/flutter_super_grid.dart';
SimpleGridView(
data: yourDataList,
renderItem: (itemData) {
// Customize how each item is renderedreturnYourCustomItemWidget(itemData);
},
// ... (See Configuration Table below)
)
Configuration Table
Configuration
Type
Default Value
Description
data
List
-
The data to display in the grid (SimpleGridView and FlatGridView).
sections
List
-
The sections to display in the grid (SectionGridView only).
renderItem
Function
-
Function that renders each item in the grid.
onNewItemAdded
Function or null
null
Callback when a new item is added (SectionGridView and FlatGridView).
onPressed
Function or null
null
Callback when an item is pressed (SectionGridView and FlatGridView).
itemsPerRow
int
0
Number of items per row or column (applies when isFixed is false).
itemSize
double
120.0
The size of items in the main axis.
minItemDimension
double
120.0
Minimum dimension (width or height) of each grid item (applies when isFixed is false).
verticalSpacing
double
10
Vertical spacing between items.
horizontalSpacing
double
10
Horizontal spacing between items.
isFixed
bool
false
Whether the grid item size is fixed.
horizontal
bool
false
Whether the grid view is horizontal.
invertedRow
bool
false
Whether to invert the row.
adjustGridToStyles
bool
false
Whether to adjust the grid to styles.
style
SectionGridViewStyle
-
Style configuration for the grid view.
itemContainerStyle
ContainerStyle
ContainerStyle()
Style for the container of each item (FlatGridView only) (applies when isFixed is false).
footerWidget
Widget
SizedBox
Widget to be displayed as a footer (SectionGridView and FlatGridView).
gridViewHeight
double
300
Height of the gridview.
gridViewWidth
double
double.infinity
Width of the gridview.
containerWidth
double
double.infinity
Width of the main container (applies when it's greater than gridViewWidth).
containerHeight
double
300
Height of the main container (applies when it's greater than gridViewHeight).