Dismissível no Flutter
No Flutter, supondo que você queira criar um widget que possa ser dispensado, você pode encapsular o widget como filho de Dismissible. Um Widget descartável no Flutter é normalmente usado para agrupar cada item da lista com o objetivo de que ele seja dispensado, seja na direção horizontal ou vertical.
Este blog irá explorar o Dismissible In Flutter. Percebemos como executar um programa de demonstração. Descobriremos como utilizar o widget, incluindo como mostrar a caixa de diálogo de confirmação, definir planos de fundo que serão exibidos quando a criança estiver sendo dispensada e definir direções de dispensa em seus aplicativos Flutter.
Conteudo
Introdução:
Um widget que pode ser descartado arrastando na direção demonstrada. Arrastar ou arremessar este widget no DismissDirection faz com que o filho deslize para fora da vista.
Módulo de Demonstração ::
Este vídeo de demonstração mostra como usar o dispensável em um flutter e mostra como um dispensável funcionará em seus aplicativos flutter. Mostraremos um usuário arrastando ou dedilhado dispensando um widget. Ele será exibido em seus dispositivos.
Construtor:
Para utilizar Dismissible, você precisa chamar o construtor abaixo:
Você é obrigado a passar a Key (Key) e child (Widget). A chave acaba sendo vital, pois o widget pode ser retirado da lista de widgets. Se houver widgets dispensáveis diferentes, certifique-se de que cada um tenha uma key exclusiva.
const Dismissible({
required Key key,
required this.child,
this.background,
this.secondaryBackground,
this.confirmDismiss,
this.onResize,
this.onUpdate,
this.onDismissed,
this.direction = DismissDirection.horizontal,
this.resizeDuration = const Duration(milliseconds: 300),
this.dismissThresholds = const <DismissDirection, double>{},
this.movementDuration = const Duration(milliseconds: 200),
this.crossAxisEndOffset = 0.0,
this.dragStartBehavior = DragStartBehavior.start,
this.behavior = HitTestBehavior.opaque,
})Esteja atento para não envolver o índice como uma chave, pois descartar um widget pode alterar o índice de diferentes widgets. A segunda propriedade necessária é um child onde você deseja passar o widget que pode ser dispensado.
Outra propriedade significativa é onDismissed. É uma função de retorno de chamada que tolera um limite do tipo DismissDirection. Dentro, você pode caracterizar o que fazer depois que o widget for descartado. Por exemplo, você pode eliminar o widget da lista.
Propriedades:
Existem algumas propriedades de Dismissible são:
- key — Esta propriedade é usada para controlar se deve ser substituída.
- child — Esta propriedade é usada abaixo deste widget na árvore.
- background — Esta propriedade é usada para empilhar atrás do child. Se o SecondBackground estiver definido, ele só é mostrado quando o child está sendo arrastada para baixo ou para a direita.
- secondBackground — Esta propriedade é usada para empilhar atrás do child. Só é mostrado quando o child está sendo arrastada para cima ou para a esquerda.
- confirmDismiss — Esta propriedade é usada para permitir que o aplicativo confirme ou vete uma dispensa pendente.
- onResize — Esta propriedade é usada para o retorno de chamada que será chamado quando o widget mudar de tamanho.
- onDismissed — Esta propriedade é usada para o retorno de chamada que será chamado quando o widget for descartado.
- direction — Esta propriedade é usada para a direção na qual o widget pode ser dispensado. O padrão é DismissDirection.horizontal.
- resizeDuration — Esta propriedade é usada para a quantidade de tempo que o widget gastará contraindo antes de onDismissed ser chamado. O padrão é const Duration(milissegundos: 300).
- dispenseThresholds — Esta propriedade é usada para definir o limite de deslocamento que o item deve ser arrastado para ser considerado descartado. O padrão é const <DismissDirection, double>{}.
- motionDuration — Esta propriedade é usada para a duração para descartar ou voltar à posição original se não for descartada. O padrão é const Duration(milissegundos: 200).
- crossAxisEndOffset — Esta propriedade é usada para o deslocamento final no eixo principal depois que o cartão é dispensado. O padrão é 0,0.
- dragStartBehavior — Esta propriedade é usada para saber como o comportamento de arrastar é tratado. O padrão é DragStartBehavior.start.
Como implementar o código no arquivo dart:
Você precisa implementá-lo em seu código, respectivamente:
Crie um novo arquivo dart chamado
main.dartdentro da pastalib.
Faremos um ListView básico onde a coisa pode ser dispensada. O ListView é feito utilizando os valores que o acompanham.
List<String> items = [ "Assistir", "Jeans", "Camisa", "Camiseta", "Xícara", "Sapato", "Boné", "Shorts", "Calça", "Mais baixo", ];
Aqui está o código para construir o ListView. O itemBuilder, que é utilizado para construir a lista de itens, retorna um Dismissible. Não obstante os argumentos necessários (key e chield), um retorno de chamada onDismissed é passado adicionalmente. O modelo abaixo informa a melhor maneira de definir várias ações para cada direção.
ListView.builder(
itemCount: items.length,
padding: const EdgeInsets.symmetric(vertical: 16),
itemBuilder: (BuildContext context, index) {
return Dismissible(
key: Key('item ${items[index]}'),
onDismissed: (DismissDirection direction) {
if (direction == DismissDirection.startToEnd) {
print("Adicionar presente ao carrinho");
} else {
print('Mover para lixeira');
}
setState(() {
items.removeAt(index);
});
},
child: ListTile(
leading: const Icon(
Icons.card_giftcard_rounded,
color: Colors.black,
),
title: Text(
items[index],
style: TextStyle(
color: Colors.black.withOpacity(.6), fontSize: 18),
),
subtitle: Text(
"Este presente é para você",
style: TextStyle(color: Colors.green.withOpacity(.6)),
),
),
);
}
),Quando executamos o aplicativo, devemos obter a saída da tela como a captura de tela abaixo.
Mostrando Confirmação
Dismissible é frequentemente utilizado para excluir uma atividade. Se você acha que a atividade executada é crítica e não pode ser dispersada, é mais inteligente mostrar a confirmação antes que a atividade seja caracterizada dentro de onDismissed é executada.
Você pode fazer isso passando confirmDismissCallback para o construtor. Um retorno de chamada reconhece um parâmetro do tipo DismissDirection e retorna Future<bool>. O modelo abaixo mostra um AlertDialog onde o cliente pode confirmar a exclusão do item ou cancelar a ação.
confirmDismiss: (DismissDirection direction) async {
return await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text("Adicionar presente ao carrinho"),
content: const Text("Tem certeza que deseja adicionar este presente em seu carrinho?"),
actions: <Widget>[
ElevatedButton(
onPressed: () => Navigator.of(context).pop(true),
child: const Text("Sim")),
ElevatedButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text("Não"),
),
],
);
},
);
}
Definindo planos de fundo
A direção de dispensa padrão é horizontal. Você pode deslizar para a direita ou para a esquerda. Deslizar para a esquerda ou para a direita pode resultar em uma ação alternativa dependendo do que você caracteriza no retorno de chamada onDismissed. Várias ações, mas o Flutter também permite que você defina vários widgets que serão exibidos quando o child estiver sendo dispensada.
Utilize o fundo para caracterizar o widget a ser mostrado quando o child for deslizado para a direita e o secondaryBackground para o widget quando o child for deslizado para a esquerda. Supondo que você acabou de definir o plano de fundo, ele será utilizado para as duas direções.
background: Container(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(15),
child: Row(
children: const [
Icon(Icons.favorite, color: Colors.red),
SizedBox(
width: 8.0,
),
Text('Mover para favoritos',
style: TextStyle(color: Colors.white)),
],
),
),
),
secondaryBackground: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.all(15),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: const [
Icon(Icons.delete, color: Colors.white),
SizedBox(
width: 8.0,
),
Text('Mover para lixeira',
style: TextStyle(color: Colors.white)),
],
),
),
),Quando executamos o aplicativo, devemos obter a saída da tela como a captura de tela abaixo.
Code File:
import 'package:flutter/material.dart';
class DismissibleDemo extends StatefulWidget {
const DismissibleDemo({Key? key}) : super(key: key);
@override
State<DismissibleDemo> createState() => _DismissibleDemoState();
}
class _DismissibleDemoState extends State<DismissibleDemo> {
List<String> items = [
"Assistir",
"Jeans",
"Camisa",
"Camiseta",
"Xícara",
"Sapato",
"Boné",
"Shorts",
"Calça",
"Mais baixo",
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue.shade400,
centerTitle: true,
automaticallyImplyLeading: false,
title: const Text("Demonstração Flutter Dismissible"),
),
body: ListView.builder(
itemCount: items.length,
padding: const EdgeInsets.symmetric(vertical: 16),
itemBuilder: (BuildContext context, int index) {
return Dismissible(
background: Container(
color: Colors.blue,
child: const Padding(
padding: EdgeInsets.all(15),
child: Row(
children: [
Icon(Icons.favorite, color: Colors.red),
SizedBox(
width: 8.0,
),
Text('Mover para favoritos',
style: TextStyle(color: Colors.white)),
],
),
),
),
secondaryBackground: Container(
color: Colors.red,
child: const Padding(
padding: EdgeInsets.all(15),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Icon(Icons.delete, color: Colors.white),
SizedBox(
width: 8.0,
),
Text('Mover para lixeira',
style: TextStyle(color: Colors.white)),
],
),
),
),
key: ValueKey<String>(items[index]),
onDismissed: (DismissDirection direction) {
setState(() {
items.removeAt(index);
});
},
confirmDismiss: (DismissDirection direction) async {
if (direction == DismissDirection.startToEnd) {
return await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text("Adicionar presente ao carrinho"),
content: const Text(
"Tem certeza que deseja adicionar este presente em seu carrinho"),
actions: <Widget>[
ElevatedButton(
onPressed: () => Navigator.of(context).pop(true),
child: const Text("Sim")),
ElevatedButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text("Não"),
),
],
);
},
);
} else {
return await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text("Remover presente"),
content: const Text(
"Tem certeza de que deseja remover este item de presente?"),
actions: <Widget>[
ElevatedButton(
onPressed: () => Navigator.of(context).pop(true),
child: const Text("Sim")),
ElevatedButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text("Não"),
),
],
);
},
);
}
},
child: ListTile(
leading: const Icon(
Icons.card_giftcard_rounded,
color: Colors.black,
),
title: Text(
items[index],
style: TextStyle(
color: Colors.black.withOpacity(.6), fontSize: 18),
),
subtitle: Text(
"Este presente é para você",
style: TextStyle(color: Colors.green.withOpacity(.6)),
),
),
);
},
));
}
}Github:
GitHub
Conclusão:
No artigo, expliquei a estrutura básica Dismissível rapidamente; você pode modificar este código de acordo com sua escolha. Esta foi uma pequena introdução à Interação do usuário descartável da minha parte, e está funcionando usando o Flutter.
Espero que este blog forneça a você informações suficientes sobre como experimentar o descartável em seus projetos de vibração. Mostraremos o que é a Introdução e quais são a construção e as propriedades do Dismissible e faremos um programa de demonstração para trabalhar com o Dismissible em seus aplicativos flutter. Então, por favor, tente.
Não deixe de conhecer meus Ebooks de Flutter/Dart
