Más
Construyendo una aplicación Flutter de arrastrar y soltar con widgets arrastrables y Back4App

22min
Introducción
Las interfaces interactivas de arrastrar y soltar mejoran la experiencia del usuario al permitir que los usuarios manipulen los elementos de la interfaz de usuario de manera intuitiva. Flutter proporciona los Draggable y DragTarget widgets para crear tales interacciones. En este tutorial, aprenderás a construir una aplicación Flutter que utiliza Draggable widgets para mover elementos entre listas, con persistencia de datos utilizando Back4App—un backend como servicio impulsado por Parse Server.
Al final de este tutorial, tendrás una aplicación Flutter funcional donde los usuarios pueden arrastrar elementos de una lista a otra, y los cambios se almacenarán y recuperarán de Back4App. Este tutorial es adecuado para desarrolladores de Flutter de todos los niveles de experiencia.
Requisitos previos
Para completar este tutorial, necesitarás:
Flutter SDK instalado en tu máquina. Sigue la guía de instalación oficial de Flutter para tu sistema operativo.
Conocimientos básicos de Flutter y Dart. Si eres nuevo en Flutter, revisa la documentación de Flutter para familiarizarte con los conceptos básicos.
Un IDE o editor de texto como Visual Studio Code o Android Studio.
Una cuenta de Back4App. Regístrate para obtener una cuenta gratuita en Back4App.
Parse Server SDK para Flutter agregado a tu proyecto. Aprende cómo configurarlo siguiendo la Guía de SDK de Flutter de Back4App.
Descripción general
Construiremos una aplicación de gestión de tareas donde las tareas se pueden arrastrar de una lista de "Por Hacer" a una lista de "Completadas" y viceversa. La aplicación:
Usa Draggable widgets para habilitar el arrastre de tareas.
Usa DragTarget widgets para definir zonas de caída.
Almacena y recupera tareas de Back4App para persistir datos.
Paso 1 – Configuración del Proyecto Flutter
1.1. Crea un Nuevo Proyecto Flutter
Abre tu terminal y ejecuta:
Bash
flutter create drag_drop_app
flutter create drag_drop_app
﻿
Navega al directorio del proyecto:
Bash
cd drag_drop_app
cd drag_drop_app
﻿
1.2. Agregar Dependencias
Abre pubspec.yaml y agrega las siguientes dependencias:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
Ejecuta flutter pub get para instalar los paquetes.
Paso 2 – Configurando Back4App
2.1. Crear una Nueva Aplicación en Back4App
Inicia sesión en tu panel de Back4App.
Haz clic en "Crear nueva App".
Ingresa un nombre para tu aplicación, por ejemplo, "DragDropApp", y haz clic en "Crear".
2.2. Configurar el modelo de datos
En el panel de control de tu aplicación, navega a la "Base de datos" sección.
Haz clic en "Crear una clase".
En el modal:
Selecciona "Personalizado".
Ingresa "Tarea" como el nombre de la clase.
Haz clic en "Crear clase".
2.3. Agregar columnas a la clase
En la "Tarea" clase, haz clic en "+" para agregar nuevas columnas.
Agrega las siguientes columnas:
título: Tipo Cadena
estado: Tipo Cadena
Agrega algunos datos de ejemplo a la "Tarea" clase. Por ejemplo:
2.4. Obtener credenciales de la aplicación
Navega a Configuración de la aplicación > Seguridad y claves.
Anota tu ID de aplicación y Clave de cliente.
Paso 3 – Inicializando Parse en tu aplicación Flutter
Abre lib/main.dart y modifícalo de la siguiente manera:
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(),
    );
  }
}
﻿
Reemplaza 'YOUR_APPLICATION_ID' y 'YOUR_CLIENT_KEY' con tus credenciales reales de Back4App.
Paso 4 – Creando el Modelo de Tarea
Crea un nuevo directorio llamado models bajo lib y agrega un archivo llamado 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});
}
﻿
Paso 5 – Obteniendo Tareas de Back4App
Crea un nuevo directorio llamado services bajo lib y agrega un archivo llamado 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();
  }
}
﻿
Paso 6 – Construyendo la interfaz de usuario con Draggable y DragTarget
Crea un nuevo directorio llamado screens bajo lib y agrega un archivo llamado 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),
      ),
    );
  }
}
﻿
Explicación
Página de inicio: La pantalla principal que muestra dos columnas—"Por hacer" y "Tareas completadas".
Columna de tareas: Un widget que muestra tareas y actúa como un Objetivo de arrastre para Tareas arrastrables.}]}]},{
Tarjeta de tarea: Un widget para mostrar información de tareas individuales.
Paso 7 – Ejecutando la aplicación
7.1. Ejecutar la aplicación
En tu terminal, ejecuta:
Bash
flutter run
flutter run
﻿
7.2. Probar la funcionalidad de arrastrar y soltar
Arrastra una tarea de la columna "Por Hacer" y suéltala en la columna "Completado".
El estado de la tarea debería actualizarse y debería aparecer bajo "Completado".
El cambio persiste en Back4App; si reinicias la aplicación, la tarea permanece en su nuevo estado.
Conclusión
En este tutorial, aprendiste cómo implementar la funcionalidad de arrastrar y soltar en una aplicación Flutter utilizando Draggable y DragTarget widgets. Integraste Back4App para almacenar y recuperar datos de tareas, permitiendo la persistencia de datos a través de sesiones. Esta aplicación interactiva demuestra cómo mejorar la experiencia del usuario con elementos de interfaz intuitivos y un backend escalable.
Conclusiones clave
Widgets Arrastrables: Permitir a los usuarios arrastrar elementos de la interfaz.
Widgets DragTarget: Definir zonas de caída para elementos arrastrables.
Integración con Back4App: Proporciona un backend para almacenar y gestionar datos.
Próximos pasos
Agregar Autenticación: Implementar autenticación de usuarios para tener listas de tareas personalizadas.
Mejorar UI/UX: Agregar animaciones, íconos personalizados y diseños mejorados.
Actualizaciones en Tiempo Real: Usar las Consultas en Vivo de Back4App para actualizar tareas en tiempo real en múltiples dispositivos.
Manejo de Errores: Implementar manejo de errores para problemas de red y conflictos de datos.
Recursos Adicionales
﻿Documentación de Back4App﻿
﻿Guía del SDK de Parse para Flutter﻿
﻿Documentación Oficial de Flutter﻿
﻿Widget Arrastrable﻿
﻿Widget DragTarget﻿
¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Cómo implementar atajos de teclado en Flutter con CallbackShortcuts y Back4App
Nuevo Título Prueba de Back4app 1