Comment utiliser des boutons segmentés dans Flutter avec Back4app

introduction les boutons segmentés sont un composant ui introduit dans material 3 qui permet aux utilisateurs de sélectionner entre deux et cinq options ils sont particulièrement utiles lorsque vous souhaitez offrir un ensemble de choix exclusifs ou non exclusifs de manière claire et organisée dans ce tutoriel, nous allons explorer comment utiliser les boutons segmentés dans une application flutter, en utilisant back4app comme backend pour stocker et gérer les options sélectionnées prérequis avant de commencer, assurez vous d'avoir ce qui suit un compte back4app inscrivez vous pour un compte gratuit sur back4app com https //www back4app com un environnement de développement flutter configuré sur votre machine locale suivez le guide d'installation de flutter https //flutter dev/docs/get started/install si vous ne l'avez pas encore configuré connaissances de base en dart, widgets flutter et utilisation de back4app pour les services backend étape 1 – configuration de votre backend back4app créer un projet back4app connectez vous à votre compte back4app https //www back4app com/ et créez un nouveau projet créer des classes parse pour ce tutoriel, créez une classe parse nommée userpreferences pour stocker les options sélectionnées des boutons segmentés nom d'utilisateur (string) le nom de l'utilisateur optionsélectionnée (string) l'option sélectionnée par l'utilisateur obtenez vos identifiants back4app accédez aux paramètres de votre projet pour récupérer votre id d'application et votre clé client, dont vous aurez besoin pour connecter votre application flutter à back4app étape 2 – configuration du projet flutter créer un nouveau projet flutter ouvrez votre terminal ou invite de commande et exécutez flutter create segmented button example ajouter des dépendances ouvrez pubspec yaml et ajoutez les dépendances suivantes dependencies flutter sdk flutter parse server sdk flutter latest version exécutez flutter pub get pour installer ces dépendances initialiser parse dans votre application dans lib/main dart , initialisez le sdk parse 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(), ); } } remplacez 'your back4app app id' et 'your back4app client key' par vos véritables identifiants back4app étape 3 – implémentation des boutons segmentés créer le widget preferencescreen dans lib/main dart , ajoutez un nouveau widget pour afficher et gérer les boutons segmentés 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(); } } ce code définit une interface utilisateur simple avec un bouton segmenté permettant aux utilisateurs de choisir parmi trois options l'option sélectionnée est stockée dans back4app chaque fois que la sélection change étape 4 – exécution de l'application exécutez votre application en utilisant flutter run vous devriez voir les boutons segmentés affichés à l'écran sélectionner une option mettra à jour l'état et stockera la sélection dans back4app vérifiez les données dans back4app en vous connectant à votre tableau de bord back4app et en vérifiant la userpreferences classe vous devriez voir des entrées correspondant à vos sélections de l'application flutter conclusion dans ce tutoriel, nous avons exploré comment implémenter et utiliser des boutons segmentés dans flutter nous avons également démontré comment intégrer flutter avec back4app pour stocker les préférences des utilisateurs les boutons segmentés offrent un moyen clair et intuitif de présenter plusieurs options aux utilisateurs, et lorsqu'ils sont combinés avec un backend puissant comme back4app, ils peuvent considérablement améliorer l'expérience utilisateur de votre application pour plus d'informations sur les widgets flutter, consultez la documentation flutter https //flutter dev/docs , et pour des conseils sur l'intégration backend, visitez la documentation back4app https //www back4app com/docs bon codage!