Mehr
Verstehen von Mustererkennung in Flutter mit dem Back4app-Backend

10min
Einführung
Pattern Matching ist eine leistungsstarke Funktion, die in Dart 3 eingeführt wurde und es Entwicklern ermöglicht, spezifische Datenstrukturen innerhalb ihrer Anwendungen einfach zu identifizieren und zu extrahieren. Wenn Sie Erfahrung mit Sprachen wie Kotlin, Swift oder JavaScript haben, sind Sie möglicherweise bereits mit Pattern Matching vertraut. Wenn Sie jedoch neu in diesem Konzept in Dart sind, wird Ihnen dieses Tutorial helfen, sich damit vertraut zu machen. Wir werden das Pattern Matching erkunden und wie man es in einer Flutter-App mit einem praktischen Beispiel verwendet, das Back4app als Backend integriert, um Daten zu verwalten und zu speichern.
Voraussetzungen
Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:
Ein Back4app-Konto. Melden Sie sich für ein kostenloses Konto an unter Back4app.com.
Eine Flutter-Entwicklungsumgebung, die auf Ihrem lokalen Computer eingerichtet ist. Folgen Sie der Flutter-Installationsanleitung , 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 an und erstellen Sie ein neues Projekt.
Erstellen Sie Parse-Klassen: Erstellen Sie für dieses Tutorial eine Parse-Klasse mit dem Namen UserData , um Benutzerinformationen zu speichern:
benutzername (String): Der Benutzername des Benutzers.
alter (Zahl): Das Alter des Benutzers.
einstellungen (JSON): Ein JSON-Objekt, das die Benutzereinstellungen speichert.
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:
Bash
flutter create pattern_matching_example
flutter create pattern_matching_example
﻿
Abhängigkeiten hinzufügen: Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
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:
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(),
    );
  }
}
﻿
Ersetzen Sie 'YOUR_BACK4APP_APP_ID' und 'YOUR_BACK4APP_CLIENT_KEY' durch Ihre tatsächlichen Back4app-Anmeldeinformationen.
Schritt 3 – Implementierung der Mustererkennung
Erstellen Sie das PatternMatchingScreen-Widget: In lib/main.dart, erstellen Sie ein neues Widget, das die Mustererkennung demonstriert, indem es Benutzerdaten abruft und verarbeitet:
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)),
    );
  }
}
﻿
Dieser Code ruft Benutzerdaten von Back4app ab, wendet Mustererkennung an, um die Daten zu validieren und zu zerlegen, und zeigt dann eine personalisierte Nachricht basierend auf den übereinstimmenden Daten an.
Schritt 4 – Die App ausführen
Führen Sie Ihre App aus mit flutter run. Sie sollten eine Nachricht auf dem Bildschirm sehen, die auf den abgerufenen und mit Mustererkennung übereinstimmenden Daten basiert.
Überprüfen Sie die Daten in Back4app indem Sie sich in Ihr Back4app-Dashboard einloggen und die UserData-Klasse überprüfen. Sie können die Daten anpassen, um zu sehen, wie verschiedene Muster übereinstimmen und wie die App reagiert.
Fazit
In diesem Tutorial haben wir das Konzept der Mustererkennung in Dart untersucht und wie es in einer Flutter-App angewendet werden kann. Durch die Integration von Back4app als Backend haben wir ein praktisches Beispiel für das Abrufen und Verarbeiten von Daten mit Mustererkennung demonstriert. Dieser Ansatz ermöglicht es Ihnen, Daten effizient zu validieren und zu zerlegen, wodurch Ihre Flutter-Apps robuster und wartungsfreundlicher werden.
Für weitere Informationen zu Dart-Mustern besuchen Sie die Dart-Dokumentation, und für Tipps zur Backend-Integration schauen Sie sich die Back4app-Dokumentation. Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Sammeln von Benutzerfeedback in Flutter mit der Feedback-Komponente und Speichern von Daten auf Back4app
ALS NÄCHSTES
Wie man Uint8List in Flutter verwendet und es im Backend mit Back4app speichert