Créer une application Flutter glisser-déposer avec des widgets draggable et Back4App

introduction les interfaces interactives de glisser déposer améliorent l'expérience utilisateur en permettant aux utilisateurs de manipuler les éléments de l'interface utilisateur de manière intuitive flutter fournit les draggable et dragtarget widgets pour créer de telles interactions dans ce tutoriel, vous apprendrez à construire une application flutter qui utilise les draggable widgets pour déplacer des éléments entre des listes, avec une persistance des données utilisant back4app—un backend en tant que service alimenté par parse server à la fin de ce tutoriel, vous aurez une application flutter fonctionnelle où les utilisateurs peuvent faire glisser des éléments d'une liste à une autre, et les modifications seront stockées et récupérées depuis back4app ce tutoriel est adapté aux développeurs flutter de tous niveaux d'expérience prérequis pour compléter ce tutoriel, vous aurez besoin de flutter sdk installé sur votre machine suivez le guide d'installation officiel de flutter https //flutter dev/docs/get started/install pour votre système d'exploitation connaissances de base en flutter et dart si vous êtes nouveau sur flutter, consultez la documentation flutter https //flutter dev/docs pour vous familiariser avec les bases un ide ou éditeur de texte tel que visual studio code ou android studio un compte back4app inscrivez vous pour un compte gratuit sur back4app https //www back4app com/ parse server sdk pour flutter ajouté à votre projet apprenez à le configurer en suivant le guide sdk flutter de back4app https //www back4app com/docs/flutter/parse flutter sdk aperçu nous allons construire une application de gestion des tâches où les tâches peuvent être glissées d'une liste "à faire" à une liste "terminée" et vice versa l'application va utilisez draggable widgets pour permettre le glissement des tâches utilisez dragtarget widgets pour définir les zones de dépôt stockez et récupérez les tâches depuis back4app pour persister les données étape 1 – configuration du projet flutter 1 1 créer un nouveau projet flutter ouvrez votre terminal et exécutez flutter create drag drop app naviguez vers le répertoire du projet cd drag drop app 1 2 ajouter des dépendances ouvrez pubspec yaml et ajoutez les dépendances suivantes dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 exécutez flutter pub get pour installer les paquets étape 2 – configuration de back4app 2 1 créer une nouvelle application back4app connectez vous à votre tableau de bord back4app https //dashboard back4app com/ cliquez sur "créer une nouvelle application" entrez un nom pour votre application, par exemple, "dragdropapp" , et cliquez sur "créer" 2 2 configurer le modèle de données dans le tableau de bord de votre application, accédez à la "base de données" section cliquez sur "créer une classe" dans la fenêtre modale sélectionnez "personnalisé" entrez "tâche" comme nom de classe cliquez sur "créer la classe" 2 3 ajouter des colonnes à la classe dans la classe "tâche" , cliquez sur "+" pour ajouter de nouvelles colonnes ajoutez les colonnes suivantes titre type chaîne statut type chaîne ajoutez quelques données d'exemple à la "tâche" classe par exemple 2 4 obtenir les identifiants de l'application accédez à paramètres de l'application > sécurité et clés notez votre id d'application et votre clé client étape 3 – initialiser parse dans votre application flutter ouvrez lib/main dart et modifiez le comme suit 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(), ); } } remplacez 'your application id' et 'your client key' par vos véritables identifiants back4app étape 4 – création du modèle de tâche créez un nouveau répertoire appelé models sous lib et ajoutez un fichier nommé task dart // lib/models/task dart class task { string id; string title; string status; task({required this id, required this title, required this status}); } étape 5 – récupération des tâches depuis back4app créez un nouveau répertoire appelé services sous lib et ajoutez un fichier nommé 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(); } } étape 6 – construction de l'interface utilisateur avec draggable et dragtarget créez un nouveau répertoire appelé screens sous lib et ajoutez un fichier nommé 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), ), ); } } explication page d'accueil l'écran principal qui affiche deux colonnes—"à faire" et "tâches terminées" colonne de tâches un widget qui affiche les tâches et agit comme un cible de glisser déposer pour les tâches glissables carte de tâche un widget pour afficher les informations sur une tâche individuelle étape 7 – exécution de l'application 7 1 exécutez l'application dans votre terminal, exécutez flutter run 7 2 tester la fonctionnalité de glisser déposer faites glisser une tâche de la colonne "à faire" et déposez la dans la colonne "terminé" le statut de la tâche doit se mettre à jour et elle doit apparaître sous "terminé" le changement persiste dans back4app ; si vous redémarrez l'application, la tâche reste dans son nouveau statut conclusion dans ce tutoriel, vous avez appris à implémenter la fonctionnalité de glisser déposer dans une application flutter en utilisant draggable et dragtarget widgets vous avez intégré back4app pour stocker et récupérer les données des tâches, permettant ainsi la persistance des données entre les sessions cette application interactive démontre comment améliorer l'expérience utilisateur avec des éléments d'interface intuitive et un backend évolutif principaux enseignements widgets déplaçables permettre aux utilisateurs de faire glisser des éléments de l'interface utilisateur widgets cibles de glissement définir des zones de dépôt pour les éléments déplaçables intégration back4app fournit un backend pour stocker et gérer des données prochaines étapes ajouter une authentification mettre en œuvre l'authentification des utilisateurs pour avoir des listes de tâches personnalisées améliorer l'ui/ux ajouter des animations, des icônes personnalisées et des mises en page améliorées mises à jour en temps réel utiliser les requêtes en direct de back4app pour mettre à jour les tâches en temps réel sur plusieurs appareils gestion des erreurs mettre en œuvre la gestion des erreurs pour les problèmes de réseau et les conflits de données ressources supplémentaires documentation back4app https //www back4app com/docs guide du sdk parse pour flutter https //docs parseplatform org/flutter/guide/ documentation officielle de flutter https //flutter dev/docs widget déplaçable https //api flutter dev/flutter/widgets/draggable class html widget cible de glissement https //api flutter dev/flutter/widgets/dragtarget class html bonne programmation !