패키지, 저장소 및 앱 카테고리 검색

패키지 상세v1.0.9

flutter_super_grid

그리드 뷰를 포함한 플러터 패키지: 기본 그리드용 SimpleGridView, 고급 옵션용 FlatGridView, 섹션별 그리드 및 추가 스타일링용 SectionGridView.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
73
좋아요
27
Pub 점수
150

패키지 설치

flutter pub add flutter_super_grid

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

Flutter Super Grid는 Flutter 앱용으로 다양한 그리드 뷰 구현을 제공하는 유연한 패키지입니다. 간단한 레이아웃에는 SimpleGridView를, 고도의 커스터마이징과 고급 기능에는 FlatGridView를, 추가 스타일링 옵션을 갖춘 섹션으로 콘텐츠를 정리하려면 SectionGridView를 포함합니다. 크로스플랫폼 사용을 위해 설계되어 Android, iOS, Web, macOS, Windows, Linux를 지원합니다. 복잡한 그리드 구조를 단순화하면서 장치 간 유연성과 성능을 유지합니다.

사용 사례

  • 반응형 제품 그리드 만들기
  • 헤더가 있는 섹션 목록 만들기
  • 사용자 정의 가능한 대시보드 레이아웃 설계
  • 다이나믹 그리드 인터페이스 구현
  • 그룹화된 미디어 컬렉션 표시
  • 스타일링된 그리드 섹션으로 UI 개선

주요 기능

  • 다양한 그리드 유형: 간단, 플랫, 섹션
  • 고급 사용자 지정 옵션
  • 섹션 헤더 및 스타일링 지원
  • 크로스 플랫폼 호환성
  • 경량이며 성능이 뛰어남
  • pub add를 통한 간편한 통합

적합한 대상

  • 유연한 그리드 레이아웃이 필요한 개발자
  • 분류되거나 그룹화된 콘텐츠를 가진 앱
  • 시각적 정리가 필요한 UI 중심 애플리케이션
  • 다중 플랫폼을 대상으로 하는 프로젝트
  • 코드의 단순성과 재사용성을 우선시하는 팀

고려 사항

  • Flutter 레이아웃 원칙에 대한 이해 필요
  • 복잡한 디자인의 경우 추가 스타일링이 필요할 수 있습니다
  • 기본 사용법 외에 문서가 제한적
  • 정적 또는 반동적 데이터 구조에 가장 적합
  • 높은 상호작용 또는 애니메이션 그리드에는 적합하지 않음

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Flutter Super Grid

Pub

A customizable Flutter package for displaying grid views of sections.

Example App

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

Example SectionGrid

Usage
import 'package:flutter_super_grid/flutter_super_grid.dart';

SectionGridView(
  sections: yourSectionsList,
  renderItem: (itemData) {
    // Customize how each item is rendered
    return YourCustomItemWidget(itemData);
  },
  itemsPerRow: 3,
  // ... (See Configuration Table below)
)

FlatGridView

Example FlatGrid

Usage
import 'package:flutter_super_grid/flutter_super_grid.dart';

FlatGridView(
  data: yourDataList,
  renderItem: (itemData) {
    // Customize how each item is rendered
    return YourCustomItemWidget(itemData);
  },
  itemsPerRow: 3,
  // ... (See Configuration Table below)
)

SimpleGridView

Example SimpleGrid

Usage
import 'package:flutter_super_grid/flutter_super_grid.dart';

SimpleGridView(
  data: yourDataList,
  renderItem: (itemData) {
    // Customize how each item is rendered
    return YourCustomItemWidget(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).
physics ScrollPhysics or null null The physics of the scroll view.

Documentation

For detailed documentation, see API Documentation.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Issues and Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.

If you fixed a bug or implemented a feature, please send a pull request.

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.