Больше
Понимание сопоставления шаблонов в Flutter с использованием Back4app как бэкенда

10min
Введение
Сопоставление шаблонов — это мощная функция, введенная в Dart 3, которая позволяет разработчикам легко идентифицировать и извлекать конкретные структуры данных в своих приложениях. Если у вас есть опыт работы с такими языками, как Kotlin, Swift или JavaScript, вы, возможно, уже знакомы с сопоставлением шаблонов. Однако, если вы новичок в этой концепции в Dart, этот учебник поможет вам освоиться с ней. Мы исследуем сопоставление шаблонов и то, как использовать его в приложении Flutter с практическим примером, который интегрирует Back4app в качестве бэкенда для управления и хранения данных.
Предварительные требования
Перед тем как начать, убедитесь, что у вас есть следующее:
Учетная запись Back4app. Зарегистрируйтесь для получения бесплатной учетной записи на Back4app.com.
Настроенная среда разработки Flutter на вашем локальном компьютере. Следуйте руководству по установке Flutter если вы еще не настроили ее.
Базовые знания Dart, виджетов Flutter и использования Back4app для бэкенд-сервисов.
Шаг 1 – Настройка вашего бэкенда Back4app
Создайте проект Back4app: Войдите в свою учетную запись Back4app и создайте новый проект.
Создайте классы Parse: Для этого учебника создайте класс Parse с именем UserData для хранения информации о пользователе:
имя пользователя (String): Имя пользователя.
возраст (Number): Возраст пользователя.
предпочтения (JSON): JSON-объект, хранящий предпочтения пользователя.
Получите свои учетные данные Back4app: Перейдите в настройки вашего проекта, чтобы получить ваш идентификатор приложения и ключ клиента, которые вам понадобятся для подключения вашего приложения Flutter к Back4app.
Шаг 2 – Настройка проекта Flutter
Создайте новый проект Flutter: Откройте терминал или командную строку и выполните:
Bash
flutter create pattern_matching_example
flutter create pattern_matching_example
﻿
Добавьте зависимости: Откройте pubspec.yaml и добавьте следующие зависимости:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Запустите flutter pub get для установки этих зависимостей.
Инициализируйте Parse в вашем приложении: В lib/main.dart, инициализируйте 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(),
    );
  }
}
﻿
Замените 'YOUR_BACK4APP_APP_ID' и 'YOUR_BACK4APP_CLIENT_KEY' на ваши реальные учетные данные Back4app.
Шаг 3 – Реализация сопоставления шаблонов
Создайте виджет PatternMatchingScreen: В lib/main.dart, создайте новый виджет, который демонстрирует сопоставление шаблонов, извлекая и обрабатывая данные пользователя:
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)),
    );
  }
}
﻿
Этот код извлекает данные пользователя из Back4app, применяет сопоставление шаблонов для проверки и деструктуризации данных, а затем отображает персонализированное сообщение на основе сопоставленных данных.
Шаг 4 – Запуск приложения
Запустите ваше приложение с помощью flutter run. Вы должны увидеть сообщение на экране на основе извлеченных и сопоставленных данных с использованием сопоставления шаблонов.
Проверьте данные в Back4app войдя в свою панель управления Back4app и проверив класс UserData. Вы можете настроить данные, чтобы увидеть, как разные шаблоны сопоставляются и как приложение реагирует.
Заключение
В этом учебном пособии мы исследовали концепцию сопоставления шаблонов в Dart и то, как ее можно применить в приложении Flutter. Интегрировав Back4app в качестве бэкенда, мы продемонстрировали практический пример извлечения и обработки данных с использованием сопоставления шаблонов. Этот подход позволяет эффективно проверять и деструктурировать данные, делая ваши приложения Flutter более надежными и удобными для обслуживания.
Для получения дополнительной информации о шаблонах Dart посетите документацию Dart, а для советов по интеграции с бэкендом ознакомьтесь с документацией Back4app. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Сбор отзывов пользователей в Flutter с использованием компонента обратной связи и хранения данных на Back4app
Как использовать Uint8List в Flutter и сохранять его на сервере с помощью Back4app