More
Comprendre le matching de motifs dans Flutter en utilisant Back4app en tant que backend
10 min
introduction la correspondance de motifs est une fonctionnalité puissante introduite dans dart 3 qui permet aux développeurs d'identifier et d'extraire facilement des structures de données spécifiques au sein de leurs applications si vous avez de l'expérience avec des langages comme kotlin, swift ou javascript, vous êtes peut être déjà familier avec la correspondance de motifs cependant, si vous êtes nouveau dans ce concept en dart, ce tutoriel vous aidera à vous familiariser avec nous explorerons la correspondance de motifs et comment l'utiliser dans une application flutter avec un exemple pratique qui intègre back4app comme backend pour gérer et stocker des donné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 userdata pour stocker les informations utilisateur nom d'utilisateur (string) le nom d'utilisateur de l'utilisateur âge (number) l'âge de l'utilisateur préférences (json) un objet json stockant les préférences de 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 pattern matching 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 patternmatchingscreen(), ); } } remplacez 'votre back4app app id' et 'votre back4app client key' par vos véritables identifiants back4app étape 3 – mise en œuvre de la correspondance de motifs créer le widget patternmatchingscreen dans lib/main dart , créez un nouveau widget qui démontre la correspondance de motifs en récupérant et en traitant les données utilisateur class patternmatchingscreen extends statefulwidget { @override patternmatchingscreenstate createstate() => patternmatchingscreenstate(); } class patternmatchingscreenstate extends state\<patternmatchingscreen> { string message = 'fetching data '; @override void initstate() { super initstate(); fetchandmatchdata(); } future\<void> fetchandmatchdata() async { final query = querybuilder\<parseobject>(parseobject('userdata')); final response = await query query(); if (response success && response results != null) { for (var result in response results!) { // using pattern matching to destructure and validate data if (result is parseobject) { final userdata = { 'username' result get\<string>('username'), 'age' result get\<int>('age'), 'preferences' result get\<map\<string, dynamic>>('preferences') }; switch (userdata) { case { 'username' string name, 'age' int age when age >= 18, 'preferences' {'theme' string theme} } setstate(() { message = 'welcome, $name! you are $age years old and prefer the $theme theme '; }); break; default setstate(() { message = 'data does not match the required pattern '; }); break; } } } } else { setstate(() { message = 'failed to retrieve data '; }); } } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('pattern matching example')), body center(child text( message)), ); } } ce code récupère les données utilisateur de back4app, applique un appariement de motifs pour valider et déstructurer les données, puis affiche un message personnalisé basé sur les données appariées étape 4 – exécution de l'application exécutez votre application en utilisant flutter run vous devriez voir un message à l'écran basé sur les données récupérées et appariées à l'aide de l'appariement de motifs vérifiez les données dans back4app en vous connectant à votre tableau de bord back4app et en vérifiant la userdata classe vous pouvez ajuster les données pour voir comment différents motifs correspondent et comment l'application réagit conclusion dans ce tutoriel, nous avons exploré le concept d'appariement de motifs en dart et comment il peut être appliqué dans une application flutter en intégrant back4app comme backend, nous avons démontré un exemple pratique de récupération et de traitement des données à l'aide de l'appariement de motifs cette approche vous permet de valider et de déstructurer les données de manière efficace, rendant vos applications flutter plus robustes et maintenables pour plus d'informations sur les motifs dart, visitez la documentation dart https //dart dev , et pour des conseils sur l'intégration backend, consultez la documentation back4app https //www back4app com/docs bon codage!