Tutoriel : Intégrer le Drag & Drop dans FlutterFlow

Le Drag & Drop est une fonctionnalité essentielle pour améliorer l’expérience utilisateur en permettant aux éléments d’être déplacés facilement dans l’interface d’une application. Dans ce tutoriel, nous allons voir comment intégrer cette fonctionnalité dans FlutterFlow et comment dépacer ses limites.

Prérequis

Avant de commencer, assurez-vous d’avoir :

• Un projet FlutterFlow déjà créé
• Une page sur laquelle vous souhaitez implémenter le Drag & Drop
• Quelques widgets prêts à être déplacé

Créer un élément Draggable

Dans FlutterFlow, l’élément Draggable permet de rendre un widget déplaçable.

Ajouter un widget Draggable

• Ajoutez un Draggble
• À l’intérieur vous pouvez y mettre un Container (ou une image, un bouton, un texte, etc.) ou un composant.

Configuration

• Draggable Properties : La valeur qui sera transmise lors du drop.
• Child When Gragging : La possibilité d’ajouter un composant qui restera en place lors du drag. (exemple : une version transparente à la place du widget original pour montrer son emplacement initial)
• Feedback : La possibilité d’ajouter un composant qui suivra le curseur pendant le drag. (exemple : une version plus grande du widget original pour montrer qu’il est en train d’être déplacé)

Actions Triggers

• On Drag Complete : Action déclenchée lorsque l’élément est déposé et accepté par un Drag Target.
• On Drag End : Action déclenchée losrqu’un drag s’est terminé.
• On Drag Canceled : Action déclenchée lorsque l’élément n’est pas accepté par la Drag Target.
• On Drag Started : Action déclenchée lorsque l’élément commence à être bougé.
• On Drag Update : Action déclenchée tant que l’élément est entrain de bouger.

Créer une Zone de dépôt : DragTarget

Le widget DragTarget est utilisé pour définir une zone où les éléments peuvent être déposés.

Configuration

• Drag Target Properties : Permet de choisir le type de valeur qu’on attend lors d’un Draggable.

Actions Triggers

• On Drag Accept : Action déclenchée lorsque l’élément est déposé dans la zone.
• On Drag Enter : Action déclenchée lorsqu’un élément entre dans la zone.
• On Drag Exit : Action déclenchée lorsqu’un élément sort de la zone.

Exemple d’utilisation

Un cas d’usage courant est une liste de tâches où l’utilisateur peut faire glisser des éléments d’une catégorie à une autre.

• Ajoutez une liste dynamique de tâches
• Activez le Drag & Drop sur chaque tâche
• Créez des zones de drop pour organiser les tâches

Les fonctions de base sont implémentée simplement dans Flutterflow et permettent de mettre très rapidement en place Drag n Drop. Cependant Flutter offre beaucoup plus de possibilités de gestion du Drag n Drop.

Les limites

Tant qu’on veut faire un usage simple, l’implémentation de Flutterflow suffit. Ça se corse un peu dès qu’on veut aller plus loin dans la gestion du Drag n Drop. Dans ce cas pas le choix : il faut passer par des custom widgets.

Prenons le cas d’un Drag n Drop après un appui long comme nous en avons eu besoin dans le projet Smartshake.

Custom Widget LongPressDraggable

Flutter propose un widget pour ça qui s’appelle LongPressDraggable. C’est celui que nous allons utiliser dans notre custom code.

Créer un custom widget

// Automatic FlutterFlow imports
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

// Set your widget name, define your parameter, and then add the
// boilerplate code using the green button on the right!

class LongPressDraggable extends StatefulWidget {
    const LongPressDraggable({
    super.key,
    required this.width,
    required this.height,
    required this.id,
    required this.innerContainer,
    this.onDragStart,
    this.onDragEnd,
    });

    final double width;
    final double height;
    final String id;
    final Widget Function() innerContainer;
    final Function()? onDragStart;
    final Function(dynamic draggableDetails)? onDragEnd;

    @override
    State<LongPressDraggable> createState() =>
        _LongPressDraggableState();
}

class _UserHandBlockLongPressDraggableState
    extends State<UserHandBlockLongPressDraggable> {
    @override
    Widget build(BuildContext context) {
    return LongPressDraggable(
        data: widget.id, // Utilisation de l'id pour les données du drag
        feedback: _buildContainer(widget.width, dragging: true),
        childWhenDragging: _buildContainer(widget.width, opacity: 0.8),
        child: _buildContainer(widget.width),
        // Callback quand le drag commence
        onDragStarted: widget.onDragStart,
        // Callback quand le drag se termine
        onDragEnd: widget.onDragEnd,
    );
    }
    
    Widget _buildContainer(double size,
        {double opacity = 1.0, bool dragging = false}) {
    return Opacity(
        opacity: opacity,
        child: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
            if (dragging == true)
                Transform.scale(
                scale: 1.2, // Facteur de mise à l'échelle (1.0 = taille d'origine)
                child: widget.innerContainer(),
                ),
            if (dragging != true && widget.innerContainer != null)
                widget.innerContainer(),
            // Sinon, afficher un message par défaut ou une autre gestion
            if (widget.innerContainer == null)
                const Text("innerContainer est null"),
            ],
        )));
    }
}

Ajouter le widget dans la page

• Définir la taille (width/height)
• Positionner la valeur à transettre lors de drop
• Sélectionner le component à afficher
• Définir les actions du call back lors du démarrage du drag
• Définir les actions du call back lors de la fin du drag

Voici un exemple d’implémentation d’un LongPressDraggable. Selon les besoins, on peut ajouter un autre innerContainer pour le feedback ou le childWhenDragging. On peut aussi remonter d’autres types de Action Triggers.

Conclusion

L’intégration du Drag & Drop dans FlutterFlow est simple mais limitée à un usage basique. Avec quelques ajustements, vous pouvez créer des Custom Widgets qui vous donneront accès à d’autres types et paramètres des Draggables disponibles dans Flutter !