Erstellen einer Drag-and-Drop Flutter-App mit draggable Widgets und Back4App

einführung interaktive drag and drop oberflächen verbessern das benutzererlebnis, indem sie es den benutzern ermöglichen, ui elemente intuitiv zu manipulieren flutter bietet die draggable und dragtarget widgets, um solche interaktionen zu erstellen in diesem tutorial lernen sie, wie sie eine flutter anwendung erstellen, die draggable widgets verwendet, um elemente zwischen listen zu verschieben, mit datenpersistenz über back4app—einem backend as a service, das von parse server betrieben wird am ende dieses tutorials haben sie eine funktionale flutter app, in der benutzer elemente von einer liste in eine andere ziehen können, und die änderungen werden in back4app gespeichert und abgerufen dieses tutorial ist für flutter entwickler aller erfahrungsstufen geeignet voraussetzungen um dieses tutorial abzuschließen, benötigen sie flutter sdk auf ihrem computer installiert befolgen sie die offizielle flutter installationsanleitung https //flutter dev/docs/get started/install für ihr betriebssystem grundkenntnisse in flutter und dart wenn sie neu bei flutter sind, lesen sie die flutter dokumentation https //flutter dev/docs durch, um sich mit den grundlagen vertraut zu machen eine ide oder einen texteditor wie visual studio code oder android studio ein back4app konto melden sie sich für ein kostenloses konto bei back4app https //www back4app com/ an parse server sdk für flutter in ihr projekt integriert erfahren sie, wie sie es einrichten, indem sie die back4app flutter sdk anleitung https //www back4app com/docs/flutter/parse flutter sdk befolgen übersicht wir werden eine aufgabenverwaltungs app erstellen, in der aufgaben von einer "zu erledigen" liste in eine "abgeschlossen" liste und umgekehrt gezogen werden können die app wird verwenden sie draggable widgets, um das ziehen von aufgaben zu ermöglichen verwenden sie dragtarget widgets, um ablagezonen zu definieren speichern und abrufen von aufgaben von back4app, um daten zu persistieren schritt 1 – einrichten des flutter projekts 1 1 erstellen sie ein neues flutter projekt öffnen sie ihr terminal und führen sie aus flutter create drag drop app navigieren sie zum projektverzeichnis cd drag drop app 1 2 abhängigkeiten hinzufügen öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten hinzu dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 führen sie flutter pub get aus, um die pakete zu installieren schritt 2 – back4app einrichten 2 1 erstellen sie eine neue back4app anwendung melden sie sich bei ihrem back4app dashboard https //dashboard back4app com/ an klicken sie auf "neue app erstellen" geben sie einen namen für ihre anwendung ein, z b "dragdropapp" , und klicken sie auf "erstellen" 2 2 datenmodell einrichten navigieren sie in ihrem anwendungs dashboard zum "datenbank" bereich klicken sie auf "klasse erstellen" im modal wählen sie "benutzerdefiniert" geben sie "aufgabe" als klassennamen ein klicken sie auf "klasse erstellen" 2 3 spalten zur klasse hinzufügen klicken sie in der "aufgabe" klasse auf "+" um neue spalten hinzuzufügen fügen sie die folgenden spalten hinzu titel typ string status typ string fügen sie einige beispieldaten zur "aufgabe" klasse hinzu zum beispiel 2 4 anmeldeinformationen für die anwendung abrufen navigieren sie zu app einstellungen > sicherheit & schlüssel notieren sie sich ihre anwendungs id und client schlüssel schritt 3 – parse in ihrer flutter app initialisieren öffnen sie lib/main dart und ändern sie es wie folgt 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(), ); } } ersetzen sie 'ihre anwendungs id' und 'ihre client key' durch ihre tatsächlichen back4app anmeldeinformationen schritt 4 – erstellen des aufgabenmodells erstellen sie ein neues verzeichnis namens models unter lib und fügen sie eine datei mit dem namen task dart // lib/models/task dart class task { string id; string title; string status; task({required this id, required this title, required this status}); } schritt 5 – abrufen von aufgaben von back4app erstellen sie ein neues verzeichnis namens services unter lib und fügen sie eine datei mit dem namen 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(); } } schritt 6 – benutzeroberfläche mit draggable und dragtarget erstellen erstellen sie ein neues verzeichnis namens screens unter lib und fügen sie eine datei mit dem namen 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), ), ); } } erklärung startseite der hauptbildschirm, der zwei spalten anzeigt—"zu erledigen" und "abgeschlossene" aufgaben aufgabenspalte ein widget, das aufgaben anzeigt und als ein dragtarget für draggable aufgaben fungiert aufgabenkarte ein widget zur anzeige von informationen zu einzelnen aufgaben schritt 7 – die app ausführen 7 1 führen sie die app aus führen sie in ihrem terminal aus flutter run 7 2 testen sie die drag and drop funktionalität ziehen sie eine aufgabe aus der spalte "zu erledigen" und lassen sie sie in die spalte "abgeschlossen" fallen der status der aufgabe sollte aktualisiert werden, und sie sollte unter "abgeschlossen" erscheinen die änderung bleibt in back4app bestehen; wenn sie die app neu starten, bleibt die aufgabe in ihrem neuen status fazit in diesem tutorial haben sie gelernt, wie sie drag and drop funktionalität in einer flutter anwendung mit draggable und dragtarget widgets implementieren sie haben back4app integriert, um aufgabendaten zu speichern und abzurufen, was eine datenpersistenz über sitzungen hinweg ermöglicht diese interaktive app zeigt, wie man das benutzererlebnis mit intuitiven ui elementen und einem skalierbaren backend verbessern kann wichtige erkenntnisse zugängliche widgets ermöglichen sie benutzern, ui elemente zu ziehen dragtarget widgets definieren sie ablagezonen für ziehbare elemente back4app integration bietet ein backend zur speicherung und verwaltung von daten nächste schritte authentifizierung hinzufügen implementieren sie die benutzerauthentifizierung, um personalisierte aufgabenlisten zu haben ui/ux verbessern fügen sie animationen, benutzerdefinierte symbole und verbesserte layouts hinzu echtzeit updates verwenden sie die live abfragen von back4app, um aufgaben in echtzeit auf mehreren geräten zu aktualisieren fehlerbehandlung implementieren sie die fehlerbehandlung für netzwerkprobleme und datenkonflikte zusätzliche ressourcen back4app dokumentation https //www back4app com/docs parse sdk für flutter anleitung https //docs parseplatform org/flutter/guide/ flutter offizielle dokumentation https //flutter dev/docs zugängliches widget https //api flutter dev/flutter/widgets/draggable class html dragtarget widget https //api flutter dev/flutter/widgets/dragtarget class html viel spaß beim programmieren!