O pacote multi_select_flutter é uma biblioteca de componentes de seleção múltipla para Flutter, que oferece várias formas de exibição, incluindo diálogo (Dialog), painel inferior (BottomSheet) e chips de escolha (ChoiceChip). É poderoso e flexível, ideal para cenários onde é necessário selecionar várias opções. A seguir, detalhamos como instalar, usar e explorar a API desta biblioteca.

Guia de Instalação

Adicione a dependência multi_select_flutter ao seu projeto Flutter editando o arquivo pubspec.yaml:

dependencies:
 flutter:
   sdk: flutter
 multi_select_flutter: ^versão_mais_recente

Depois, execute flutter pub get para baixar e instalar o pacote.

Instruções de Uso

Uso Básico

Diálogo ou Painel Inferior de Seleção Múltipla

MultiSelectDialogField(
 items: _animais.map((item) => MultiSelectItem(item, item.nome)).toList(),
 onConfirm: (valores) {
   _animaisSelecionados = valores;
 },
)

Este código cria um campo de seleção múltipla no estilo de diálogo com o seletor padrão.

Comportamento Personalizado

Você pode abrir um diálogo ou painel inferior personalizado chamando sua própria função:

void _mostrarMultiSelecao(BuildContext context) async {
 await showDialog(
   context: context,
   builder: (ctx) => MultiSelectDialog(
     items: _itens,
     initialValue: _animaisSelecionados,
     onConfirm: (valores) {
       setState(() {
         _animaisSelecionados = valores;
       });
     },
   ),
 );
}

Exibir Itens Selecionados

Use MultiSelectChipDisplay para exibir os itens selecionados, permitindo também removê-los com interação:

MultiSelectChipDisplay(
 items: _animaisSelecionados.map((item) => MultiSelectItem(item, item.nome)).toList(),
 onTap: (valor) {
   setState(() {
     _animaisSelecionados.remove(valor);
   });
 },
)

Documentação da API

• MultiSelectDialogField / MultiSelectBottomSheetField: Integração direta em formulários, com entrada padrão e lógica de confirmação.
• MultiSelectDialog / MultiSelectBottomSheet: Permite controle mais livre sobre o momento de abertura e o layout da interface.
• MultiSelectChipDisplay: Exibe os itens atualmente selecionados; o callback onTap permite tratar alterações na seleção.
• MultiSelectChipField: Oferece um modo de seleção baseado em ChoiceChip, ideal como interface interativa direta.

Personalização de Itens

Use o parâmetro itemBuilder para personalizar completamente a aparência de cada item:

MultiSelectChipField<Animal>(
 items: _itens,
 itemBuilder: (item, estado) {
   return InkWell(
     onTap: () {
       // Atualiza o estado de seleção e notifica a mudança
       if (_animaisSelecionados.contains(item.valor)) {
         _animaisSelecionados.remove(item.valor);
       } else {
         _animaisSelecionados.add(item.valor);
       }
       estado.didChange(_animaisSelecionados); // Obrigatório para atualizar a validação
     },
     child: Text(item.valor.nome),
   );
 },
)

Resumo da Instalação

Novamente, o processo padrão é editar pubspec.yaml para adicionar a dependência e executar flutter pub get.

Estes são os conceitos básicos e detalhes técnicos do pacote Multi Select Flutter. Esperamos que ajude os desenvolvedores a integrar rapidamente e personalizar componentes de seleção múltipla adequados às necessidades do aplicativo. Lembre-se de contribuir com código ou sugerir melhorias para promover o desenvolvimento do projeto.