패키지 상세v0.0.2

reorderable_staggered_scroll_view

재정렬 가능한 스타거드 그리드 뷰를 생성하기 위한 Flutter 패키지입니다.

AndroidiOSWebmacOSWindowsLinux

pub.dev API 문서 소스 코드

30일 다운로드: 94
좋아요: 37
Pub 점수: 160

패키지 설치

flutter pub add reorderable_staggered_scroll_view

패키지 개요

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

사용자가 부드러운 드래그 앤 드롭 상호작용을 통해 재정렬 가능한 스타거드 그리드 레이아웃을 만들 수 있도록 해주는 플러터 패키지입니다. 표준 스크롤 뷰의 기능을 확장하여 스타거드 그리드 내 항목을 동적으로 재정렬할 수 있게 하며, 사진 갤러리나 작업 목록과 같은 사용자 정의 콘텐츠 표시에 적합합니다. 이 패키지는 모든 주요 플랫폼을 지원하며 기존 플러터 프로젝트에 원활하게 통합됩니다.

사용 사례

사용자 정의 가능한 사진 갤러리
작업 관리 인터페이스
동적 콘텐츠 정렬
사용자 중심의 레이아웃 배열
인터랙티브 대시보드 위젯

주요 기능

드래그 앤 드롭 재정렬
스태거드 그리드 레이아웃 지원
크로스 플랫폼 호환성
정렬 재배치 중 부드러운 애니메이션
기존 Flutter 앱과의 간편한 통합

적합한 대상

인터랙티브 UI를 구축하는 개발자
동적 항목 정렬이 필요한 앱
시각 콘텐츠 구성이 포함된 프로젝트
직관적인 드래그 제스처를 원하는 사용자
다중 플랫폼을 대상으로 하는 Flutter 개발자

고려 사항

아이템 키의 고유성을 신중하게 다뤄야 합니다
대규모 데이터 세트에서 성능에 영향을 미칠 수 있습니다
재정렬 로직을 위한 적절한 상태 관리가 필요합니다
기본적인 스테가레트 동작 외에는 사용자 정의가 제한됨
중간 크기의 컬렉션에 가장 적합

원본 README

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

reorderable_staggered_scroll_view

A Flutter package for creating reorderable and draggable staggered grid and list views. This package provides a smooth and intuitive way to reorder items in both grid and list layouts, making it perfect for creating interactive and user-friendly applications.

List Demo	Grid Demo

Features

Reorder items with ease using drag and drop gestures.
Supports both staggered grid and list layouts.
Configurable drag-and-drop behavior.
Designed for a seamless user experience.

Getting Started

To use this package, add it to your pubspec.yaml file:

dependencies:
  reorderable_staggered_scroll_view: ^latest_version

Replace ^latest_version with the actual version you want to use.

Import the package in your Dart code:

import 'package:reorderable_staggered_scroll_view/reorderable_staggered_scroll_view.dart';

Usage

Grid

ReorderableStaggeredScrollView.grid(
  enable: _dragEnabled,
  padding: const EdgeInsets.all(16),
  scrollDirection: Axis.vertical,
  physics: const BouncingScrollPhysics(),
  crossAxisCount: 4,
  isLongPressDraggable: false,
  onDragEnd: (details, item) {
    print('onDragEnd: $details ${item.key}');
  },
  children: List.generate(
    10,
    (index) => ReorderableStaggeredScrollViewGridItem(
      key: ValueKey(index.toString()),
      mainAxisCellCount: 1,
      crossAxisCellCount: Random().nextInt(2) + 1,
      widget: Card(
        child: Center(child: Text('Item $index')),
      ),
    ),
  ),
);

List

For a list view of items use list constructor:

ReorderableStaggeredScrollView.list(
  ...
)

Custom

You can integrate the ReorderableStaggeredScrollView package with your custom list or grid widget by wrapping your custom list or grid widget with the necessary components.

DragNotification(
  child: ListView(
    scrollDirection: Axis.vertical,
    children: [
      DragContainer(
        scrollDirection: Axis.vertical,
        isLongPressDraggable: true,
        buildItems: (List<Widget> children) {
          return YourCustomListViewWidget(
            // Your custom list or grid widget configuration
            children: children,
          );
        },
        dataList: yourList, // Your List of ReorderableStaggeredScrollViewListItem or ReorderableStaggeredScrollViewGridItem
        items: (ReorderableStaggeredScrollViewListItem element, DraggableWidget draggableWidget) {
          // Map each item in your dataList into a draggable widget
          return Container(
            key: ValueKey(element.key.toString()),
            child: draggableWidget(element.widget),
          );
        }
      ),
    ],
  ),
);

Replace the comments with your actual widget configuration and data. This setup will allow you to use the ReorderableStaggeredScrollView package with your custom widget.

For more detailed usage instructions and configuration options, refer to the example directory in this repository.