สร้างแอป Flutter ด้วย OverlayPortal และการรวม Back4app

บทนำ ในบทเรียนนี้ เราจะเรียนรู้วิธีการใช้ overlayportal ใน flutter เพื่อสร้าง overlay แบบไดนามิกสำหรับ widget เช่น tooltips หรือเมนู นอกจากนี้เราจะรวม back4app เพื่อเก็บและจัดการข้อมูลผู้ใช้ เช่น ความชอบหรือการกระทำที่เกิดขึ้นเมื่อมีการโต้ตอบกับ overlay เมื่อสิ้นสุดบทเรียนนี้ คุณจะสามารถ นำ overlayportal ไปใช้ในแอป flutter แสดง overlay แบบโต้ตอบ เช่น เมนูลอยหรือ tooltips รวม back4app เป็น backend เพื่อเก็บข้อมูลที่เกี่ยวข้องกับ overlay (เช่น ความชอบของผู้ใช้หรือการกระทำ) ข้อกำหนดเบื้องต้น สภาพแวดล้อม flutter ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง flutter แล้ว ทำตาม คู่มือการติดตั้ง https //flutter dev/docs/get started/install บัญชี back4app ลงทะเบียนที่ back4app https //www back4app com/ เพื่อใช้เป็น backend ของคุณ ความรู้พื้นฐานเกี่ยวกับ flutter widgets ความคุ้นเคยกับ widget พื้นฐานของ flutter เช่น ปุ่ม, คอนเทนเนอร์, และ overlay ขั้นตอนที่ 1 การตั้งค่า back4app 1 1 สร้างโปรเจกต์ back4app ลงชื่อเข้าใช้ บัญชี back4app ของคุณ https //www back4app com/ และสร้างโปรเจกต์ใหม่ชื่อ overlaydemoapp สร้าง คลาส parse ชื่อ overlayactions โดยมีฟิลด์ดังต่อไปนี้ ชื่อผู้ใช้ (string) ชื่อของผู้ใช้ ประเภทการกระทำ (string) การกระทำที่เกิดขึ้นบน overlay (เช่น "เปิด", "ปิด", "คลิก") เวลา (datetime) เวลาที่การกระทำเกิดขึ้น 1 2 รับข้อมูลประจำตัว back4app ของคุณ จากแดชบอร์ด back4app ให้ไปที่การตั้งค่าของโปรเจกต์ของคุณและดึง application id และ client key ข้อมูลประจำตัวเหล่านี้จะถูกใช้ในการเริ่มต้น back4app ในแอป flutter ของคุณ ขั้นตอนที่ 2 ตั้งค่าโปรเจกต์ flutter 2 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและสร้างโปรเจกต์ flutter ใหม่ flutter create overlay portal app cd overlay portal app 2 2 เพิ่ม dependencies เปิดไฟล์ pubspec yaml และเพิ่ม dependencies ที่จำเป็นสำหรับ parse sdk และ overlayportal dependencies flutter sdk flutter parse server sdk flutter ^latest version overlay portal ^0 1 0 provider ^5 0 0 รัน flutter pub get เพื่อติดตั้ง dependencies 2 3 เริ่มต้น parse sdk ใน lib/main dart , เริ่มต้น parse sdk ด้วยข้อมูลรับรอง back4app ของคุณ import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'overlay portal demo', theme themedata(primaryswatch colors blue), home overlayscreen(), ); } } แทนที่ your back4app app id และ your back4app client key ด้วยข้อมูลรับรอง back4app ของคุณ ขั้นตอนที่ 3 การนำ overlayportal ไปใช้ใน flutter 3 1 สร้าง widget overlayscreen ใน lib/overlay screen dart , สร้าง widget หลักที่เราจะนำ overlayportal ไปใช้ import 'package\ flutter/material dart'; import 'package\ overlay portal/overlay portal dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class overlayscreen extends statefulwidget { @override overlayscreenstate createstate() => overlayscreenstate(); } class overlayscreenstate extends state\<overlayscreen> { final overlayportalcontroller controller = overlayportalcontroller(); bool isoverlayvisible = false; future\<void> logaction(string actiontype) async { // log action to back4app final actionobject = parseobject('overlayactions') set('username', 'player1') // example user set('actiontype', actiontype) set('timestamp', datetime now()); await actionobject save(); } void toggleoverlay() { setstate(() { isoverlayvisible = ! isoverlayvisible; if ( isoverlayvisible) { logaction('opened'); } else { logaction('closed'); } }); controller toggle(); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('overlay portal example'), ), body center( child column( mainaxisalignment mainaxisalignment center, children \[ elevatedbutton( onpressed toggleoverlay, child text( isoverlayvisible ? 'hide overlay' 'show overlay'), ), overlayportal( controller controller, overlaychildbuilder (context) => positioned( top 150, left 50, child material( elevation 5 0, borderradius borderradius circular(8), child container( padding edgeinsets all(16 0), color colors blueaccent, child column( mainaxissize mainaxissize min, children \[ text( 'this is an overlay!', style textstyle(color colors white), ), sizedbox(height 10), elevatedbutton( onpressed () { logaction('clicked'); scaffoldmessenger of(context) showsnackbar(snackbar( content text('overlay button clicked!'), )); }, child text('click me'), ), ], ), ), ), ), ), ], ), ), ); } } ในการดำเนินการนี้ overlayportal ถูกเปิดและปิดด้วยการกดปุ่ม การโต้ตอบของผู้ใช้ (การเปิด, การปิด, หรือการคลิก) จะถูกบันทึกไปยัง back4app โดยใช้ logaction วิธี การซ้อนทับมีข้อความและปุ่มที่กระตุ้นการกระทำ 3 2 สร้าง ui ui ประกอบด้วยปุ่มที่สลับการมองเห็นของ overlay โดย overlay จะถูกจัดตำแหน่งโดยใช้ positioned widget เมื่อ overlay มองเห็นได้ จะมีกล่องลอยที่มีข้อความและปุ่มปรากฏบนหน้าจอ ขั้นตอนที่ 4 รันแอป เปิดเทอร์มินัลและรันแอปโดยใช้ คลิกที่ show overlay ปุ่มเพื่อสลับ overlay เมื่อ overlay มองเห็นได้ ให้คลิกปุ่มภายใน overlay การโต้ตอบทั้งหมด (เปิด, ปิด, และคลิก) จะถูกบันทึกไปยัง back4app ขั้นตอนที่ 5 ดูการกระทำที่บันทึกไว้บน back4app เพื่อตรวจสอบว่าการกระทำของผู้ใช้ถูกบันทึก ไปที่แดชบอร์ด back4app ของคุณ ไปที่ overlayactions คลาส คุณควรเห็นบันทึกของการกระทำ (เปิด, ปิด, คลิก) ที่ถูกบันทึกพร้อมกับเวลาที่บันทึก ขั้นตอนที่ 6 ปรับแต่ง overlay คุณสามารถปรับแต่ง overlay เพิ่มเติมได้โดย เปลี่ยนตำแหน่งของ overlay ด้วย positioned วิดเจ็ต เพิ่มวิดเจ็ตที่ซับซ้อนมากขึ้น เช่น ฟอร์มหรือเมนู ภายใน overlay ตกแต่ง overlay ด้วยสี, ขอบ, และเงาที่แตกต่างกัน บทสรุป ในบทเรียนนี้ คุณได้เรียนรู้วิธีการใช้งาน overlayportal ในแอป flutter เพื่อสร้าง overlay ที่โต้ตอบได้ซึ่งสามารถเปิดและปิดได้ นอกจากนี้ เรายังรวม back4app เพื่อบันทึกการโต้ตอบของผู้ใช้กับ overlay ซึ่งให้แบ็กเอนด์ที่แข็งแกร่งในการจัดเก็บข้อมูลและเพิ่มฟังก์ชันการทำงานของแอป การตั้งค่านี้สามารถใช้เพื่อสร้างแอปพลิเคชันที่มีฟีเจอร์หลากหลายซึ่งการโต้ตอบของผู้ใช้กับ overlay (เช่น tooltips, เมนู, ป๊อปอัพ) ถูกเก็บไว้ในแบ็กเอนด์ ซึ่งให้ข้อมูลเชิงลึกเกี่ยวกับพฤติกรรมของผู้ใช้หรือช่วยในการโหลดเนื้อหาที่มีพลศาสตร์ตามข้อมูลเรียลไทม์ สำหรับข้อมูลเพิ่มเติม เอกสาร flutter overlay portal https //pub dev/packages/overlay portal เอกสาร back4app https //www back4app com/docs