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

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 https //flutter dev/docs/get started/install untuk sistem operasi anda pengetahuan dasar tentang flutter dan dart jika anda baru mengenal flutter, tinjau dokumentasi flutter https //flutter dev/docs 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 https //www back4app com/ parse server sdk untuk flutter ditambahkan ke proyek anda pelajari cara mengaturnya dengan mengikuti panduan sdk flutter back4app https //www back4app com/docs/flutter/parse flutter sdk 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 flutter create drag drop app navigasikan ke direktori proyek cd drag drop app 1 2 tambahkan dependensi buka pubspec yaml dan tambahkan dependensi berikut 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 https //dashboard back4app com/ 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 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 // 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 // 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 // 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 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 https //www back4app com/docs panduan parse sdk untuk flutter https //docs parseplatform org/flutter/guide/ dokumentasi resmi flutter https //flutter dev/docs widget dapat diseret https //api flutter dev/flutter/widgets/draggable class html widget target seret https //api flutter dev/flutter/widgets/dragtarget class html selamat berkoding!