Cara Membuat Widget Layar Utama di Flutter dengan HomeWidget dan Back4App

pendahuluan widget layar beranda memungkinkan pengguna untuk mengakses informasi waktu nyata dari aplikasi anda langsung di layar beranda perangkat mereka tanpa membuka aplikasi dengan flutter, membuat widget ini memerlukan beberapa kode spesifik platform namun, paket home widget https //pub dev/packages/home widget menjembatani kesenjangan ini dengan memungkinkan pertukaran data antara aplikasi flutter anda dan widget layar beranda menggunakan kode dart dalam tutorial ini, anda akan belajar bagaimana cara membuat widget layar beranda di flutter menggunakan paket home widget dan mengintegrasikannya dengan back4app—sebuah backend as a service yang didukung oleh parse server pada akhir tutorial ini, anda akan memiliki aplikasi flutter yang menampilkan data dari back4app dalam widget layar beranda prasyarat untuk menyelesaikan tutorial ini, anda akan memerlukan flutter sdk terinstal di mesin anda anda dapat mengikuti 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, pertimbangkan untuk meninjau 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 anda dapat belajar cara mengaturnya dengan mengikuti panduan sdk flutter back4app https //www back4app com/docs/flutter/parse flutter sdk pengaturan spesifik platform untuk widget layar utama android dan ios langkah 1 – menyiapkan proyek flutter 1 1 buat proyek flutter baru buka terminal anda dan jalankan flutter create home widget app navigasi ke direktori proyek cd home widget app 1 2 tambahkan dependensi buka pubspec yaml dan tambahkan dependensi berikut dependencies flutter sdk flutter home widget ^0 2 4 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, "homewidgetapp" , 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 "pesan" sebagai nama kelas klik "buat kelas" 2 3 tambahkan kolom ke kelas di kelas "pesan" , klik pada "+" untuk menambahkan kolom baru tambahkan kolom berikut judul ketik string konten ketik string tambahkan beberapa data contoh ke kelas "pesan" 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 '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()); } ganti 'your application id' dan 'your client key' dengan kredensial back4app anda yang sebenarnya langkah 4 – mengambil data dari back4app buat file baru 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'), ), ], ), ), ); } } penjelasan kelas pesan sebuah kelas model sederhana untuk menyimpan data pesan fetchmessage() mengambil data dari kelas pesan di back4app dan memperbarui variabel pesan updatehomewidget() menyimpan data yang diambil ke widget layar beranda menggunakan homewidget savewidgetdata dan memicu pembaruan menggunakan homewidget updatewidget build() menampilkan data pesan dan tombol untuk menyegarkan pesan langkah 5 – menyiapkan widget layar beranda 5 1 pengaturan android 5 1 1 buat tata letak widget buat file tata letak xml baru di android/app/src/main/res/layout/ bernama 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 buat penyedia widget buat kelas java baru di android/app/src/main/java/your/package/name/ bernama 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 } } ganti your package name dengan nama paket anda yang sebenarnya 5 1 3 perbarui android manifest tambahkan penyedia widget ke 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 buat widget info xml buat file xml baru di android/app/src/main/res/xml/ bernama 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 pengaturan ios 5 2 1 buat ekstensi widget buka proyek flutter anda di xcode dengan membuka ios/runner xcworkspace klik file > new > target pilih widget extension dan klik next masukkan homewidget sebagai nama produk dan pastikan include configuration intent tidak dicentang klik finish dan activate skema 5 2 2 perbarui kode widget di dalam homewidget ekstensi, buka homewidget swift dan modifikasi 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 ") } } ganti your group id dengan pengidentifikasi grup aplikasi anda (misalnya, group com example homewidgetapp ) 5 2 3 atur grup aplikasi di xcode, pilih proyek anda dan pergi ke signing & capabilities tambahkan "app groups" ke target aplikasi utama dan ekstensi widget buat grup aplikasi baru (misalnya, group com example homewidgetapp ) pastikan kedua target memiliki grup aplikasi yang sama diaktifkan 5 3 perbarui kode flutter untuk konfigurasi spesifik platform di updatehomewidget() metode anda di home page dart , perbarui nama widget await homewidget updatewidget( name 'homewidgetprovider', // for android, the class name of your appwidgetprovider iosname 'homewidget', // for ios, the name of your widget extension ); langkah 6 – menjalankan aplikasi dan menguji widget 6 1 jalankan aplikasi di terminal anda, jalankan flutter run 6 2 tambahkan widget ke layar utama anda android tekan lama pada layar utama dan pilih "widgets" temukan aplikasi anda di daftar widget seret dan jatuhkan widget ke layar utama anda ios masuk ke mode jiggle dengan menekan lama pada layar utama ketuk tombol "+" di sudut kiri atas cari widget anda berdasarkan nama tambahkan widget ke layar utama anda 6 3 pembaruan data uji ketuk "refresh message" tombol di aplikasi anda untuk mengambil data baru dari back4app widget di layar beranda anda harus diperbarui dengan data baru kesimpulan dalam tutorial ini, anda belajar bagaimana cara membuat widget layar beranda di flutter menggunakan paket home widget dan mengintegrasikannya dengan back4app untuk menampilkan data dinamis ini memungkinkan anda memberikan informasi terkini kepada pengguna langsung di layar beranda mereka, meningkatkan keterlibatan dan pengalaman pengguna langkah selanjutnya data dinamis terapkan pembaruan data waktu nyata menggunakan live queries dari back4app interaktivitas tambahkan aksi klik pada widget anda untuk membuka halaman tertentu di aplikasi anda kustomisasi gaya widget anda agar sesuai dengan tema dan desain aplikasi anda sumber daya tambahan dokumentasi back4app https //www back4app com/docs paket home widget di pub dev https //pub dev/packages/home widget panduan parse sdk untuk flutter https //docs parseplatform org/flutter/guide/ dokumentasi resmi flutter https //flutter dev/docs selamat berkoding!