Construindo um App Flutter de Arrastar e Soltar com Widgets Draggables e Back4App

introdução interfaces interativas de arrastar e soltar melhoram a experiência do usuário ao permitir que os usuários manipulem elementos da interface de forma intuitiva o flutter fornece os draggable e dragtarget widgets para criar tais interações neste tutorial, você aprenderá como construir um aplicativo flutter que usa draggable widgets para mover itens entre listas, com persistência de dados usando o back4app—um backend como serviço alimentado pelo parse server ao final deste tutorial, você terá um aplicativo flutter funcional onde os usuários podem arrastar itens de uma lista para outra, e as alterações serão armazenadas e recuperadas do back4app este tutorial é adequado para desenvolvedores flutter de todos os níveis de experiência pré requisitos para completar este tutorial, você precisará flutter sdk instalado em sua máquina siga o guia de instalação oficial do flutter https //flutter dev/docs/get started/install para o seu sistema operacional conhecimento básico de flutter e dart se você é novo no flutter, revise a documentação do flutter https //flutter dev/docs para se familiarizar com os conceitos básicos um ide ou editor de texto como visual studio code ou android studio uma conta back4app inscreva se para uma conta gratuita em back4app https //www back4app com/ parse server sdk para flutter adicionado ao seu projeto aprenda como configurá lo seguindo o guia do back4app flutter sdk https //www back4app com/docs/flutter/parse flutter sdk visão geral vamos construir um aplicativo de gerenciamento de tarefas onde as tarefas podem ser arrastadas de uma lista "a fazer" para uma lista "concluídas" e vice versa o aplicativo irá use draggable widgets para habilitar o arraste de tarefas use dragtarget widgets para definir zonas de soltura armazene e recupere tarefas do back4app para persistir dados passo 1 – configurando o projeto flutter 1 1 crie um novo projeto flutter abra seu terminal e execute flutter create drag drop app navegue até o diretório do projeto cd drag drop app 1 2 adicionar dependências abra pubspec yaml e adicione as seguintes dependências dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 execute flutter pub get para instalar os pacotes passo 2 – configurando o back4app 2 1 criar um novo aplicativo back4app faça login no seu painel do back4app https //dashboard back4app com/ clique em "criar novo app" digite um nome para seu aplicativo, por exemplo, "dragdropapp" , e clique em "criar" 2 2 configurar o modelo de dados no seu painel de aplicação, navegue até a "banco de dados" seção clique em "criar uma classe" na janela modal selecione "personalizado" digite "tarefa" como o nome da classe clique em "criar classe" 2 3 adicionar colunas à classe na classe "tarefa" , clique em "+" para adicionar novas colunas adicione as seguintes colunas título tipo string status tipo string adicione alguns dados de exemplo à classe "tarefa" por exemplo 2 4 obter credenciais da aplicação navegue até configurações do app > segurança & chaves anote seu id da aplicação e chave do cliente passo 3 – inicializando o parse em seu app flutter abra lib/main dart e modifique o da seguinte forma import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'screens/home page dart'; // you'll create this file next void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'drag and drop app', theme themedata( primaryswatch colors blue, ), home homepage(), ); } } substitua 'your application id' e 'your client key' pelas suas credenciais reais do back4app passo 4 – criando o modelo de tarefa crie um novo diretório chamado models dentro de lib e adicione um arquivo chamado task dart // lib/models/task dart class task { string id; string title; string status; task({required this id, required this title, required this status}); } passo 5 – buscando tarefas do back4app crie um novo diretório chamado services dentro de lib e adicione um arquivo chamado task service dart // lib/services/task service dart import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/task dart'; class taskservice { future\<list\<task>> gettasksbystatus(string status) async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('task')) whereequalto('status', status); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { return apiresponse results! map((data) { return task( id data objectid!, title data get\<string>('title') ?? '', status data get\<string>('status') ?? '', ); }) tolist(); } else { return \[]; } } future\<void> updatetaskstatus(string id, string status) async { var task = parseobject('task') objectid = id set('status', status); await task save(); } } passo 6 – construindo a ui com draggable e dragtarget crie um novo diretório chamado screens sob lib e adicione um arquivo chamado home page dart // lib/screens/home page dart import 'package\ flutter/material dart'; import ' /models/task dart'; import ' /services/task service dart'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class homepagestate extends state\<homepage> { final taskservice taskservice = taskservice(); list\<task> todotasks = \[]; list\<task> completedtasks = \[]; @override void initstate() { super initstate(); fetchtasks(); } future\<void> fetchtasks() async { var todo = await taskservice gettasksbystatus('to do'); var completed = await taskservice gettasksbystatus('completed'); setstate(() { todotasks = todo; completedtasks = completed; }); } void ondragaccept(task task, string newstatus) async { await taskservice updatetaskstatus(task id, newstatus); await fetchtasks(); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('drag and drop tasks'), ), body row( children \[ expanded( child taskcolumn( title 'to do', tasks todotasks, ondragaccept (task) => ondragaccept(task, 'to do'), ), ), expanded( child taskcolumn( title 'completed', tasks completedtasks, ondragaccept (task) => ondragaccept(task, 'completed'), ), ), ], ), ); } } class taskcolumn extends statelesswidget { final string title; final list\<task> tasks; final function(task) ondragaccept; taskcolumn({ required this title, required this tasks, required this ondragaccept, }); @override widget build(buildcontext context) { return dragtarget\<task>( onwillaccept (task) => true, onaccept (task) { ondragaccept(task); }, builder (context, candidatedata, rejecteddata) { return container( padding edgeinsets all(16 0), child column( children \[ text( title, style textstyle(fontsize 22, fontweight fontweight bold), ), expanded( child listview( children tasks map((task) { return draggable\<task>( data task, feedback material( child taskcard(task task), elevation 4 0, ), childwhendragging opacity( opacity 0 5, child taskcard(task task), ), child taskcard(task task), ); }) tolist(), ), ), ], ), ); }, ); } } class taskcard extends statelesswidget { final task task; taskcard({required this task}); @override widget build(buildcontext context) { return card( margin edgeinsets symmetric(vertical 8 0), child listtile( title text(task title), ), ); } } explicação página inicial a tela principal que exibe duas colunas—"a fazer" e "tarefas concluídas" coluna de tarefas um widget que exibe tarefas e atua como um dragtarget para draggable tarefas cartão de tarefa um widget para exibir informações de tarefas individuais passo 7 – executando o app 7 1 execute o app no seu terminal, execute flutter run 7 2 testar a funcionalidade de arrastar e soltar arraste uma tarefa da coluna "a fazer" e solte a na coluna "concluído" o status da tarefa deve ser atualizado e ela deve aparecer sob "concluído" a mudança persiste no back4app; se você reiniciar o app, a tarefa permanece em seu novo status conclusão neste tutorial, você aprendeu como implementar a funcionalidade de arrastar e soltar em uma aplicação flutter usando draggable e dragtarget widgets você integrou o back4app para armazenar e recuperar dados de tarefas, permitindo a persistência de dados entre sessões este aplicativo interativo demonstra como melhorar a experiência do usuário com elementos de ui intuitivos e um backend escalável principais conclusões widgets arrastáveis permitir que os usuários arrastem elementos da interface widgets dragtarget definir zonas de soltura para itens arrastáveis integração back4app fornece um backend para armazenar e gerenciar dados próximos passos adicionar autenticação implementar autenticação de usuário para ter listas de tarefas personalizadas melhorar ui/ux adicionar animações, ícones personalizados e layouts aprimorados atualizações em tempo real usar as consultas ao vivo do back4app para atualizar tarefas em tempo real em vários dispositivos tratamento de erros implementar tratamento de erros para problemas de rede e conflitos de dados recursos adicionais documentação do back4app https //www back4app com/docs guia do parse sdk para flutter https //docs parseplatform org/flutter/guide/ documentação oficial do flutter https //flutter dev/docs widget arrastável https //api flutter dev/flutter/widgets/draggable class html widget dragtarget https //api flutter dev/flutter/widgets/dragtarget class html feliz codificação!