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

บทนำ วิดเจ็ตหน้าจอหลักช่วยให้ผู้ใช้เข้าถึงข้อมูลเรียลไทม์จากแอปของคุณโดยตรงบนหน้าจอหลักของอุปกรณ์โดยไม่ต้องเปิดแอป ด้วย flutter การสร้างวิดเจ็ตเหล่านี้ต้องการโค้ดเฉพาะแพลตฟอร์มบางอย่าง อย่างไรก็ตาม แพ็คเกจ home widget https //pub dev/packages/home widget ช่วยเชื่อมช่องว่างนี้โดยการเปิดใช้งานการแลกเปลี่ยนข้อมูลระหว่างแอป flutter ของคุณและวิดเจ็ตหน้าจอหลักโดยใช้โค้ด dart ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการสร้างวิดเจ็ตหน้าจอหลักใน flutter โดยใช้ home widget แพ็คเกจและรวมเข้ากับ back4app—บริการแบ็กเอนด์ที่ขับเคลื่อนโดย parse server เมื่อสิ้นสุดบทแนะนำนี้ คุณจะมีแอป flutter ที่แสดงข้อมูลจาก back4app ในวิดเจ็ตหน้าจอหลัก ข้อกำหนดเบื้องต้น ในการทำบทแนะนำนี้ให้เสร็จสมบูรณ์ คุณจะต้องมี 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 ลงทะเบียนสำหรับบัญชีฟรีที่ back4app https //www back4app com/ parse server sdk สำหรับ flutter เพิ่มในโปรเจกต์ของคุณ คุณสามารถเรียนรู้วิธีการตั้งค่าโดยการติดตาม คู่มือ back4app flutter sdk 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 ใหม่ เข้าสู่ระบบที่ แดชบอร์ด 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 การโต้ตอบ เพิ่มการกระทำเมื่อคลิกที่วิดเจ็ตของคุณเพื่อเปิดหน้าที่เฉพาะในแอปของคุณ การปรับแต่ง ปรับแต่งวิดเจ็ตของคุณให้ตรงกับธีมและการออกแบบของแอปของคุณ แหล่งข้อมูลเพิ่มเติม เอกสาร back4app https //www back4app com/docs แพ็กเกจ home widget บน pub dev https //pub dev/packages/home widget คู่มือ parse sdk สำหรับ flutter https //docs parseplatform org/flutter/guide/ เอกสารอย่างเป็นทางการของ flutter https //flutter dev/docs เขียนโค้ดให้สนุก!