How to Use Isolates in Flutter with Back4app to Handle Heavy Data Processing

13min
Introduction
Flutter is a powerful framework for building cross-platform applications, but like many mobile frameworks, it runs all code on a single thread by default. This thread, known as the UI thread, is responsible for rendering your app's UI. When heavy tasks like data processing or file handling occur on the UI thread, they can cause the app to lag or "jank," leading to a poor user experience.
To address this, Dart provides a feature called Isolates. Isolates allow you to run expensive computations on a separate thread, keeping your UI responsive. In this tutorial, we’ll explore how to use isolates in a Flutter application to handle heavy data processing tasks, such as deserializing large JSON files fetched from a Back4app backend.
Prerequisites
To complete this tutorial, you will need:
A Back4app account. Sign up for a free account at Back4app.com.
A Flutter development environment set up on your local machine. Follow the Flutter installation guide if you haven't set it up yet.
Basic knowledge of Dart, Flutter widgets, and asynchronous programming.
Step 1 – Setting Up Your Back4app Backend
Create a Back4app Project: Log in to your Back4app account and create a new project.
Create Parse Classes: For this tutorial, create a Parse Class named Record that stores large amounts of data:
title (String): The title of the record.
description (String): A description of the record.
metadata (JSON): Large metadata content associated with the record.
Populate the Class with Sample Data: Add several records to the Record class with large JSON objects in the metadata field. This will simulate the kind of data processing that could cause jank in a real app.
Get Your Back4app Credentials: Navigate to your project settings to retrieve your Application ID and Client Key, which you’ll need to connect your Flutter app to Back4app.
Step 2 – Setting Up Your Flutter Project
Create a New Flutter Project: Open your terminal or command prompt and run:
Bash
flutter create isolate_example
flutter create isolate_example
﻿
Add Dependencies: Open pubspec.yaml and add the following dependencies:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Run flutter pub get to install these dependencies.
Initialize Parse in Your App: In lib/main.dart, import the Parse SDK and initialize it in the main function:
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(),
    );
  }
}
﻿
Replace 'YOUR_BACK4APP_APP_ID' and 'YOUR_BACK4APP_CLIENT_KEY' with your actual Back4app credentials.
Step 3 – Fetching Data from Back4app
Create the RecordScreen Widget: In lib/main.dart, create a new screen that fetches data from 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'),
                );
              },
            ),
    );
  }
}
﻿
This code fetches all records from the Record class in Back4app and displays them in a list.
Step 4 – Offloading Heavy Data Processing to an Isolate
Using Isolate to Deserialize Large JSON: Suppose the metadata field in each record contains a large JSON object that needs to be deserialized. To avoid blocking the UI thread, we'll use an isolate to perform this task.
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')}');
}
﻿
Integrate Isolate Processing into the App: Update the RecordScreen widget to process each record's metadata using the isolate:
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'),
                );
              },
            ),
    );
  }
}
﻿
This implementation fetches records from Back4app, offloads the heavy JSON deserialization task to an isolate, and updates the UI once processing is complete.
Step 5 – Testing and Running Your App
Run your app using flutter run. You should see a list of records fetched from Back4app. The metadata for each record is processed on a separate isolate, ensuring the UI remains smooth and responsive.
Verify performance by testing with large JSON files in the metadata field. Observe how the use of isolates prevents jank and keeps the UI responsive.
Conclusion
In this tutorial, you learned how to use isolates in Flutter to handle heavy data processing tasks, such as deserializing large JSON files. By offloading these tasks to an isolate, you keep the UI thread free to handle rendering, resulting in a smoother and more responsive app. Integrating Back4app as the backend allows you to efficiently manage and retrieve data, while Dart’s isolate model ensures that your app remains performant even when handling complex operations.
For more information on using Flutter with Back4app, check out the Back4app documentation and Flutter documentation. Happy coding!
Updated 27 Aug 2024
Did this page help you?
Developing Real-Time Javascript Applications
Building and Using a Flutter DevTools Extension with Back4app