วิธีสร้างวิดเจ็ตหน้าหลักใน Flutter ด้วย HomeWidget และ Back4App

บทนำ วิดเจ็ตหน้าจอหลักช่วยให้ผู้ใช้เข้าถึงข้อมูลเรียลไทม์จากแอปของคุณโดยตรงบนหน้าจอหลักของอุปกรณ์โดยไม่ต้องเปิดแอป ด้วย flutter การสร้างวิดเจ็ตเหล่านี้ต้องการโค้ดเฉพาะแพลตฟอร์มบางอย่าง อย่างไรก็ตาม แพ็คเกจ home widget https //pub dev/packages/home widget ช่วยเชื่อมช่องว่างนี้โดยการเปิดใช้งานการแลกเปลี่ยนข้อมูลระหว่างแอป flutter ของคุณและวิดเจ็ตหน้าจอหลักโดยใช้โค้ด dart ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการสร้างวิดเจ็ตหน้าจอหลักใน flutter โดยใช้ home widget แพ็คเกจและรวมเข้ากับ back4app—บริการแบ็กเอนด์ที่ขับเคลื่อนโดย parse server เมื่อสิ้นสุดบทแนะนำนี้ คุณจะมีแอป flutter ที่แสดงข้อมูลจาก back4app ในวิดเจ็ตหน้าจอหลัก ข้อกำหนดเบื้องต้น ในการทำบทแนะนำนี้ให้เสร็จสมบูรณ์ คุณจะต้องมี flutter sdk ติดตั้งบนเครื่องของคุณ คุณสามารถติดตาม https //flutter dev/docs/get started/install สำหรับระบบปฏิบัติการของคุณ ความรู้พื้นฐานเกี่ยวกับ flutter และ dart หากคุณเป็นมือใหม่ใน flutter ให้พิจารณาทบทวน https //flutter dev/docs เพื่อทำความคุ้นเคยกับพื้นฐาน ide หรือโปรแกรมแก้ไขข้อความ เช่น visual studio code หรือ android studio บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ https //www back4app com/ parse server sdk สำหรับ flutter เพิ่มในโปรเจกต์ของคุณ คุณสามารถเรียนรู้วิธีการตั้งค่าโดยการติดตาม https //www back4app com/docs/flutter/parse flutter sdk การตั้งค่าเฉพาะแพลตฟอร์ม สำหรับวิดเจ็ตหน้าจอหลักของ android และ ios ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ flutter 1 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและรัน flutter create home widget app ไปที่ไดเรกทอรีโปรเจกต์ cd home widget app 1 2 เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้ dependencies flutter sdk flutter home widget ^0 2 4 parse server sdk flutter ^4 0 1 รัน flutter pub get เพื่อติดตั้งแพ็คเกจ ขั้นตอนที่ 2 – ตั้งค่า back4app 2 1 สร้างแอปพลิเคชัน back4app ใหม่ เข้าสู่ระบบที่ https //dashboard back4app com/ คลิกที่ "สร้างแอปใหม่" ใส่ชื่อสำหรับแอปพลิเคชันของคุณ เช่น "homewidgetapp" , และคลิก "สร้าง" 2 2 ตั้งค่าโมเดลข้อมูล ในแดชบอร์ดแอปพลิเคชันของคุณ ให้ไปที่ "database" ส่วน คลิกที่ "create a class" ในโมดัล เลือก "custom" ป้อน "message" เป็นชื่อคลาส คลิก "create class" 2 3 เพิ่มคอลัมน์ในคลาส ในคลาส "message" คลิกที่ "+" เพื่อเพิ่มคอลัมน์ใหม่ เพิ่มคอลัมน์ต่อไปนี้ title พิมพ์ string content พิมพ์ string เพิ่มข้อมูลตัวอย่างบางอย่างไปยัง "message" คลาส เช่น 2 4 รับข้อมูลประจำตัวแอปพลิเคชัน ไปที่ app settings > security & keys จดบันทึก application id และ client key ของคุณ ขั้นตอนที่ 3 – การเริ่มต้น parse ในแอป flutter ของคุณ เปิด lib/main dart และแก้ไขตามนี้ import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ home widget/home widget dart'; import 'dart\ async'; import '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()); } แทนที่ 'your application id' และ 'your client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขั้นตอนที่ 4 – การดึงข้อมูลจาก back4app สร้างไฟล์ใหม่ lib/home page dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ home widget/home widget dart'; import 'dart\ async'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class message { final string title; final string content; message(this title, this content); } class homepagestate extends state\<homepage> { message? message; @override void initstate() { super initstate(); fetchmessage(); } future\<void> fetchmessage() async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('message')); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { final data = apiresponse results! first; final title = data get\<string>('title') ?? ''; final content = data get\<string>('content') ?? ''; setstate(() { message = message(title, content); }); updatehomewidget(title, content); } else { print('error fetching data ${apiresponse error? message}'); } } future\<void> updatehomewidget(string title, string content) async { await homewidget savewidgetdata\<string>('title', title); await homewidget savewidgetdata\<string>('content', content); await homewidget updatewidget( name 'homewidgetprovider', // name of your homewidgetprovider iosname 'homewidget'); // used in ios } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('home widget app'), ), body center( child message == null ? circularprogressindicator() column( mainaxisalignment mainaxisalignment center, children \[ text( message! title, style textstyle(fontsize 24, fontweight fontweight bold), ), sizedbox(height 10), text( message! content, style textstyle(fontsize 18), ), sizedbox(height 20), elevatedbutton( onpressed fetchmessage, child text('refresh message'), ), ], ), ), ); } } คำอธิบาย message class คลาสโมเดลง่ายๆ เพื่อเก็บข้อมูลข้อความ fetchmessage() ดึงข้อมูลจาก message คลาสใน back4app และอัปเดต message ตัวแปร updatehomewidget() บันทึกข้อมูลที่ดึงมาไปยังวิดเจ็ตหน้าจอหลักโดยใช้ homewidget savewidgetdata และกระตุ้นการอัปเดตโดยใช้ homewidget updatewidget build() แสดงข้อมูลข้อความและปุ่มเพื่อรีเฟรชข้อความ ขั้นตอนที่ 5 – การตั้งค่าวิดเจ็ตหน้าจอหลัก 5 1 การตั้งค่า android 5 1 1 สร้างเลย์เอาต์ของ widget สร้างไฟล์เลย์เอาต์ xml ใหม่ใน android/app/src/main/res/layout/ ชื่อ home widget xml \<! android/app/src/main/res/layout/home widget xml > \<?xml version="1 0" encoding="utf 8"?> \<framelayout xmlns\ android="http //schemas android com/apk/res/android" android\ layout width="match parent" android\ layout height="match parent"> \<textview android\ id="@+id/widget title" android\ layout width="wrap content" android\ layout height="wrap content" android\ text="title" android\ textsize="18sp" android\ layout gravity="center horizontal|top" android\ paddingtop="16dp"/> \<textview android\ id="@+id/widget content" android\ layout width="wrap content" android\ layout height="wrap content" android\ text="content" android\ textsize="14sp" android\ layout gravity="center" android\ paddingtop="8dp"/> \</framelayout> 5 1 2 สร้างผู้ให้บริการ widget สร้างคลาส java ใหม่ใน android/app/src/main/java/your/package/name/ ชื่อ homewidgetprovider java // android/app/src/main/java/your/package/name/homewidgetprovider java package your package name; import android appwidget appwidgetmanager; import android appwidget appwidgetprovider; import android content context; public class homewidgetprovider extends appwidgetprovider { @override public void onupdate(context context, appwidgetmanager appwidgetmanager, int\[] appwidgetids) { // the homewidget package handles the update } } แทนที่ your package name ด้วยชื่อแพ็คเกจจริงของคุณ 5 1 3 อัปเดต android manifest เพิ่มผู้ให้บริการวิดเจ็ตลงใน androidmanifest xml \<! add inside the \<application> tag > \<receiver android\ name=" homewidgetprovider"> \<intent filter> \<action android\ name="android appwidget action appwidget update"/> \</intent filter> \<meta data android\ name="android appwidget provider" android\ resource="@xml/home widget info"/> \</receiver> 5 1 4 สร้างข้อมูลวิดเจ็ต xml สร้างไฟล์ xml ใหม่ใน android/app/src/main/res/xml/ ชื่อ home widget info xml \<! android/app/src/main/res/xml/home widget info xml > \<?xml version="1 0" encoding="utf 8"?> \<appwidget provider xmlns\ android="http //schemas android com/apk/res/android" android\ initiallayout="@layout/home widget" android\ minwidth="180dp" android\ minheight="110dp" android\ updateperiodmillis="0" android\ resizemode="horizontal|vertical" android\ widgetcategory="home screen"> \</appwidget provider> 5 2 การตั้งค่า ios 5 2 1 สร้าง widget extension เปิดโปรเจกต์ flutter ของคุณใน xcode โดยการเปิด ios/runner xcworkspace คลิก file > new > target เลือก widget extension และคลิก next ป้อน homewidget เป็นชื่อผลิตภัณฑ์และตรวจสอบให้แน่ใจว่า include configuration intent ถูกยกเลิกการเลือก คลิก finish และ activate แผนงาน 5 2 2 อัปเดตโค้ด widget ใน homewidget extension, เปิด homewidget swift และแก้ไขมัน import widgetkit import swiftui struct provider timelineprovider { func placeholder(in context context) > simpleentry { simpleentry(date date(), title "title", content "content") } func getsnapshot(in context context, completion @escaping (simpleentry) > ()) { let entry = simpleentry(date date(), title "title", content "content") completion(entry) } func gettimeline(in context context, completion @escaping (timeline\<entry>) > ()) { var entries \[simpleentry] = \[] let shareddefaults = userdefaults(suitename "your group id") let title = shareddefaults? string(forkey "title") ?? "title" let content = shareddefaults? string(forkey "content") ?? "content" let entrydate = date() let entry = simpleentry(date entrydate, title title, content content) entries append(entry) let timeline = timeline(entries entries, policy never) completion(timeline) } } struct simpleentry timelineentry { let date date let title string let content string } struct homewidgetentryview view { var entry provider entry var body some view { vstack { text(entry title) font( headline) text(entry content) font( body) } } } @main struct homewidget widget { let kind string = "homewidget" var body some widgetconfiguration { staticconfiguration(kind kind, provider provider()) { entry in homewidgetentryview(entry entry) } configurationdisplayname("home widget") description("this is a home screen widget ") } } แทนที่ your group id ด้วยตัวระบุกลุ่มแอปของคุณ (เช่น group com example homewidgetapp ) 5 2 3 ตั้งค่ากลุ่มแอป ใน xcode ให้เลือกโปรเจกต์ของคุณและไปที่ signing & capabilities เพิ่ม "app groups" ในทั้งเป้าหมายแอปหลักและส่วนขยายวิดเจ็ต สร้างกลุ่มแอปใหม่ (เช่น group com example homewidgetapp ) ตรวจสอบให้แน่ใจว่าเป้าหมายทั้งสองมีการเปิดใช้งานกลุ่มแอปเดียวกัน 5 3 อัปเดตโค้ด flutter สำหรับการกำหนดค่าที่เฉพาะเจาะจงกับแพลตฟอร์ม ใน updatehomewidget() เมธอดใน home page dart , อัปเดตชื่อวิดเจ็ต await homewidget updatewidget( name 'homewidgetprovider', // for android, the class name of your appwidgetprovider iosname 'homewidget', // for ios, the name of your widget extension ); ขั้นตอนที่ 6 – การรันแอปและทดสอบ widget 6 1 รันแอป ในเทอร์มินัลของคุณ รัน flutter run 6 2 เพิ่ม widget ลงในหน้าจอหลักของคุณ android กดค้างที่หน้าจอหลักและเลือก "widgets" ค้นหาแอปของคุณในรายการ widget ลากและวาง widget ลงบนหน้าจอหลักของคุณ ios เข้าสู่ โหมดสั่น โดยการกดค้างที่หน้าจอหลัก แตะที่ "+" ปุ่มที่มุมซ้ายบน ค้นหา widget ของคุณตามชื่อ เพิ่ม widget ลงในหน้าจอหลักของคุณ 6 3 การอัปเดตข้อมูลทดสอบ แตะที่ "refresh message" ปุ่มในแอปของคุณเพื่อดึงข้อมูลใหม่จาก back4app วิดเจ็ตบนหน้าจอหลักของคุณควรอัปเดตด้วยข้อมูลใหม่ บทสรุป ในบทแนะนำนี้ คุณได้เรียนรู้วิธีการสร้างวิดเจ็ตหน้าจอหลักใน flutter โดยใช้ home widget แพ็กเกจและรวมเข้ากับ back4app เพื่อแสดงข้อมูลที่เปลี่ยนแปลงได้ ซึ่งช่วยให้คุณสามารถให้ข้อมูลที่ทันสมัยแก่ผู้ใช้ได้โดยตรงบนหน้าจอหลักของพวกเขา เพิ่มความมีส่วนร่วมและประสบการณ์ของผู้ใช้ ขั้นตอนถัดไป ข้อมูลที่เปลี่ยนแปลงได้ ใช้การอัปเดตข้อมูลแบบเรียลไทม์โดยใช้ live queries ของ back4app การโต้ตอบ เพิ่มการกระทำเมื่อคลิกที่วิดเจ็ตของคุณเพื่อเปิดหน้าที่เฉพาะในแอปของคุณ การปรับแต่ง ปรับแต่งวิดเจ็ตของคุณให้ตรงกับธีมและการออกแบบของแอปของคุณ แหล่งข้อมูลเพิ่มเติม https //www back4app com/docs https //pub dev/packages/home widget https //docs parseplatform org/flutter/guide/ https //flutter dev/docs เขียนโค้ดให้สนุก!