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

reorderable_grid 표지
패키지 상세v1.0.13

reorderable_grid

flutter의 네이티브 재정렬 가능한 목록과 유사한 완전한 재정렬 가능한 그리드 구현.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
1.4만
좋아요
136
Pub 점수
150

패키지 설치

flutter pub add reorderable_grid

패키지 개요

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

사용자가 드래그 앤 드롭을 통해 그리드 항목을 동적으로 재정렬할 수 있도록 하는 완전히 기능하는 재정렬 가능한 그리드를 제공하는 플러터 패키지입니다. 플러터의 내장된 ReorderableListView에서 영감을 받았으며, 안드로이드, iOS, 웹, 맥OS, 윈도우, 리눅스 등 주요 모든 플랫폼을 지원합니다. 부드러운 애니메이션을 유지하고 터치 제스처를 효율적으로 처리하여 대시보드, 사진 갤러리, 작업 보드와 같은 사용자 정의 레이아웃에 이상적입니다. 기존 플러터 앱과 원활하게 통합되며, 사용자 정의를 위한 간단한 API를 제공합니다.

사용 사례

  • 사용자 정의 가능한 대시보드 레이아웃
  • 사진 또는 미디어 갤러리 재정렬
  • 작업 또는 카드 기반 인터페이스 재정렬
  • 사용자 정의 위젯 배열
  • 인터랙티브한 그리드 기반 데이터 관리

주요 기능

  • 드래그 앤 드롭 재정렬
  • 크로스 플랫폼 호환성
  • 부드러운 애니메이션 전환
  • 유연한 항목 사용자 정의
  • 내장된 제스처 처리

적합한 대상

  • 인터랙티브 그리드 인터페이스를 구축하는 개발자
  • 사용자 중심의 레이아웃 사용자 정의가 필요한 앱
  • 동적 콘텐츠 구성이 있는 프로젝트
  • 직관적인 UI 상호작용을 원하는 디자이너
  • 다중 플랫폼을 대상으로 하는 Flutter 애플리케이션

고려 사항

  • 상태 관리에 주의 깊게 대응해야 합니다
  • 대규모 데이터 세트에서 성능에 영향을 미칠 수 있습니다
  • 터치 타겟에는 적절한 패딩과 간격이 필요합니다
  • 제한된 내장 스타일 옵션
  • 매우 높은 항목 수에 최적화되지 않음

원본 README

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

:white_square_button: Reorderable Grid

Pub Version Likes Pub points Pub codecov

A full reorderable grid implemention similar to Flutters Reorderable_List. with full ReorderableGridView, ReorderableGrid and SliverReorderableGrid implementations

gif showing basic usage

:hammer: How it works

ReorderableGridView is a drop in replacement for the existing GridView and adds an onReorder callback that provides the original and new index of the reordered item.

/// create a new list of data
final items = List<int>.generate(40, (index) => index);

/// when the reorder completes remove the list entry from its old position
/// and insert it at its new index
void _onReorder(int oldIndex, int newIndex) {
setState(() {
    final item = items.removeAt(oldIndex);
    items.insert(newIndex, item);
});
}

@override
Widget build(BuildContext context) {
return MaterialApp(
    home: Scaffold(
      body: ReorderableGridView.extent(
        maxCrossAxisExtent: 250,
        onReorder: _onReorder,
        childAspectRatio: 1,
        children: items.map((item) {
          /// map every list entry to a widget and assure every child has a 
          /// unique key
          return Card(
            key: ValueKey(item),
            child: Center(
            child: Text(item.toString()),
            ),
          );
        }).toList(),
      ),
    ),
);
}

ReorderableGrid provides all the constructors and parameters the normal GridView has. The package also includes:

  • ReorderableGridView, which is a prebuild Material-ish implementation of the grid.
  • ReorderableGrid, A barebones widget that allows you to customize the grid however you want
  • SliverReorderableGrid, a reorderable grid sliver for custom scroll implementations

Documentation

You can find all features and fuctionality documented here

:wave: Get Involved

If this package is useful to you please :thumbsup: on pub.dev and :star: on github. If you have any Issues, recommendations or pull requests I'd love to see them!

카테고리

소스 저장소

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