Comprendre le matching de motifs dans Flutter en utilisant Back4app en tant que backend

10min
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.
Un environnement de développement Flutter configuré sur votre machine locale. Suivez le guide d'installation de Flutter 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 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 :
Bash
flutter create pattern_matching_example
flutter create pattern_matching_example
﻿
Ajouter des dépendances: Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
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:
Dart
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(),
    );
  }
}
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 :
Dart
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)),
    );
  }
}
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, et pour des conseils sur l'intégration backend, consultez la documentation Back4app. Bon codage!
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Collecte de commentaires des utilisateurs dans Flutter à l'aide du composant Feedback et stockage des données sur Back4app
Comment utiliser Uint8List dans Flutter et le persister dans le backend en utilisant Back4app