Wie man segmentierte Schaltflächen in Flutter mit Back4app verwendet

einführung segmentierte schaltflächen sind eine ui komponente, die in material 3 eingeführt wurde und es benutzern ermöglicht, aus zwei bis fünf optionen auszuwählen sie sind besonders nützlich, wenn sie eine reihe von exklusiven oder nicht exklusiven auswahlmöglichkeiten auf eine saubere, organisierte weise anbieten möchten in diesem tutorial werden wir erkunden, wie man segmentierte schaltflächen in einer flutter app verwendet, wobei wir back4app als backend nutzen, um die ausgewählten optionen zu speichern und zu verwalten voraussetzungen stellen sie vor dem start sicher, dass sie folgendes haben ein back4app konto melden sie sich für ein kostenloses konto an unter back4app com https //www back4app com 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 back4app für backend dienste 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 erstellen sie für dieses tutorial eine parse klasse mit dem namen userpreferences , um die ausgewählten optionen aus den segmentierten schaltflächen zu speichern benutzername (string) der name des benutzers ausgewählteoption (string) die vom benutzer ausgewählte option 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 – einrichten des flutter projekts erstellen sie ein neues flutter projekt öffnen sie ihr terminal oder die eingabeaufforderung und führen sie aus flutter create segmented button example abhängigkeiten hinzufügen öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten hinzu dependencies flutter sdk flutter parse server sdk flutter latest version führen sie flutter pub get aus, um diese abhängigkeiten zu installieren initialisieren sie parse in ihrer app in lib/main dart , initialisieren sie das parse sdk import 'package\ flutter/material dart'; 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(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home preferencescreen(), ); } } ersetzen sie 'your back4app app id' und 'your back4app client key' durch ihre tatsächlichen back4app anmeldeinformationen schritt 3 – implementierung von segmentierten schaltflächen erstellen sie das preferencescreen widget in lib/main dart , fügen sie ein neues widget hinzu, um die segmentierten schaltflächen anzuzeigen und zu verwalten class preferencescreen extends statefulwidget { @override preferencescreenstate createstate() => preferencescreenstate(); } class preferencescreenstate extends state\<preferencescreen> { string? selectedoption; final list\<buttonsegment\<string>> options = \[ buttonsegment(value 'option 1', label text('option 1')), buttonsegment(value 'option 2', label text('option 2')), buttonsegment(value 'option 3', label text('option 3')), ]; @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('user preferences')), body padding( padding const edgeinsets all(16 0), child column( mainaxisalignment mainaxisalignment center, children \[ segmentedbutton\<string>( segments options, selected selectedoption == null ? {} { selectedoption!}, onselectionchanged (newselection) { setstate(() { selectedoption = newselection first; }); savepreference( selectedoption!); }, ), sizedbox(height 20), if ( selectedoption != null) text('selected $ selectedoption', style textstyle(fontsize 16)), ], ), ), ); } future\<void> savepreference(string selectedoption) async { final userpreference = parseobject('userpreferences') set('username', 'test user') // this would normally come from user data set('selectedoption', selectedoption); await userpreference save(); } } dieser code definiert eine einfache benutzeroberfläche mit einem segmentierten button, der es den benutzern ermöglicht, aus drei optionen zu wählen die ausgewählte option wird in back4app gespeichert, wann immer sich die auswahl ändert schritt 4 – die app ausführen führen sie ihre app aus mit flutter run sie sollten die segmentierten buttons auf dem bildschirm sehen die auswahl einer option aktualisiert den status und speichert die auswahl in back4app überprüfen sie die daten in back4app indem sie sich in ihr back4app dashboard einloggen und die userpreferences klasse überprüfen sie sollten einträge sehen, die ihren auswahlen aus der flutter app entsprechen fazit in diesem tutorial haben wir untersucht, wie man segmentierte buttons in flutter implementiert und verwendet wir haben auch demonstriert, wie man flutter mit back4app integriert, um benutzereinstellungen zu speichern segmentierte buttons bieten eine saubere und intuitive möglichkeit, den benutzern mehrere optionen zu präsentieren, und in kombination mit einem leistungsstarken backend wie back4app können sie das benutzererlebnis ihrer app erheblich verbessern für weitere informationen zu flutter widgets, schauen sie sich die flutter dokumentation https //flutter dev/docs , und für tipps zur backend integration besuchen sie die back4app dokumentation https //www back4app com/docs viel spaß beim programmieren!