Costruisci un'app Flutter con funzionalità di trascinamento e rilascio utilizzando widget trascinabili e Back4App

introduzione le interfacce interattive di trascinamento e rilascio migliorano l'esperienza dell'utente consentendo agli utenti di manipolare gli elementi dell'interfaccia utente in modo intuitivo flutter fornisce i draggable e dragtarget widget per creare tali interazioni in questo tutorial, imparerai a costruire un'applicazione flutter che utilizza i draggable widget per spostare elementi tra le liste, con persistenza dei dati utilizzando back4app—un backend as a service alimentato da parse server alla fine di questo tutorial, avrai un'app flutter funzionante in cui gli utenti possono trascinare elementi da un elenco all'altro, e le modifiche saranno memorizzate e recuperate da back4app questo tutorial è adatto per sviluppatori flutter di tutti i livelli di esperienza prerequisiti per completare questo tutorial, avrai bisogno di flutter sdk installato sul tuo computer segui la guida ufficiale all'installazione di flutter https //flutter dev/docs/get started/install per il tuo sistema operativo conoscenze di base di flutter e dart se sei nuovo a flutter, rivedi la documentazione di flutter https //flutter dev/docs per familiarizzare con le basi un ide o editor di testo come visual studio code o android studio un account back4app registrati per un account gratuito su back4app https //www back4app com/ parse server sdk per flutter aggiunto al tuo progetto scopri come configurarlo seguendo la guida sdk flutter di back4app https //www back4app com/docs/flutter/parse flutter sdk panoramica costruiremo un'app di gestione delle attività in cui le attività possono essere trascinate da un elenco "da fare" a un elenco "completato" e viceversa l'app usa draggable widget per abilitare il trascinamento delle attività usa dragtarget widget per definire le zone di rilascio memorizza e recupera le attività da back4app per persistere i dati passo 1 – configurazione del progetto flutter 1 1 crea un nuovo progetto flutter apri il tuo terminale e esegui flutter create drag drop app naviga nella directory del progetto cd drag drop app 1 2 aggiungi dipendenze apri pubspec yaml e aggiungi le seguenti dipendenze dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 esegui flutter pub get per installare i pacchetti passo 2 – configurazione di back4app 2 1 crea una nuova applicazione back4app accedi al tuo dashboard di back4app https //dashboard back4app com/ clicca su "crea nuova app" inserisci un nome per la tua applicazione, ad esempio, "dragdropapp" , e clicca su "crea" 2 2 configurare il modello di dati nel tuo dashboard dell'applicazione, vai alla "database" sezione clicca su "crea una classe" nella finestra modale seleziona "personalizzato" inserisci "task" come nome della classe clicca "crea classe" 2 3 aggiungi colonne alla classe nella classe "task" , clicca su "+" per aggiungere nuove colonne aggiungi le seguenti colonne titolo tipo string stato tipo string aggiungi alcuni dati di esempio alla "task" classe ad esempio 2 4 ottenere le credenziali dell'applicazione naviga su impostazioni app > sicurezza e chiavi annota il tuo id applicazione e chiave client passo 3 – inizializzare parse nella tua app flutter apri lib/main dart e modificalo come segue 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(), ); } } sostituisci 'your application id' e 'your client key' con le tue credenziali effettive di back4app passo 4 – creazione del modello di task crea una nuova directory chiamata models sotto lib e aggiungi un file chiamato 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 – recupero dei task da back4app crea una nuova directory chiamata services sotto lib e aggiungi un file chiamato 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(); } } passaggio 6 – costruire l'interfaccia utente con draggable e dragtarget crea una nuova directory chiamata screens sotto lib e aggiungi un file chiamato 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), ), ); } } spiegazione homepage la schermata principale che visualizza due colonne—"da fare" e "completati" taskcolumn un widget che visualizza i compiti e funge da dragtarget per draggable compiti taskcard un widget per visualizzare le informazioni sui singoli compiti passo 7 – esecuzione dell'app 7 1 esegui l'app nel tuo terminale, esegui flutter run 7 2 testa la funzionalità di trascinamento e rilascio trascina un'attività dalla colonna "da fare" e rilasciala nella colonna "completato" lo stato dell'attività dovrebbe aggiornarsi e dovrebbe apparire sotto "completato" la modifica persiste in back4app; se riavvii l'app, l'attività rimane nel suo nuovo stato conclusione in questo tutorial, hai imparato come implementare la funzionalità di trascinamento e rilascio in un'applicazione flutter utilizzando draggable e dragtarget widget hai integrato back4app per memorizzare e recuperare i dati delle attività, consentendo la persistenza dei dati tra le sessioni questa app interattiva dimostra come migliorare l'esperienza utente con elementi ui intuitivi e un backend scalabile punti chiave widget trascinabili consenti agli utenti di trascinare elementi dell'interfaccia widget dragtarget definisci zone di rilascio per gli elementi trascinabili integrazione back4app fornisce un backend per memorizzare e gestire i dati prossimi passi aggiungi autenticazione implementa l'autenticazione degli utenti per avere elenchi di attività personalizzati migliora ui/ux aggiungi animazioni, icone personalizzate e layout migliorati aggiornamenti in tempo reale usa le live queries di back4app per aggiornare le attività in tempo reale su più dispositivi gestione degli errori implementa la gestione degli errori per problemi di rete e conflitti di dati risorse aggiuntive documentazione back4app https //www back4app com/docs guida sdk parse per flutter https //docs parseplatform org/flutter/guide/ documentazione ufficiale flutter https //flutter dev/docs widget trascinabile https //api flutter dev/flutter/widgets/draggable class html widget dragtarget https //api flutter dev/flutter/widgets/dragtarget class html buon codice!