Membangun Aplikasi Flutter Drag-and-Drop dengan Widget Draggable dan Back4App

22min
Pendahuluan
Antarmuka interaktif seret dan lepas meningkatkan pengalaman pengguna dengan memungkinkan pengguna untuk memanipulasi elemen UI secara intuitif. Flutter menyediakan Draggable dan DragTarget widget untuk membuat interaksi semacam itu. Dalam tutorial ini, Anda akan belajar bagaimana membangun aplikasi Flutter yang menggunakan Draggable widget untuk memindahkan item antara daftar, dengan ketahanan data menggunakan Back4App—sebuah backend-as-a-service yang didukung oleh Parse Server.
Pada akhir tutorial ini, Anda akan memiliki aplikasi Flutter fungsional di mana pengguna dapat menyeret item dari satu daftar ke daftar lainnya, dan perubahan akan disimpan dan diambil dari Back4App. Tutorial ini cocok untuk pengembang Flutter dari semua tingkat pengalaman.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan memerlukan:
Flutter SDK terinstal di mesin Anda. Ikuti panduan instalasi Flutter resmi untuk sistem operasi Anda.
Pengetahuan dasar tentang Flutter dan Dart. Jika Anda baru mengenal Flutter, tinjau dokumentasi Flutter untuk membiasakan diri dengan dasar-dasarnya.
Sebuah IDE atau editor teks seperti Visual Studio Code atau Android Studio.
Sebuah akun Back4App. Daftar untuk akun gratis di Back4App.
Parse Server SDK untuk Flutter ditambahkan ke proyek Anda. Pelajari cara mengaturnya dengan mengikuti Panduan SDK Flutter Back4App.
Ikhtisar
Kami akan membangun aplikasi manajemen tugas di mana tugas dapat diseret dari daftar "To Do" ke daftar "Completed" dan sebaliknya. Aplikasi ini akan:
Gunakan Draggable widget untuk mengaktifkan penarikan tugas.
Gunakan DragTarget widget untuk mendefinisikan zona drop.
Simpan dan ambil tugas dari Back4App untuk mempertahankan data.
Langkah 1 – Menyiapkan Proyek Flutter
1.1. Buat Proyek Flutter Baru
Buka terminal Anda dan jalankan:
Bash
flutter create drag_drop_app
flutter create drag_drop_app
﻿
Navigasikan ke direktori proyek:
Bash
cd drag_drop_app
cd drag_drop_app
﻿
1.2. Tambahkan Dependensi
Buka pubspec.yaml dan tambahkan dependensi berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
Jalankan flutter pub get untuk menginstal paket.
Langkah 2 – Menyiapkan Back4App
2.1. Buat Aplikasi Back4App Baru
Masuk ke dasbor Back4App.
Klik pada "Buat aplikasi baru".
Masukkan nama untuk aplikasi Anda, misalnya, "DragDropApp", dan klik "Buat".
2.2. Siapkan Model Data
Di dasbor aplikasi Anda, navigasikan ke bagian "Database".
Klik pada "Buat kelas".
Di modal:
Pilih "Kustom".
Masukkan "Tugas" sebagai nama kelas.
Klik "Buat kelas".
2.3. Tambahkan Kolom ke Kelas
Di kelas "Tugas", klik pada "+" untuk menambahkan kolom baru.
Tambahkan kolom berikut:
judul: Tipe String
status: Tipe String
Tambahkan beberapa data contoh ke kelas "Tugas". Misalnya:
2.4. Dapatkan Kredensial Aplikasi
Navigasikan ke Pengaturan Aplikasi > Keamanan & Kunci.
Catat ID Aplikasi dan Kunci Klien Anda.
Langkah 3 – Menginisialisasi Parse di Aplikasi Flutter Anda
Buka lib/main.dart dan ubah seperti berikut:
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(),
    );
  }
}
﻿
Ganti 'YOUR_APPLICATION_ID' dan 'YOUR_CLIENT_KEY' dengan kredensial Back4App Anda yang sebenarnya.
Langkah 4 – Membuat Model Tugas
Buat direktori baru bernama models di bawah lib dan tambahkan file bernama 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});
}
﻿
Langkah 5 – Mengambil Tugas dari Back4App
Buat direktori baru bernama services di bawah lib dan tambahkan file bernama 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();
  }
}
﻿
Langkah 6 – Membangun UI dengan Draggable dan DragTarget
Buat direktori baru bernama screens di bawah lib dan tambahkan file bernama 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),
      ),
    );
  }
}
﻿
Penjelasan
Halaman Utama: Layar utama yang menampilkan dua kolom—tugas "Untuk Dilakukan" dan "Selesai."
KolomTugas: Sebuah widget yang menampilkan tugas dan berfungsi sebagai DragTarget untuk Draggable tugas.
KartuTugas: Sebuah widget untuk menampilkan informasi tugas individu.
Langkah 7 – Menjalankan Aplikasi
7.1. Jalankan Aplikasi
Di terminal Anda, jalankan:
Bash
flutter run
flutter run
﻿
7.2. Uji Fungsionalitas Seret dan Jatuhkan
Seret tugas dari kolom "To Do" dan jatuhkan ke kolom "Completed".
Status tugas harus diperbarui, dan harus muncul di bawah "Completed".
Perubahan tetap ada di Back4App; jika Anda memulai ulang aplikasi, tugas tetap dalam status barunya.
Kesimpulan
Dalam tutorial ini, Anda belajar bagaimana mengimplementasikan fungsionalitas seret dan jatuhkan dalam aplikasi Flutter menggunakan Draggable dan DragTarget widget. Anda mengintegrasikan Back4App untuk menyimpan dan mengambil data tugas, memungkinkan untuk ketahanan data di seluruh sesi. Aplikasi interaktif ini menunjukkan bagaimana meningkatkan pengalaman pengguna dengan elemen UI yang intuitif dan backend yang dapat diskalakan.
Poin Penting
Widget Dapat Diseret: Memungkinkan pengguna untuk menyeret elemen UI.
Widget Target Seret: Mendefinisikan zona jatuh untuk item yang dapat diseret.
Integrasi Back4App: Menyediakan backend untuk menyimpan dan mengelola data.
Langkah Selanjutnya
Tambahkan Autentikasi: Implementasikan autentikasi pengguna untuk memiliki daftar tugas yang dipersonalisasi.
Tingkatkan UI/UX: Tambahkan animasi, ikon kustom, dan tata letak yang lebih baik.
Pembaruan Waktu Nyata: Gunakan Live Queries dari Back4App untuk memperbarui tugas secara waktu nyata di berbagai perangkat.
Penanganan Kesalahan: Implementasikan penanganan kesalahan untuk masalah jaringan dan konflik data.
Sumber Daya Tambahan
﻿Dokumentasi Back4App﻿
﻿Panduan Parse SDK untuk Flutter﻿
﻿Dokumentasi Resmi Flutter﻿
﻿Widget Dapat Diseret﻿
﻿Widget Target Seret﻿
Selamat Berkoding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Mengimplementasikan Pintasan Keyboard di Flutter dengan CallbackShortcuts dan Back4App
BERIKUTNYA
Tutoriais Back4app