Comment utiliser Uint8List dans Flutter et le persister dans le backend en utilisant Back4app

12min
Introduction
Dans les systèmes numériques, les fichiers sont souvent représentés comme une séquence d'octets, et Dart fournit un moyen efficace de gérer les données d'octets en utilisant Uint8List. Un Uint8List est une liste de longueur fixe d'entiers non signés de 8 bits, ce qui signifie que chaque nombre varie de 0 à 255. Cette structure est utile pour travailler avec des données binaires, telles que des images ou des fichiers, où l'efficacité de la mémoire est cruciale.
Dans ce tutoriel, nous allons couvrir comment travailler avec Uint8List dans Flutter, convertir des fichiers en listes d'octets, et persister les données dans le backend de Back4app en utilisant le SDK Parse pour Flutter.
Prérequis
Avant de commencer, assurez-vous d'avoir ce qui suit :
Un compte Back4app. Inscrivez-vous pour un compte gratuit sur Back4app.com.
Un environnement de développement Flutter configuré sur votre machine locale. Suivez le guide d'installation de Flutter si vous ne l'avez pas encore configuré.
Connaissances de base en Dart, widgets Flutter, et utilisation de Back4app pour les services backend.
Étape 1 – Configuration de votre backend Back4app
Créer un projet Back4app: Connectez-vous à votre compte Back4app et créez un nouveau projet.
Créer des classes Parse: Pour ce tutoriel, créez une classe Parse nommée FileStorage pour stocker les données binaires :
nom de fichier (String) : Le nom du fichier.
données de fichier (Fichier) : Les données binaires du fichier.
Obtenez vos identifiants Back4app: Accédez aux paramètres de votre projet pour récupérer votre ID d'application et votre clé client, dont vous aurez besoin pour connecter votre application Flutter à Back4app.
Étape 2 – Configuration du projet Flutter
Créer un nouveau projet Flutter: Ouvrez votre terminal ou invite de commande et exécutez :
Bash
flutter create uint8list_example
flutter create uint8list_example
﻿
Ajouter des dépendances: Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
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
﻿
Exécutez flutter pub get pour installer ces dépendances.
Initialiser Parse dans votre application: Dans lib/main.dart, initialisez le 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: 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(),
    );
  }
}
﻿
Remplacez 'YOUR_BACK4APP_APP_ID' et 'YOUR_BACK4APP_CLIENT_KEY' par vos véritables identifiants Back4app.
Étape 3 – Travailler avec Uint8List dans Flutter
Sélection et lecture de fichiers: Utilisez le file_picker package pour sélectionner un fichier depuis l'appareil et le convertir en un 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
  }
}
﻿
Ce code permet à l'utilisateur de sélectionner un fichier, lit le fichier en tant que Uint8List, et affiche le nom du fichier et un bouton pour l'enregistrer.
Étape 4 – Persister le Uint8List dans Back4app
Pour stocker le fichier dans Back4app, nous utilisons l'objet ParseFile, qui nous permet de télécharger des données binaires comme des images ou des documents.
Enregistrer le fichier dans Back4app: Mettre à jour la _saveToBackend méthode pour persister le fichier sélectionné dans 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.'),
      ));
    }
  }
}
﻿
Cette méthode télécharge le fichier en tant que données binaires vers Back4app en utilisant un ParseFile. Si cela réussit, elle affiche un message de confirmation.
Étape 5 – Exécution de l'application
Exécutez votre application en utilisant flutter run. Vous devriez voir un bouton pour choisir un fichier, suivi d'une option pour l'enregistrer dans le backend une fois sélectionné.
Vérifiez les données dans Back4app en vous connectant à votre tableau de bord Back4app et en vérifiant la FileStorage classe. Vous devriez voir le fichier enregistré avec son nom.
Meilleures pratiques pour le stockage de données binaires
Lorsque vous travaillez avec Uint8List et des données binaires, voici quelques meilleures pratiques :
Utilisez : Le ParseFile de Back4app est un moyen efficace de stocker et de récupérer des données binaires telles que des images, des vidéos et des documents.
Évitez de stocker de gros fichiers directement dans les objets Parse: Si vos fichiers sont volumineux, envisagez d'utiliser un service de stockage tel qu'AWS S3 et de stocker l'URL du fichier dans votre objet Parse au lieu du fichier lui-même.
Compression et optimisation: Pour les grandes images ou fichiers, envisagez de compresser le fichier avant de le télécharger pour améliorer les performances.
Conclusion
Dans ce tutoriel, nous avons couvert comment travailler avec Uint8List dans Flutter, convertir des fichiers en listes d'octets, et persister ces données dans Back4app en utilisant le SDK Parse. Uint8List fournit un moyen efficace en mémoire de gérer des données d'octets en Dart, ce qui le rend adapté aux opérations sur les fichiers telles que les téléchargements d'images, le stockage de documents, et plus encore. L'intégration de cela avec Back4app vous permet de stocker et de gérer facilement des données binaires dans le cloud.
Pour plus d'informations, visitez la documentation Flutter et documentation Back4app. Bon codage !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comprendre le matching de motifs dans Flutter en utilisant Back4app en tant que backend
Créer des menus déroulants dans Flutter avec des données backend de Back4app