Detalhes do pacotev2.0.1

reorderableitemsview

Um pacote Flutter para visualização em grade ou ListView com suporte a ordenação

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 186
Curtidas: 55
Pontos Pub: 60

Instalar pacote

flutter pub add reorderableitemsview

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um pacote Flutter que permite listas ou grades escalonadas reordenáveis com funcionalidade suave de arrastar e soltar. Ele estende o ListView e GridView padrão para oferecer suporte à reorganização dinâmica de itens, sendo ideal para listas de tarefas, galerias de imagens ou qualquer interface que exija reorganização de itens por usuário. O pacote é leve e se integra perfeitamente a projetos Flutter existentes. Suporta layouts vertical e horizontal e fornece callbacks para lidar com eventos de reordenação.

Casos de uso

Gerenciamento de tarefas por arrastar e soltar
Galerias de imagens reordenáveis
Listagens de produtos personalizáveis
Classificação de conteúdo interativo
Disposição dinâmica de campos de formulário

Principais recursos

Suporte para layout de grade em estagio
Reordenamento suave por arrastar e soltar
Callback para eventos de reordenação
Suporta layouts verticais e horizontais
Leve e fácil integração

Indicado para

Desenvolvedores construindo listas interativas
Aplicativos que precisam de componentes de interface do usuário ordenáveis
Projetos com ordenação dinâmica de itens
Aplicações com interface intensiva e gestos de arrasto
Iniciantes do Flutter explorando widgets avançados

Considerações

Limitado à reorganização básica sem animações
Nenhuma persistência interna para alterações de pedido
Requer gerenciamento manual do estado do pedido salvo
Não otimizado para conjuntos de dados muito grandes
Sem suporte nativo para reordenamento aninhado

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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,