Building a Drag-and-Drop Flutter App with Draggable Widgets and Back4App

22min
Introduction
Interactive drag-and-drop interfaces enhance user experience by allowing users to manipulate UI elements intuitively. Flutter provides the Draggable and DragTarget widgets to create such interactions. In this tutorial, you will learn how to build a Flutter application that uses Draggable widgets to move items between lists, with data persistence using Back4App—a backend-as-a-service powered by Parse Server.
By the end of this tutorial, you will have a functional Flutter app where users can drag items from one list to another, and the changes will be stored and retrieved from Back4App. This tutorial is suitable for Flutter developers of all experience levels.
Prerequisites
To complete this tutorial, you will need:
Flutter SDK installed on your machine. Follow the official Flutter installation guide for your operating system.
Basic knowledge of Flutter and Dart. If you're new to Flutter, review the Flutter documentation to familiarize yourself with the basics.
An IDE or text editor such as Visual Studio Code or Android Studio.
A Back4App account. Sign up for a free account at Back4App.
Parse Server SDK for Flutter added to your project. Learn how to set it up by following the Back4App Flutter SDK Guide.
Overview
We will build a task management app where tasks can be dragged from a "To Do" list to a "Completed" list and vice versa. The app will:
Use Draggable widgets to enable dragging of tasks.
Use DragTarget widgets to define drop zones.
Store and retrieve tasks from Back4App to persist data.
Step 1 – Setting Up the Flutter Project
1.1. Create a New Flutter Project
Open your terminal and run:
Bash
flutter create drag_drop_app
flutter create drag_drop_app
﻿
Navigate to the project directory:
Bash
cd drag_drop_app
cd drag_drop_app
﻿
1.2. Add Dependencies
Open pubspec.yaml and add the following dependencies:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
Run flutter pub get to install the packages.
Step 2 – Setting Up Back4App
2.1. Create a New Back4App Application
Log in to your Back4App dashboard.
Click on "Create new App".
Enter a name for your application, e.g., "DragDropApp", and click "Create".
2.2. Set Up the Data Model
In your application dashboard, navigate to the "Database" section.
Click on "Create a class".
In the modal:
Select "Custom".
Enter "Task" as the class name.
Click "Create class".
2.3. Add Columns to the Class
In the "Task" class, click on "+" to add new columns.
Add the following columns:
title: Type String
status: Type String
Add some sample data to the "Task" class. For example:
2.4. Obtain Application Credentials
Navigate to App Settings > Security & Keys.
Note down your Application ID and Client Key.
Step 3 – Initializing Parse in Your Flutter App
Open lib/main.dart and modify it as follows:
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(),
    );
  }
}
﻿
Replace 'YOUR_APPLICATION_ID' and 'YOUR_CLIENT_KEY' with your actual Back4App credentials.
Step 4 – Creating the Task Model
Create a new directory called models under lib and add a file named 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});
}
﻿
Step 5 – Fetching Tasks from Back4App
Create a new directory called services under lib and add a file named 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();
  }
}
﻿
Step 6 – Building the UI with Draggable and DragTarget
Create a new directory called screens under lib and add a file named 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),
      ),
    );
  }
}
﻿
Explanation
HomePage: The main screen that displays two columns—"To Do" and "Completed" tasks.
TaskColumn: A widget that displays tasks and acts as a DragTarget for Draggable tasks.
TaskCard: A widget to display individual task information.
Step 7 – Running the App
7.1. Run the App
In your terminal, run:
Bash
flutter run
flutter run
﻿
7.2. Test Drag and Drop Functionality
Drag a task from the "To Do" column and drop it into the "Completed" column.
The task's status should update, and it should appear under "Completed".
The change persists in Back4App; if you restart the app, the task remains in its new status.
Conclusion
In this tutorial, you learned how to implement drag-and-drop functionality in a Flutter application using Draggable and DragTarget widgets. You integrated Back4App to store and retrieve task data, allowing for data persistence across sessions. This interactive app demonstrates how to enhance user experience with intuitive UI elements and a scalable backend.
Key Takeaways
Draggable Widgets: Enable users to drag UI elements.
DragTarget Widgets: Define drop zones for draggable items.
Back4App Integration: Provides a backend to store and manage data.
Next Steps
Add Authentication: Implement user authentication to have personalized task lists.
Enhance UI/UX: Add animations, custom icons, and improved layouts.
Real-Time Updates: Use Back4App's Live Queries to update tasks in real-time across multiple devices.
Error Handling: Implement error handling for network issues and data conflicts.
Additional Resources
﻿Back4App Documentation﻿
﻿Parse SDK for Flutter Guide﻿
﻿Flutter Official Documentation﻿
﻿Draggable Widget﻿
﻿DragTarget Widget﻿
Happy Coding!
Updated 14 Sep 2024
Did this page help you?
How to Implement Keyboard Shortcuts in Flutter with CallbackShortcuts and Back4App