การสร้างแอป Flutter แบบลากและวางด้วยวิดเจ็ตที่สามารถลากได้และ Back4App

บทนำ อินเตอร์เฟซแบบลากและวางแบบโต้ตอบช่วยเพิ่มประสบการณ์ผู้ใช้โดยอนุญาตให้ผู้ใช้จัดการองค์ประกอบ ui ได้อย่างเป็นธรรมชาติ flutter มี draggable และ dragtarget วิดเจ็ตเพื่อสร้างการโต้ตอบดังกล่าว ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีสร้างแอป flutter ที่ใช้ draggable วิดเจ็ตเพื่อย้ายรายการระหว่างรายการ โดยมีการเก็บข้อมูลถาวรโดยใช้ back4app—บริการแบ็คเอนด์ที่ขับเคลื่อนโดย parse server เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอป flutter ที่ใช้งานได้ซึ่งผู้ใช้สามารถลากรายการจากรายการหนึ่งไปยังอีกรายการหนึ่ง และการเปลี่ยนแปลงจะถูกเก็บและเรียกคืนจาก back4app บทเรียนนี้เหมาะสำหรับนักพัฒนา flutter ทุกระดับประสบการณ์ ข้อกำหนดเบื้องต้น ในการทำบทเรียนนี้ให้เสร็จสมบูรณ์ คุณจะต้องมี flutter sdk ติดตั้งบนเครื่องของคุณ ทำตาม คู่มือการติดตั้ง flutter อย่างเป็นทางการ https //flutter dev/docs/get started/install สำหรับระบบปฏิบัติการของคุณ ความรู้พื้นฐานเกี่ยวกับ flutter และ dart หากคุณเป็นมือใหม่ใน flutter ให้ตรวจสอบ เอกสาร flutter https //flutter dev/docs เพื่อทำความคุ้นเคยกับพื้นฐาน ide หรือโปรแกรมแก้ไขข้อความ เช่น visual studio code หรือ android studio บัญชี back4app account ลงทะเบียนสำหรับบัญชีฟรีที่ back4app https //www back4app com/ parse server sdk สำหรับ flutter เพิ่มในโปรเจกต์ของคุณ เรียนรู้วิธีตั้งค่าโดยทำตาม คู่มือ back4app flutter sdk https //www back4app com/docs/flutter/parse flutter sdk ภาพรวม เราจะสร้างแอปการจัดการงานที่สามารถลากงานจากรายการ "ต้องทำ" ไปยังรายการ "เสร็จสิ้น" และในทางกลับกัน แอปจะ ใช้ draggable วิดเจ็ตเพื่อเปิดใช้งานการลากงาน ใช้ dragtarget วิดเจ็ตเพื่อกำหนดโซนการวาง จัดเก็บและเรียกคืนงานจาก back4app เพื่อรักษาข้อมูล ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ flutter 1 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและรัน flutter create drag drop app ไปที่ไดเรกทอรีโปรเจกต์ cd drag drop app 1 2 เพิ่มการพึ่งพา เปิด pubspec yaml และเพิ่มการพึ่งพาต่อไปนี้ dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 รัน flutter pub get เพื่อติดตั้งแพ็คเกจ ขั้นตอนที่ 2 – การตั้งค่า back4app 2 1 สร้างแอปพลิเคชัน back4app ใหม่ เข้าสู่ระบบที่ แดชบอร์ด back4app https //dashboard back4app com/ คลิกที่ "สร้างแอปใหม่" ใส่ชื่อสำหรับแอปพลิเคชันของคุณ เช่น "dragdropapp" , และคลิก "สร้าง" 2 2 ตั้งค่ารูปแบบข้อมูล ในแดชบอร์ดแอปพลิเคชันของคุณ ให้ไปที่ "ฐานข้อมูล" ส่วน คลิกที่ "สร้างคลาส" ในโมดัล เลือก "กำหนดเอง" ป้อน "งาน" เป็นชื่อคลาส คลิก "สร้างคลาส" 2 3 เพิ่มคอลัมน์ในคลาส ในคลาส "งาน" คลิกที่ "+" เพื่อเพิ่มคอลัมน์ใหม่ เพิ่มคอลัมน์ต่อไปนี้ ชื่อเรื่อง ประเภท string สถานะ ประเภท string เพิ่มข้อมูลตัวอย่างบางอย่างในคลาส "งาน" ตัวอย่างเช่น 2 4 รับข้อมูลประจำตัวแอปพลิเคชัน ไปที่ การตั้งค่าแอป > ความปลอดภัย & คีย์ จดบันทึก หมายเลขประจำตัวแอปพลิเคชัน และ คีย์ลูกค้า ขั้นตอนที่ 3 – เริ่มต้น parse ในแอป flutter ของคุณ เปิด lib/main 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(), ); } } แทนที่ 'your application id' และ 'your client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขั้นตอนที่ 4 – การสร้างโมเดลงาน สร้างไดเรกทอรีใหม่ชื่อ models ภายใต้ lib และเพิ่มไฟล์ชื่อ task dart // lib/models/task dart class task { string id; string title; string status; task({required this id, required this title, required this status}); } ขั้นตอนที่ 5 – การดึงงานจาก back4app สร้างไดเรกทอรีใหม่ชื่อ services ภายใต้ lib และเพิ่มไฟล์ชื่อ 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(); } } ขั้นตอนที่ 6 – สร้าง ui ด้วย draggable และ dragtarget สร้างไดเรกทอรีใหม่ชื่อ screens ภายใต้ lib และเพิ่มไฟล์ชื่อ 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), ), ); } } คำอธิบาย หน้าแรก หน้าหลักที่แสดงสองคอลัมน์—"งานที่ต้องทำ" และ "งานที่เสร็จสิ้น" คอลัมน์งาน วิดเจ็ตที่แสดงงานและทำหน้าที่เป็น เป้าหมายการลาก สำหรับ งานที่ลากได้ การ์ดงาน วิดเจ็ตเพื่อแสดงข้อมูลงานแต่ละงาน ขั้นตอนที่ 7 – การรันแอป 7 1 รันแอป ในเทอร์มินัลของคุณ รัน flutter run 7 2 ทดสอบฟังก์ชันการลากและวาง ลากงานจากคอลัมน์ "ที่ต้องทำ" และวางลงในคอลัมน์ "เสร็จสิ้น" สถานะของงานควรอัปเดต และควรปรากฏอยู่ภายใต้ "เสร็จสิ้น" การเปลี่ยนแปลงยังคงอยู่ใน back4app; หากคุณรีสตาร์ทแอป งานจะยังคงอยู่ในสถานะใหม่ของมัน บทสรุป ในบทเรียนนี้ คุณได้เรียนรู้วิธีการนำฟังก์ชันการลากและวางไปใช้ในแอปพลิเคชัน flutter โดยใช้ draggable และ dragtarget วิดเจ็ต คุณได้รวม back4app เพื่อจัดเก็บและเรียกคืนข้อมูลงาน ทำให้สามารถเก็บข้อมูลได้ตลอดเซสชัน แอปพลิเคชันเชิงโต้ตอบนี้แสดงให้เห็นถึงวิธีการปรับปรุงประสบการณ์ผู้ใช้ด้วยองค์ประกอบ ui ที่ใช้งานง่ายและแบ็กเอนด์ที่สามารถขยายได้ ข้อสรุปที่สำคัญ วิดเจ็ตที่ลากได้ เปิดใช้งานให้ผู้ใช้ลากองค์ประกอบ ui วิดเจ็ต dragtarget กำหนดโซนการวางสำหรับรายการที่ลากได้ การรวม back4app ให้บริการ backend เพื่อเก็บและจัดการข้อมูล ขั้นตอนถัดไป เพิ่มการตรวจสอบสิทธิ์ นำการตรวจสอบสิทธิ์ผู้ใช้มาใช้เพื่อให้มีรายการงานที่ปรับแต่งได้ ปรับปรุง ui/ux เพิ่มอนิเมชัน ไอคอนที่กำหนดเอง และเลย์เอาต์ที่ดีขึ้น การอัปเดตแบบเรียลไทม์ ใช้ live queries ของ back4app เพื่ออัปเดตงานแบบเรียลไทม์ในหลายอุปกรณ์ การจัดการข้อผิดพลาด นำการจัดการข้อผิดพลาดมาใช้สำหรับปัญหาเครือข่ายและความขัดแย้งของข้อมูล แหล่งข้อมูลเพิ่มเติม เอกสาร back4app https //www back4app com/docs คู่มือ parse sdk สำหรับ flutter https //docs parseplatform org/flutter/guide/ เอกสารอย่างเป็นทางการของ flutter https //flutter dev/docs วิดเจ็ต draggable https //api flutter dev/flutter/widgets/draggable class html วิดเจ็ต dragtarget https //api flutter dev/flutter/widgets/dragtarget class html เขียนโค้ดให้สนุก!