Buscar pacotes, repositórios e categorias de apps

Capa de reorderable_grid
Detalhes do pacotev1.0.13

reorderable_grid

Uma implementação completa de grade reordenável semelhante à lista reordenável nativa do Flutter.

AndroidiOSWebmacOSWindowsLinux
Downloads em 30 dias
14,2 mil
Curtidas
136
Pontos Pub
150

Instalar pacote

flutter pub add reorderable_grid

Visão geral do pacote

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

Um pacote Flutter que fornece uma grade totalmente funcional e reordenável, permitindo que os usuários arrastem e soltem itens da grade para reorganizá-los dinamicamente. Inspirado no ReorderableListView nativo do Flutter, ele suporta todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. A grade mantém animações suaves e manipula gestos de toque com eficiência, tornando-a ideal para layouts personalizáveis, como painéis, galerias de fotos ou quadros de tarefas. Integra-se perfeitamente a aplicativos existentes do Flutter e oferece uma API simples para personalização.

Casos de uso

  • Layouts de painel personalizáveis
  • Reordenar galeria de fotos ou mídia
  • Reorganização da interface baseada em tarefas ou cartões
  • Disposições de widget definidas pelo usuário
  • Gerenciamento de dados baseado em grade interativo

Principais recursos

  • Reordenamento por arrastar e soltar
  • Compatibilidade multiplataforma
  • Transições de animação suaves
  • Personalização de item flexível
  • Manipulação de gestos embutida

Indicado para

  • Desenvolvedores construindo interfaces de grade interativas
  • Aplicativos que exigem personalização de layout orientada pelo usuário
  • Projetos com organização dinâmica de conteúdo
  • Designers que desejam interações de UI intuitivas
  • Aplicações Flutter destinadas a múltiplas plataformas

Considerações

  • Requer um manuseio cuidadoso da gestão de estado
  • Pode afetar o desempenho com grandes conjuntos de dados
  • Os alvos de toque precisam de espaçamento e preenchimento adequados
  • Opções limitadas de estilo embutido
  • Não otimizado para contagens extremamente altas de itens

README original

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

: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!

Categorias

Repositório-fonte

Projetos que usam este pacote