패키지 상세v2.0.1

reorderableitemsview

정렬 지원 기능이 있는 Flutter용 스타거드 그리드 뷰 또는 ListView 패키지

pub.dev API 문서 소스 코드

30일 다운로드: 186
좋아요: 55
Pub 점수: 60

패키지 설치

flutter pub add reorderableitemsview

패키지 개요

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

스무스한 드래그 앤 드롭 기능을 갖춘 재정렬 가능한 스타거드 그리드 또는 리스트 뷰를 가능하게 하는 플러터 패키지입니다. 표준 ListView와 GridView를 확장하여 항목의 동적 재정렬을 지원하며, 작업 목록, 이미지 갤러리 또는 사용자 중심의 항목 재정렬이 필요한 모든 UI에 적합합니다. 이 패키지는 가볍고 기존 플러터 프로젝트에 원활하게 통합됩니다. 수직 및 수평 레이아웃 모두를 지원하며, 재정렬 이벤트 처리를 위한 콜백을 제공합니다.

사용 사례

드래그 앤 드롭 작업 관리
재정렬 가능한 이미지 갤러리
사용자 정의 가능한 제품 목록
인터랙티브 콘텐츠 정렬
동적 폼 필드 배열

주요 기능

스태거드 그리드 레이아웃 지원
스무딩 드래그 앤 드롭 재정렬
재정렬 이벤트용 콜백
수직 및 수평 레이아웃을 지원합니다
경량이며 간편한 통합

적합한 대상

인터랙티브 리스트를 구축하는 개발자
정렬 가능한 UI 컴포넌트가 필요한 앱
동적 항목 정렬이 있는 프로젝트
드래그 제스처가 있는 UI 중심 애플리케이션
Flutter 초보자가 고급 위젯 탐색 중

고려 사항

애니메이션 없이 기본적인 재정렬만 가능
주문 변경에 대한 내장 지속성 없음
저장된 주문에 대한 수동 상태 관리가 필요합니다
매우 큰 데이터 세트에 최적화되지 않음
중첩 재정렬에 대한 네이티브 지원 없음

원본 README

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

reorderableitemsview

A Flutter package for staggered grid view or ListView with ordering support

Info

This plugin uses most for its code from ReorderableListView

This Plugin combines the ReorderableListView and flutter_staggered_grid_view to provide Draggable behaviour for Staggered GridView

Usage

To use this plugin, add reorderableitemsview as a dependency in your pubspec.yaml file.

Example Staggered GridView

import 'package:flutter/material.dart';
import 'package:reorderableitemsview/reorderableitemsview.dart';

class GridPageView extends StatefulWidget {
  @override
  _GridPageViewState createState() => _GridPageViewState();
}

class _GridPageViewState extends State<GridPageView> {

  List<StaggeredTileExtended> _listStaggeredTileExtended = <StaggeredTileExtended>[
    StaggeredTileExtended.count(2, 2),
    StaggeredTileExtended.count(2, 1),
    StaggeredTileExtended.count(1, 2),
    StaggeredTileExtended.count(1, 1),
    StaggeredTileExtended.count(2, 2),
    StaggeredTileExtended.count(1, 2),
    StaggeredTileExtended.count(1, 1),
    StaggeredTileExtended.count(3, 1),
    StaggeredTileExtended.count(1, 1),
    StaggeredTileExtended.count(4, 1),
  ];

  List<Widget> _tiles = <Widget>[
    _Example01Tile(Key("a"),Colors.green, Icons.widgets),
    _Example01Tile(Key("b"),Colors.lightBlue, Icons.wifi),
    _Example01Tile(Key("c"),Colors.amber, Icons.panorama_wide_angle),
    _Example01Tile(Key("d"),Colors.brown, Icons.map),
    _Example01Tile(Key("e"),Colors.deepOrange, Icons.send),
    _Example01Tile(Key("f"),Colors.indigo, Icons.airline_seat_flat),
    _Example01Tile(Key("g"),Colors.red, Icons.bluetooth),
    _Example01Tile(Key("h"),Colors.pink, Icons.battery_alert),
    _Example01Tile(Key("i"),Colors.purple, Icons.desktop_windows),
    _Example01Tile(Key("j"),Colors.blue, Icons.radio),
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("List Demo"),
      ),
      body: ReorderableItemsView(
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            _tiles.insert(newIndex, _tiles.removeAt(oldIndex));
          });
        },
        children: _tiles,
        crossAxisCount: 4,
        isGrid: true,
        staggeredTiles: _listStaggeredTileExtended,
        longPressToDrag: false,
      ),
    );
  }
}

class _Example01Tile extends StatelessWidget {
  _Example01Tile(Key key, this.backgroundColor, this.iconData): super(key: key);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: backgroundColor,
      child: new InkWell(
        onTap: () {},
        child: new Center(
          child: new Padding(
            padding: EdgeInsets.all(4.0),
            child: new Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

Example ListView

import 'package:flutter/material.dart';
import 'package:reorderableitemsview/reorderableitemsview.dart';

class ListPageView extends StatefulWidget {
  @override
  _ListPageViewState createState() => _ListPageViewState();
}

class _ListPageViewState extends State<ListPageView> {

  List<Widget> _tiles = <Widget>[
    _Example01Tile(Key("a"),Colors.green, Icons.widgets),
    _Example01Tile(Key("b"),Colors.lightBlue, Icons.wifi),
    _Example01Tile(Key("c"),Colors.amber, Icons.panorama_wide_angle),
    _Example01Tile(Key("d"),Colors.brown, Icons.map),
    _Example01Tile(Key("e"),Colors.deepOrange, Icons.send),
    _Example01Tile(Key("f"),Colors.indigo, Icons.airline_seat_flat),
    _Example01Tile(Key("g"),Colors.red, Icons.bluetooth),
    _Example01Tile(Key("h"),Colors.pink, Icons.battery_alert),
    _Example01Tile(Key("i"),Colors.purple, Icons.desktop_windows),
    _Example01Tile(Key("j"),Colors.blue, Icons.radio),
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("List Demo"),
      ),
      body: ReorderableItemsView(
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            _tiles.insert(newIndex, _tiles.removeAt(oldIndex));
          });
        },
        feedBackWidgetBuilder: (context, index, child) {
          return Container(
            child: child,
          );
        },
        children: _tiles,
        longPressToDrag: false,
      ),
    );
  }
}

class _Example01Tile extends StatelessWidget {
  _Example01Tile(Key key, this.backgroundColor, this.iconData): super(key: key);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: backgroundColor,
      child: new InkWell(
        onTap: () {},
        child: new Center(
          child: new Padding(
            padding: EdgeInsets.all(4.0),
            child: new Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

Options

@required this.children, // List<Widget>
@required this.onReorder, // Callback onReorder(int oldIndex, int newIndex)
this.scrollController, // ScrollController
this.scrollDirection = Axis.vertical, // Axis Ignored in GridView
this.padding, 
this.staggeredTiles, // Only used in GridView, check gridview example above
this.crossAxisCount = 3, // Only used in GridView
this.isGrid = false, // if true renders as gridview
this.reverse = false,
this.longPressToDrag = true,
this.mainAxisSpacing = 0.0, // Only used in GridView
this.crossAxisSpacing = 0.0, // Only used in GridView
this.feedBackWidgetBuilder,