How to Use Uint8List in Flutter and Persist It in the Backend Using Back4app

12min
Introduction
In digital systems, files are often represented as a sequence of bytes, and Dart provides an efficient way to handle byte data using Uint8List. A Uint8List is a fixed-length list of unsigned 8-bit integers, meaning each number ranges from 0 to 255. This structure is useful for working with binary data, such as images or files, where memory efficiency is crucial.
In this tutorial, we'll cover how to work with Uint8List in Flutter, convert files into byte lists, and persist the data in Back4app's backend using the Parse SDK for Flutter.
Prerequisites
Before starting, ensure you have the following:
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 using Back4app for backend services.
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 FileStorage to store the binary data:
filename (String): The name of the file.
fileData (File): The binary data of the file.
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 the Flutter Project
Create a New Flutter Project: Open your terminal or command prompt and run:
Bash
flutter create uint8list_example
flutter create uint8list_example
﻿
Add Dependencies: Open pubspec.yaml and add the following dependencies:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: latest_version
﻿
Run flutter pub get to install these dependencies.
Initialize Parse in Your App: In lib/main.dart, initialize the Parse SDK:
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: Uint8ListExample(),
    );
  }
}
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: Uint8ListExample(),
    );
  }
}
﻿
Replace 'YOUR_BACK4APP_APP_ID' and 'YOUR_BACK4APP_CLIENT_KEY' with your actual Back4app credentials.
Step 3 – Working with Uint8List in Flutter
File Selection and Reading: Use the file_picker package to select a file from the device and convert it into a Uint8List:
Dart
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
﻿
This code lets the user select a file, reads the file as a Uint8List, and displays the file name and a button to save it.
Step 4 – Persisting the Uint8List in Back4app
To store the file in Back4app, we use the ParseFile object, which allows us to upload binary data like images or documents.
Saving the File to Back4app: Update the _saveToBackend method to persist the selected file in Back4app:
Dart
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
﻿
This method uploads the file as binary data to Back4app using a ParseFile. If successful, it displays a confirmation message.
Step 5 – Running the App
Run your app using flutter run. You should see a button to pick a file, followed by an option to save it to the backend once selected.
Verify the data in Back4app by logging into your Back4app dashboard and checking the FileStorage class. You should see the file saved along with its name.
Best Practices for Storing Binary Data
When working with Uint8List and binary data, here are some best practices:
Use : Back4app's ParseFile is an efficient way to store and retrieve binary data such as images, videos, and documents.
Avoid Storing Large Files Directly in Parse Objects: If your files are large, consider using a storage service such as AWS S3 and store the file URL in your Parse object instead of the file itself.
Compression and Optimization: For large images or files, consider compressing the file before uploading it to improve performance.
Conclusion
In this tutorial, we covered how to work with Uint8List in Flutter, convert files into byte lists, and persist this data in Back4app using the Parse SDK. Uint8List provides a memory-efficient way to handle byte data in Dart, making it suitable for file operations like image uploads, document storage, and more. Integrating this with Back4app allows you to easily store and manage binary data in the cloud.
For more information, visit the Flutter documentation and Back4app documentation. Happy coding!
Updated 05 Sep 2024
Did this page help you?
Understanding Pattern Matching in Flutter Using Back4app Backend
Building Dropdown Menus in Flutter with Backend Data from Back4app