So erstellen Sie Widgets auf dem Startbildschirm in Flutter mit HomeWidget und Back4App

einführung widgets auf dem startbildschirm ermöglichen es benutzern, in echtzeit informationen aus ihrer app direkt auf dem startbildschirm ihres geräts abzurufen, ohne die app zu öffnen mit flutter erfordert die erstellung dieser widgets einige plattformspezifische codes das home widget https //pub dev/packages/home widget paket überbrückt diese lücke, indem es den datenaustausch zwischen ihrer flutter app und den widgets auf dem startbildschirm mithilfe von dart code ermöglicht in diesem tutorial lernen sie, wie sie ein widget auf dem startbildschirm in flutter mit dem home widget paket erstellen und es mit back4app integrieren—einem backend as a service, das von parse server betrieben wird am ende dieses tutorials haben sie eine flutter app, die daten von back4app in einem widget auf dem startbildschirm anzeigt voraussetzungen um dieses tutorial abzuschließen, benötigen sie flutter sdk auf ihrem computer installiert sie können die offizielle flutter installationsanleitung https //flutter dev/docs/get started/install für ihr betriebssystem befolgen grundkenntnisse in flutter und dart wenn sie neu bei flutter sind, sollten sie die flutter dokumentation https //flutter dev/docs durchsehen, um sich mit den grundlagen vertraut zu machen eine ide oder einen texteditor wie visual studio code oder android studio ein back4app konto melden sie sich für ein kostenloses konto bei back4app https //www back4app com/ an parse server sdk für flutter zu ihrem projekt hinzugefügt sie können lernen, wie sie es einrichten, indem sie die back4app flutter sdk anleitung https //www back4app com/docs/flutter/parse flutter sdk befolgen plattformspezifische einrichtung für android und ios widgets auf dem startbildschirm schritt 1 – einrichten des flutter projekts 1 1 erstellen sie ein neues flutter projekt öffnen sie ihr terminal und führen sie aus flutter create home widget app navigiere zum projektverzeichnis cd home widget app 1 2 abhängigkeiten hinzufügen öffne pubspec yaml und füge die folgenden abhängigkeiten hinzu dependencies flutter sdk flutter home widget ^0 2 4 parse server sdk flutter ^4 0 1 führe flutter pub get aus, um die pakete zu installieren schritt 2 – back4app einrichten 2 1 erstelle eine neue back4app anwendung melde dich bei deinem back4app dashboard https //dashboard back4app com/ an klicke auf "neue app erstellen" gib einen namen für deine anwendung ein, z b "homewidgetapp" , und klicke auf "erstellen" 2 2 richte das datenmodell ein navigieren sie in ihrem anwendungs dashboard zum "datenbank" abschnitt klicken sie auf "klasse erstellen" im modal wählen sie "benutzerdefiniert" geben sie "nachricht" als klassennamen ein klicken sie auf "klasse erstellen" 2 3 spalten zur klasse hinzufügen klicken sie in der "nachricht" klasse auf "+" um eine neue spalte hinzuzufügen fügen sie die folgenden spalten hinzu titel typ string inhalt typ string fügen sie einige beispieldaten zur "nachricht" klasse hinzu zum beispiel 2 4 anmeldeinformationen für die anwendung erhalten navigieren sie zu app einstellungen > sicherheit & schlüssel notieren sie sich ihre anwendungs id und client schlüssel schritt 3 – initialisierung von parse in ihrer flutter app öffnen sie lib/main dart und ändern sie es wie folgt 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()); } ersetzen sie 'ihre anwendungs id' und 'ihre client id' durch ihre tatsächlichen back4app anmeldeinformationen schritt 4 – daten von back4app abrufen erstellen sie eine neue datei 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'), ), ], ), ), ); } } erklärung nachricht klasse eine einfache modellklasse zur speicherung der nachrichtendaten fetchmessage() ruft daten aus der nachricht klasse in back4app ab und aktualisiert die nachricht variable updatehomewidget() speichert die abgerufenen daten im widget des startbildschirms mit homewidget savewidgetdata , und löst ein update mit homewidget updatewidget aus build() zeigt die nachrichtendaten und einen button zum aktualisieren der nachricht an schritt 5 – einrichten des widgets auf dem startbildschirm 5 1 android einrichtung 5 1 1 erstellen sie das widget layout erstellen sie eine neue xml layoutdatei in android/app/src/main/res/layout/ mit dem namen 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 erstellen sie den widget anbieter erstellen sie eine neue java klasse in android/app/src/main/java/your/package/name/ mit dem namen 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 } } ersetzen sie your package name durch ihren tatsächlichen paketnamen 5 1 3 aktualisieren sie das android manifest fügen sie den widget anbieter zu ihrem 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 erstellen sie widget info xml erstellen sie eine neue xml datei in android/app/src/main/res/xml/ mit dem namen 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 setup 5 2 1 erstellen sie eine widget erweiterung öffnen sie ihr flutter projekt in xcode, indem sie ios/runner xcworkspace öffnen klicken sie auf datei > neu > ziel wählen sie widget erweiterung und klicken sie auf weiter geben sie homewidget als produktnamen ein und stellen sie sicher, dass konfigurationsabsicht einbeziehen nicht ausgewählt ist klicken sie auf fertigstellen und aktivieren sie das schema 5 2 2 aktualisieren sie den widget code öffnen sie in der homewidget erweiterung homewidget swift und ändern sie es 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 ") } } ersetzen sie your group id durch ihre app gruppenkennung (z b group com example homewidgetapp ) 5 2 3 app gruppen einrichten wählen sie in xcode ihr projekt aus und gehen sie zu signing & capabilities fügen sie "app groups" sowohl zu ihrem haupt app ziel als auch zur widget erweiterung hinzu erstellen sie eine neue app gruppe (z b group com example homewidgetapp ) stellen sie sicher, dass beide ziele die gleiche app gruppe aktiviert haben 5 3 flutter code für plattformspezifische konfigurationen aktualisieren in ihrer updatehomewidget() methode in home page dart , aktualisieren sie die widget namen await homewidget updatewidget( name 'homewidgetprovider', // for android, the class name of your appwidgetprovider iosname 'homewidget', // for ios, the name of your widget extension ); schritt 6 – die app ausführen und das widget testen 6 1 die app ausführen führen sie in ihrem terminal aus flutter run 6 2 fügen sie das widget zu ihrem startbildschirm hinzu android lange drücken sie auf den startbildschirm und wählen sie "widgets" finden sie ihre app in der widget liste ziehen sie das widget auf ihren startbildschirm ios geben sie jiggle modus ein, indem sie lange auf den startbildschirm drücken tippen sie auf die "+" taste in der oberen linken ecke suchen sie ihr widget nach namen fügen sie das widget zu ihrem startbildschirm hinzu 6 3 testdatenaktualisierungen tippen sie auf die "nachricht aktualisieren" schaltfläche in ihrer app, um neue daten von back4app abzurufen das widget auf ihrem startbildschirm sollte mit den neuen daten aktualisiert werden fazit in diesem tutorial haben sie gelernt, wie sie ein widget für den startbildschirm in flutter mit dem home widget paket erstellen und es mit back4app integrieren, um dynamische daten anzuzeigen dies ermöglicht es ihnen, den benutzern aktuelle informationen direkt auf ihren startbildschirmen bereitzustellen, was das engagement und die benutzererfahrung verbessert nächste schritte dynamische daten implementieren sie echtzeitdatenaktualisierungen mit back4apps live queries interaktivität fügen sie klickaktionen zu ihrem widget hinzu, um bestimmte seiten in ihrer app zu öffnen anpassung gestalten sie ihr widget so, dass es zum thema und design ihrer app passt zusätzliche ressourcen back4app dokumentation https //www back4app com/docs home widget paket auf pub dev https //pub dev/packages/home widget parse sdk für flutter leitfaden https //docs parseplatform org/flutter/guide/ offizielle flutter dokumentation https //flutter dev/docs viel spaß beim programmieren!