Wie man Isolate in Flutter mit Back4app verwendet, um umfangreiche Datenverarbeitung zu behandeln

13min
Einführung
Flutter ist ein leistungsstarkes Framework zum Erstellen plattformübergreifender Anwendungen, aber wie viele mobile Frameworks führt es standardmäßig gesamten Code in einem einzigen Thread aus. Dieser Thread, bekannt als der UI-Thread, ist verantwortlich für das Rendern der Benutzeroberfläche Ihrer App. Wenn schwere Aufgaben wie Datenverarbeitung oder Dateiverwaltung im UI-Thread auftreten, kann dies dazu führen, dass die App verzögert oder "ruckelt", was zu einer schlechten Benutzererfahrung führt.
Um dies zu beheben, bietet Dart eine Funktion namens Isolates. Isolates ermöglichen es Ihnen, rechenintensive Berechnungen in einem separaten Thread auszuführen, wodurch Ihre Benutzeroberfläche reaktionsfähig bleibt. In diesem Tutorial werden wir erkunden, wie man Isolates in einer Flutter-Anwendung verwendet, um schwere Datenverarbeitungsaufgaben zu bewältigen, wie das Deserialisieren großer JSON-Dateien, die von einem Back4app-Backend abgerufen werden.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
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 asynchroner Programmierung.
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 Record , die große Datenmengen speichert:
titel (String): Der Titel des Datensatzes.
beschreibung (String): Eine Beschreibung des Datensatzes.
metadaten (JSON): Große Metadateninhalte, die mit dem Datensatz verbunden sind.
Füllen Sie die Klasse mit Beispieldaten: Fügen Sie mehrere Datensätze zur Record-Klasse mit großen JSON-Objekten im metadaten-Feld hinzu. Dies simuliert die Art der Datenverarbeitung, die in einer echten App zu Ruckeln führen könnte.
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 Ihres Flutter-Projekts
Erstellen Sie ein neues Flutter-Projekt: Öffnen Sie Ihr Terminal oder die Eingabeaufforderung und führen Sie aus:
Bash
flutter create isolate_example
flutter create isolate_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, importieren Sie das Parse SDK und initialisieren Sie es in der main-Funktion:
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(),
    );
  }
}
﻿
Ersetzen Sie 'YOUR_BACK4APP_APP_ID' und 'YOUR_BACK4APP_CLIENT_KEY' durch Ihre tatsächlichen Back4app-Anmeldeinformationen.
Schritt 3 – Daten von Back4app abrufen
Erstellen Sie das RecordScreen-Widget: In lib/main.dart, erstellen Sie einen neuen Bildschirm, der Daten von Back4app abruft:
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'),
                );
              },
            ),
    );
  }
}
﻿
Dieser Code ruft alle Datensätze aus der Record-Klasse in Back4app ab und zeigt sie in einer Liste an.
Schritt 4 – Verarbeitung großer Datenmengen an ein Isolate auslagern
Verwendung von Isolate zur Deserialisierung großer JSON-Daten: Angenommen, das metadata-Feld in jedem Datensatz enthält ein großes JSON-Objekt, das deserialisiert werden muss. Um zu vermeiden, dass der UI-Thread blockiert wird, verwenden wir ein Isolate, um diese Aufgabe auszuführen.
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')}');
}
﻿
Dieser Code ruft alle Datensätze aus der Record-Klasse in Back4app ab und zeigt sie in einer Liste an.
Integrieren Sie die Isolate-Verarbeitung in die App: Aktualisieren Sie das RecordScreen-Widget, um die Metadaten jedes Datensatzes mit dem Isolate zu verarbeiten:
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'),
                );
              },
            ),
    );
  }
}
﻿
Diese Implementierung ruft Datensätze von Back4app ab, lagert die schwere JSON-Deseerialisierungsaufgabe an ein Isolate aus und aktualisiert die Benutzeroberfläche, sobald die Verarbeitung abgeschlossen ist.
Schritt 5 – Testen und Ausführen Ihrer App
Führen Sie Ihre App aus mit flutter run. Sie sollten eine Liste von Datensätzen sehen, die von Back4app abgerufen wurden. Die Metadaten für jeden Datensatz werden in einem separaten Isolat verarbeitet, um sicherzustellen, dass die Benutzeroberfläche reibungslos und reaktionsschnell bleibt.
Überprüfen Sie die Leistung durch Tests mit großen JSON-Dateien im Metadatenfeld. Beobachten Sie, wie die Verwendung von Isolaten Ruckler verhindert und die Benutzeroberfläche reaktionsschnell hält.
Fazit
In diesem Tutorial haben Sie gelernt, wie Sie Isolate in Flutter verwenden, um schwere Datenverarbeitungsaufgaben zu bewältigen, wie das Deserialisieren großer JSON-Dateien. Indem Sie diese Aufgaben an ein Isolat auslagern, halten Sie den UI-Thread frei, um das Rendering zu übernehmen, was zu einer reibungsloseren und reaktionsschnelleren App führt. Die Integration von Back4app als Backend ermöglicht es Ihnen, Daten effizient zu verwalten und abzurufen, während das Isolat-Modell von Dart sicherstellt, dass Ihre App auch bei der Verarbeitung komplexer Operationen leistungsfähig bleibt.
Für weitere Informationen zur Verwendung von Flutter mit Back4app, schauen Sie sich die Back4app-Dokumentation und Flutter-Dokumentation. Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Entwicklung von Echtzeit-Javascript-Anwendungen
ALS NÄCHSTES
Erstellen und Verwenden einer Flutter DevTools-Erweiterung mit Back4app