Mehr
Erstellen einer Drag-and-Drop Flutter-App mit draggable Widgets und Back4App

22min
Einführung
Interaktive Drag-and-Drop-Oberflächen verbessern das Benutzererlebnis, indem sie es den Benutzern ermöglichen, UI-Elemente intuitiv zu manipulieren. Flutter bietet die Draggable und DragTarget Widgets, um solche Interaktionen zu erstellen. In diesem Tutorial lernen Sie, wie Sie eine Flutter-Anwendung erstellen, die Draggable Widgets verwendet, um Elemente zwischen Listen zu verschieben, mit Datenpersistenz über Back4App—einem Backend-as-a-Service, das von Parse Server betrieben wird.
Am Ende dieses Tutorials haben Sie eine funktionale Flutter-App, in der Benutzer Elemente von einer Liste in eine andere ziehen können, und die Änderungen werden in Back4App gespeichert und abgerufen. Dieses Tutorial ist für Flutter-Entwickler aller Erfahrungsstufen geeignet.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Flutter SDK auf Ihrem Computer installiert. Befolgen Sie die offizielle Flutter-Installationsanleitung für Ihr Betriebssystem.
Grundkenntnisse in Flutter und Dart. Wenn Sie neu bei Flutter sind, lesen Sie die Flutter-Dokumentation durch, um sich mit den Grundlagen vertraut zu machen.
Eine IDE oder einen Texteditor wie Visual Studio Code oder Android Studio.
Ein Back4App-Konto. Melden Sie sich für ein kostenloses Konto bei Back4App an.
Parse Server SDK für Flutter in Ihr Projekt integriert. Erfahren Sie, wie Sie es einrichten, indem Sie die Back4App Flutter SDK-Anleitung befolgen.
Übersicht
Wir werden eine Aufgabenverwaltungs-App erstellen, in der Aufgaben von einer "Zu erledigen"-Liste in eine "Abgeschlossen"-Liste und umgekehrt gezogen werden können. Die App wird:
Verwenden Sie Draggable Widgets, um das Ziehen von Aufgaben zu ermöglichen.
Verwenden Sie DragTarget Widgets, um Ablagezonen zu definieren.
Speichern und abrufen von Aufgaben von Back4App, um Daten zu persistieren.
Schritt 1 – Einrichten des Flutter-Projekts
1.1. Erstellen Sie ein neues Flutter-Projekt
Öffnen Sie Ihr Terminal und führen Sie aus:
Bash
flutter create drag_drop_app
flutter create drag_drop_app
﻿
Navigieren Sie zum Projektverzeichnis:
Bash
cd drag_drop_app
cd drag_drop_app
﻿
1.2. Abhängigkeiten hinzufügen
Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
Führen Sie flutter pub get aus, um die Pakete zu installieren.
Schritt 2 – Back4App einrichten
2.1. Erstellen Sie eine neue Back4App-Anwendung
Melden Sie sich bei Ihrem Back4App-Dashboard an.
Klicken Sie auf "Neue App erstellen".
Geben Sie einen Namen für Ihre Anwendung ein, z.B. "DragDropApp", und klicken Sie auf "Erstellen".
2.2. Datenmodell einrichten
Navigieren Sie in Ihrem Anwendungs-Dashboard zum "Datenbank"-Bereich.
Klicken Sie auf "Klasse erstellen".
Im Modal:
Wählen Sie "Benutzerdefiniert".
Geben Sie "Aufgabe" als Klassennamen ein.
Klicken Sie auf "Klasse erstellen".
2.3. Spalten zur Klasse hinzufügen
Klicken Sie in der "Aufgabe"-Klasse auf "+" um neue Spalten hinzuzufügen.
Fügen Sie die folgenden Spalten hinzu:
titel: Typ String
status: Typ String
Fügen Sie einige Beispieldaten zur "Aufgabe"-Klasse hinzu. Zum Beispiel:
2.4. Anmeldeinformationen für die Anwendung abrufen
Navigieren Sie zu App-Einstellungen > Sicherheit & Schlüssel.
Notieren Sie sich Ihre Anwendungs-ID und Client-Schlüssel.
Schritt 3 – Parse in Ihrer Flutter-App initialisieren
Öffnen Sie lib/main.dart und ändern Sie es wie folgt:
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(),
    );
  }
}
﻿
Ersetzen Sie 'IHRE_ANWENDUNGS_ID' und 'IHRE_CLIENT_KEY' durch Ihre tatsächlichen Back4App-Anmeldeinformationen.
Schritt 4 – Erstellen des Aufgabenmodells
Erstellen Sie ein neues Verzeichnis namens models unter lib und fügen Sie eine Datei mit dem Namen 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});
}
﻿
Schritt 5 – Abrufen von Aufgaben von Back4App
Erstellen Sie ein neues Verzeichnis namens services unter lib und fügen Sie eine Datei mit dem Namen 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();
  }
}
﻿
Schritt 6 – Benutzeroberfläche mit Draggable und DragTarget erstellen
Erstellen Sie ein neues Verzeichnis namens screens unter lib und fügen Sie eine Datei mit dem Namen 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),
      ),
    );
  }
}
﻿
Erklärung
Startseite: Der Hauptbildschirm, der zwei Spalten anzeigt—"Zu erledigen" und "Abgeschlossene" Aufgaben.
AufgabenSpalte: Ein Widget, das Aufgaben anzeigt und als ein DragTarget für Draggable Aufgaben fungiert.
AufgabenKarte: Ein Widget zur Anzeige von Informationen zu einzelnen Aufgaben.
Schritt 7 – Die App ausführen
7.1. Führen Sie die App aus
Führen Sie in Ihrem Terminal aus:
Bash
flutter run
flutter run
﻿
7.2. Testen Sie die Drag-and-Drop-Funktionalität
Ziehen Sie eine Aufgabe aus der Spalte "Zu erledigen" und lassen Sie sie in die Spalte "Abgeschlossen" fallen.
Der Status der Aufgabe sollte aktualisiert werden, und sie sollte unter "Abgeschlossen" erscheinen.
Die Änderung bleibt in Back4App bestehen; wenn Sie die App neu starten, bleibt die Aufgabe in ihrem neuen Status.
Fazit
In diesem Tutorial haben Sie gelernt, wie Sie Drag-and-Drop-Funktionalität in einer Flutter-Anwendung mit Draggable und DragTarget-Widgets implementieren. Sie haben Back4App integriert, um Aufgabendaten zu speichern und abzurufen, was eine Datenpersistenz über Sitzungen hinweg ermöglicht. Diese interaktive App zeigt, wie man das Benutzererlebnis mit intuitiven UI-Elementen und einem skalierbaren Backend verbessern kann.
Wichtige Erkenntnisse
Zugängliche Widgets: Ermöglichen Sie Benutzern, UI-Elemente zu ziehen.
DragTarget Widgets: Definieren Sie Ablagezonen für ziehbare Elemente.
Back4App Integration: Bietet ein Backend zur Speicherung und Verwaltung von Daten.
Nächste Schritte
Authentifizierung hinzufügen: Implementieren Sie die Benutzerauthentifizierung, um personalisierte Aufgabenlisten zu haben.
UI/UX verbessern: Fügen Sie Animationen, benutzerdefinierte Symbole und verbesserte Layouts hinzu.
Echtzeit-Updates: Verwenden Sie die Live-Abfragen von Back4App, um Aufgaben in Echtzeit auf mehreren Geräten zu aktualisieren.
Fehlerbehandlung: Implementieren Sie die Fehlerbehandlung für Netzwerkprobleme und Datenkonflikte.
Zusätzliche Ressourcen
﻿Back4App Dokumentation﻿
﻿Parse SDK für Flutter Anleitung﻿
﻿Flutter Offizielle Dokumentation﻿
﻿Zugängliches Widget﻿
﻿DragTarget Widget﻿
Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man Tastenkombinationen in Flutter mit CallbackShortcuts und Back4App implementiert
ALS NÄCHSTES
Neuer Titel Back4app Test 1