Di più
Comprendere il pattern matching in Flutter utilizzando il backend di Back4app

10min
Introduzione
Il pattern matching è una funzionalità potente introdotta in Dart 3 che consente agli sviluppatori di identificare ed estrarre facilmente strutture dati specifiche all'interno delle loro applicazioni. Se hai esperienza con linguaggi come Kotlin, Swift o JavaScript, potresti già essere familiare con il pattern matching. Tuttavia, se sei nuovo a questo concetto in Dart, questo tutorial ti aiuterà a sentirti a tuo agio con esso. Esploreremo il pattern matching e come utilizzarlo in un'app Flutter con un esempio pratico che integra Back4app come backend per gestire e memorizzare i dati.
Requisiti
Prima di iniziare, assicurati di avere quanto segue:
Un account Back4app. Registrati per un account gratuito su Back4app.com.
Un ambiente di sviluppo Flutter configurato sul tuo computer locale. Segui la guida all'installazione di Flutter se non l'hai ancora configurato.
Conoscenze di base di Dart, widget Flutter e utilizzo di Back4app per i servizi backend.
Passo 1 – Configurare il tuo backend Back4app
Crea un progetto Back4app: Accedi al tuo account Back4app e crea un nuovo progetto.
Crea classi Parse: Per questo tutorial, crea una classe Parse chiamata UserData per memorizzare le informazioni dell'utente:
username (String): Il nome utente dell'utente.
age (Numero): L'età dell'utente.
preferences (JSON): Un oggetto JSON che memorizza le preferenze dell'utente.
Ottieni le tue credenziali Back4app: Naviga nelle impostazioni del tuo progetto per recuperare il tuo Application ID e Client Key, che ti serviranno per connettere la tua app Flutter a Back4app.
Passo 2 – Configurazione del Progetto Flutter
Crea un Nuovo Progetto Flutter: Apri il tuo terminale o prompt dei comandi e esegui:
Bash
flutter create pattern_matching_example
flutter create pattern_matching_example
﻿
Aggiungi Dipendenze: Apri pubspec.yaml e aggiungi le seguenti dipendenze:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Esegui flutter pub get per installare queste dipendenze.
Inizializza Parse nella tua app: In lib/main.dart, inizializza il SDK di 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(),
    );
  }
}
﻿
Sostituisci 'YOUR_BACK4APP_APP_ID' e 'YOUR_BACK4APP_CLIENT_KEY' con le tue credenziali effettive di Back4app.
Passo 3 – Implementazione del Pattern Matching
Crea il widget PatternMatchingScreen: In lib/main.dart, crea un nuovo widget che dimostra il pattern matching recuperando e elaborando i dati dell'utente:
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)),
    );
  }
}
﻿
Questo codice recupera i dati dell'utente da Back4app, applica il pattern matching per convalidare e destrutturare i dati, e poi visualizza un messaggio personalizzato basato sui dati corrispondenti.
Passo 4 – Eseguire l'app
Esegui la tua app utilizzando flutter run. Dovresti vedere un messaggio sullo schermo basato sui dati recuperati e corrispondenti utilizzando il pattern matching.
Verifica i dati in Back4app accedendo al tuo dashboard di Back4app e controllando la UserData classe. Puoi modificare i dati per vedere come diversi pattern corrispondono e come l'app risponde.
Conclusione
In questo tutorial, abbiamo esplorato il concetto di pattern matching in Dart e come può essere applicato all'interno di un'app Flutter. Integrando Back4app come backend, abbiamo dimostrato un esempio pratico di recupero e elaborazione dei dati utilizzando il pattern matching. Questo approccio ti consente di convalidare e destrutturare i dati in modo efficiente, rendendo le tue app Flutter più robuste e manutenibili.
Per ulteriori informazioni sui pattern di Dart, visita la documentazione di Dart, e per suggerimenti sull'integrazione del backend, dai un'occhiata alla documentazione di Back4app. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Raccolta del feedback degli utenti in Flutter utilizzando il componente Feedback e archiviazione dei dati su Back4app
AVANTI IL PROSSIMO
Come utilizzare Uint8List in Flutter e persisterlo nel backend utilizzando Back4App?