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

22min
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 pour votre système d'exploitation.
Connaissances de base en Flutter et Dart. Si vous êtes nouveau sur Flutter, consultez la documentation Flutter 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.
Parse Server SDK pour Flutter ajouté à votre projet. Apprenez à le configurer en suivant le Guide SDK Flutter de Back4App.
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 :
Bash
flutter create drag_drop_app
flutter create drag_drop_app
﻿
Naviguez vers le répertoire du projet :
Bash
cd drag_drop_app
cd drag_drop_app
﻿
1.2. Ajouter des dépendances
Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
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.
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 :
Dart
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(),
    );
  }
}
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:
Dart
// lib/models/task.dart
class Task {
  String id;
  String title;
  String status;

  Task({required this.id, required this.title, required this.status});
}
// 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:
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();
  }
}
// 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:
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),
      ),
    );
  }
}
// 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 :
Bash
flutter run
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﻿
﻿Guide du SDK Parse pour Flutter﻿
﻿Documentation officielle de Flutter﻿
﻿Widget Déplaçable﻿
﻿Widget Cible de Glissement﻿
Bonne programmation !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment implémenter des raccourcis clavier dans Flutter avec CallbackShortcuts et Back4App
Tutoriaux Back4app