Больше
Как использовать изоляты в Flutter с Back4app для обработки объемных данных

13min
Введение
Flutter — это мощный фреймворк для создания кроссплатформенных приложений, но, как и многие мобильные фреймворки, он по умолчанию выполняет весь код в одном потоке. Этот поток, известный как поток пользовательского интерфейса, отвечает за отображение пользовательского интерфейса вашего приложения. Когда тяжелые задачи, такие как обработка данных или работа с файлами, происходят в потоке пользовательского интерфейса, это может привести к задержкам или "подтормаживанию" приложения, что негативно сказывается на пользовательском опыте.
Чтобы решить эту проблему, Dart предоставляет функцию под названием Isolates. Isolates позволяют выполнять ресурсоемкие вычисления в отдельном потоке, сохраняя отзывчивость вашего пользовательского интерфейса. В этом учебном пособии мы рассмотрим, как использовать isolates в приложении Flutter для обработки тяжелых задач по обработке данных, таких как десериализация больших JSON-файлов, полученных из бэкенда Back4app.
Предварительные требования
Чтобы завершить этот учебник, вам потребуется:
Учетная запись Back4app. Зарегистрируйтесь для получения бесплатной учетной записи на Back4app.com.
Настроенная среда разработки Flutter на вашем локальном компьютере. Следуйте руководству по установке Flutter если вы еще не настроили ее.
Базовые знания Dart, виджетов Flutter и асинхронного программирования.
Шаг 1 – Настройка вашего бэкенда Back4app
Создайте проект Back4app: Войдите в свою учетную запись Back4app и создайте новый проект.
Создайте классы Parse: Для этого учебника создайте класс Parse с именем Record для хранения больших объемов данных:
title (String): Заголовок записи.
description (String): Описание записи.
metadata (JSON): Большое содержимое метаданных, связанное с записью.
Заполните класс образцовыми данными: Добавьте несколько записей в класс Record с большими JSON-объектами в поле metadata. Это смоделирует обработку данных, которая может вызвать задержки в реальном приложении.
Получите свои учетные данные Back4app: Перейдите в настройки вашего проекта, чтобы получить ваш идентификатор приложения и ключ клиента, которые вам понадобятся для подключения вашего приложения Flutter к Back4app.
Шаг 2 – Настройка вашего проекта Flutter
Создайте новый проект Flutter: Откройте ваш терминал или командную строку и выполните:
Bash
flutter create isolate_example
flutter create isolate_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 и инициализируйте его в функции main:
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: RecordScreen(),
    );
  }
}
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: RecordScreen(),
    );
  }
}
﻿
Замените 'YOUR_BACK4APP_APP_ID' и 'YOUR_BACK4APP_CLIENT_KEY' на ваши фактические учетные данные Back4app.
Шаг 3 – Получение данных из Back4app
Создайте виджет RecordScreen: В lib/main.dart, создайте новый экран, который получает данные из Back4app:
Dart
class RecordScreen extends StatefulWidget {
  @override
  _RecordScreenState createState() => _RecordScreenState();
}

class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchRecords();
  }

  Future<void> fetchRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        records = response.results as List<ParseObject>;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
class RecordScreen extends StatefulWidget {
  @override
  _RecordScreenState createState() => _RecordScreenState();
}

class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchRecords();
  }

  Future<void> fetchRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        records = response.results as List<ParseObject>;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
﻿
Этот код получает все записи из класса Record в Back4app и отображает их в списке.
Шаг 4 – Перенос тяжелой обработки данных в изолят
Использование изолята для десериализации большого JSON: Предположим, что поле metadata в каждой записи содержит большой объект JSON, который необходимо десериализовать. Чтобы избежать блокировки потока пользовательского интерфейса, мы будем использовать изолят для выполнения этой задачи.
Dart
import 'dart:isolate';
import 'dart:convert';

Future<Map<String, dynamic>> deserializeJsonInIsolate(String jsonString) async {
  // Spawning an isolate to perform JSON decoding
  final result = await Isolate.run(() {
    return jsonDecode(jsonString) as Map<String, dynamic>;
  });
  return result;
}

Future<void> processRecord(ParseObject record) async {
  String metadata = record.get<String>('metadata') ?? '{}';

  // Offload JSON deserialization to an isolate
  Map<String, dynamic> decodedData = await deserializeJsonInIsolate(metadata);

  // Do something with the decoded data
  print('Processed metadata for ${record.get<String>('title')}');
}
import 'dart:isolate';
import 'dart:convert';

Future<Map<String, dynamic>> deserializeJsonInIsolate(String jsonString) async {
  // Spawning an isolate to perform JSON decoding
  final result = await Isolate.run(() {
    return jsonDecode(jsonString) as Map<String, dynamic>;
  });
  return result;
}

Future<void> processRecord(ParseObject record) async {
  String metadata = record.get<String>('metadata') ?? '{}';

  // Offload JSON deserialization to an isolate
  Map<String, dynamic> decodedData = await deserializeJsonInIsolate(metadata);

  // Do something with the decoded data
  print('Processed metadata for ${record.get<String>('title')}');
}
﻿
Интегрировать изолированную обработку в приложение: Обновите RecordScreen виджет, чтобы обрабатывать метаданные каждой записи с помощью изолята:
Dart
class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchAndProcessRecords();
  }

  Future<void> fetchAndProcessRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      List<ParseObject> fetchedRecords = response.results as List<ParseObject>;

      // Process each record's metadata using an isolate
      for (var record in fetchedRecords) {
        await processRecord(record);
      }

      setState(() {
        records = fetchedRecords;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchAndProcessRecords();
  }

  Future<void> fetchAndProcessRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      List<ParseObject> fetchedRecords = response.results as List<ParseObject>;

      // Process each record's metadata using an isolate
      for (var record in fetchedRecords) {
        await processRecord(record);
      }

      setState(() {
        records = fetchedRecords;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
﻿
Эта реализация извлекает записи из Back4app, переносит тяжелую задачу десериализации JSON в изолят и обновляет пользовательский интерфейс после завершения обработки.
Шаг 5 – Тестирование и запуск вашего приложения
Запустите ваше приложение с помощью flutter run. Вы должны увидеть список записей, полученных из Back4app. Метаданные для каждой записи обрабатываются в отдельном изоляте, что обеспечивает плавность и отзывчивость интерфейса.
Проверьте производительность с помощью тестирования больших JSON-файлов в поле метаданных. Наблюдайте, как использование изолятов предотвращает заикания и сохраняет отзывчивость интерфейса.
Заключение
В этом учебном пособии вы узнали, как использовать изоляторы в Flutter для обработки тяжелых задач по обработке данных, таких как десериализация больших JSON-файлов. Перенос этих задач в изолят позволяет вам оставить поток интерфейса свободным для обработки рендеринга, что приводит к более плавному и отзывчивому приложению. Интеграция Back4app в качестве бэкенда позволяет эффективно управлять и извлекать данные, в то время как модель изолятов Dart гарантирует, что ваше приложение остается производительным даже при выполнении сложных операций.
Для получения дополнительной информации о использовании Flutter с Back4app, ознакомьтесь с документацией Back4app и документацией Flutter. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Разработка приложений на JavaScript в реальном времени
Создание и использование расширения Flutter DevTools с Back4app