Erstellen und Verwenden einer Flutter DevTools-Erweiterung mit Back4app

einführung flutter devtools ist eine leistungsstarke suite zum debuggen, inspizieren und profilieren von flutter apps mit dem dart & flutter devtools erweiterungsframework können entwickler benutzerdefinierte erweiterungen erstellen, um ihre debugging und entwicklungsabläufe zu verbessern diese erweiterungen können als flutter web apps erstellt und nahtlos in die devtools suite integriert werden in diesem tutorial werden wir erkunden, wie man eine flutter devtools erweiterung erstellt, sie mit einer flutter app integriert, die back4app für backend dienste verwendet, und die anwendung mit der benutzerdefinierten erweiterung debuggt dies wird ihnen helfen, maßgeschneiderte entwicklerwerkzeuge zu erstellen, die ihren entwicklungsprozess optimieren und tiefere einblicke in das verhalten ihrer app bieten voraussetzungen um dieses tutorial abzuschließen, benötigen sie ein back4app konto melden sie sich für ein kostenloses konto unter back4app com https //www back4app com an eine flutter entwicklungsumgebung, die auf ihrem lokalen computer eingerichtet ist folgen sie der flutter installationsanleitung https //flutter dev/docs/get started/install , wenn sie sie noch nicht eingerichtet haben grundkenntnisse in dart, flutter widgets und der verwendung von flutter devtools schritt 1 – einrichten ihres back4app backends erstellen sie ein back4app projekt melden sie sich bei ihrem back4app konto https //www back4app com/ an und erstellen sie ein neues projekt erstellen sie parse klassen für dieses tutorial erstellen sie eine parse klasse mit dem namen themesettings zur speicherung von themenkonfigurationsdaten für ihre flutter app themename (string) der name des themas primarycolor (string) die hauptfarbe des themas accentcolor (string) die akzentfarbe des themas füllen sie die klasse mit beispieldaten fügen sie mehrere datensätze zur themesettings klasse hinzu, um themenkonfigurationen zu simulieren, die ihre flutter app verwenden wird holen sie sich ihre back4app anmeldeinformationen navigieren sie zu ihren projekteinstellungen, um ihre anwendungs id und ihren client schlüssel abzurufen, die sie benötigen, um ihre flutter app mit back4app zu verbinden schritt 2 – erstellen der flutter devtools erweiterung erstellen sie ein neues flutter projekt öffnen sie ihr terminal oder ihre eingabeaufforderung und führen sie aus flutter create theme builder extension richten sie das erweiterungsverzeichnis ein navigieren sie zu ihrem projektstammverzeichnis und erstellen sie ein neues verzeichnis für ihre devtools erweiterung mkdir devtools extension erstellen sie in diesem verzeichnis eine config yaml datei, um die von devtools benötigten metadaten zu speichern package name theme builder extension version 1 0 0 issue tracker https //github com/yourusername/theme builder extension/issues material icon assets/icon png abhängigkeiten hinzufügen öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten hinzu dependencies flutter sdk flutter devtools extensions latest version devtools app shared latest version führen sie flutter pub get aus, um diese abhängigkeiten zu installieren erstellen der devtools erweiterung in lib/main dart , ersetzen sie den standardinhalt durch den folgenden code, um ihre flutter webanwendung in ein devtoolsextension widget zu wickeln import 'package\ flutter/material dart'; import 'package\ devtools extensions/devtools extensions dart'; import 'package\ devtools app shared/devtools app shared dart'; void main() { runapp(devtoolsextension(child themebuilderapp())); } class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child elevatedbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } dies wickelt ihre app in das devtoolsextension widget, das das thema und die integration mit der devtools suite verwaltet hinzufügen von devtools integrationen ändern sie ihre app, um devtools spezifische funktionen zu integrieren, wie z b die verwendung des devtoolsbutton anstelle eines regulären elevatedbutton class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child devtoolsbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } diese änderung stellt sicher, dass die benutzeroberfläche ihrer erweiterung nahtlos mit dem rest der devtools suite verschmilzt schritt 3 – integration mit back4app initialisieren sie parse in ihrer erweiterung da diese erweiterung mit back4app interagiert, initialisieren sie parse in ihrer erweiterung 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(devtoolsextension(child themebuilderapp())); } abrufen und verwenden von theme daten verwenden sie die daten von back4app in ihrer erweiterung, um themes zu generieren und anzuwenden class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body futurebuilder\<list\<parseobject>>( future fetchthemes(), builder (context, snapshot) { if (!snapshot hasdata) { return circularprogressindicator(); } final themes = snapshot data!; return listview\ builder( itemcount themes length, itembuilder (context, index) { final theme = themes\[index]; return listtile( title text(theme get\<string>('themename') ?? 'no name'), subtitle text('primary color ${theme get\<string>('primarycolor')}'), ontap () { // apply theme logic }, ); }, ); }, ), ); } future\<list\<parseobject>> fetchthemes() async { final query = querybuilder\<parseobject>(parseobject('themesettings')); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { throw exception('failed to load themes'); } } } dieser code ruft die themen einstellungen von back4app ab und zeigt sie in einer liste an die auswahl eines themas könnte zusätzliche logik auslösen, um es anzuwenden schritt 4 – testen sie ihre erweiterung in einer simulierten umgebung führen sie die erweiterung in einer simulierten umgebung aus um ihre erweiterung zu testen, ohne sie jedes mal zu kompilieren, verwenden sie die simulierte devtools umgebung flutter run d chrome dart define=use simulated environment=true flutter run d chrome dart define=use simulated environment=true flutter run d chrome dart define=use simulated environment=true simulieren sie die verbundene app starten sie eine andere flutter app, mit der ihre erweiterung verbunden wird kopieren sie die vm dienst uri und die dtd dienst uri der verbundenen app in die simulierte umgebung schritt 5 – erstellen und veröffentlichen der erweiterung erstellen sie die erweiterung sobald sie mit ihrer erweiterung zufrieden sind, erstellen sie sie für die produktion flutter pub get flutter build web output=devtools extension/build validieren sie die erweiterung verwenden sie den devtools validierungsbefehl, um sicherzustellen, dass ihre erweiterung korrekt konfiguriert ist dart run devtools extensions validate veröffentlichen sie die erweiterung veröffentlichen sie ihre erweiterung auf pub dev , damit andere entwickler sie nutzen können flutter pub publish fazit in diesem tutorial haben sie gelernt, wie sie eine flutter devtools erweiterung erstellen, sie mit back4app für backend dienste integrieren und sie in einer simulierten umgebung testen durch die erweiterung von devtools können sie benutzerdefinierte tools erstellen, die ihre produktivität steigern und neue einblicke in das verhalten ihrer app bieten sobald ihre erweiterung bereit ist, ermöglicht die veröffentlichung auf pub dev , dass andere entwickler von ihrer arbeit profitieren für weitere informationen zur verwendung von flutter mit back4app, schauen sie sich die back4app dokumentation https //www back4app com/docs und die flutter devtools dokumentation https //flutter dev/docs/development/tools/devtools/overview viel spaß beim programmieren!