More
Comment utiliser Uint8List dans Flutter et le persister dans le backend en utilisant Back4app
12 min
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 https //www back4app com un environnement de développement flutter configuré sur votre machine locale suivez le guide d'installation de flutter https //flutter dev/docs/get started/install 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 https //www back4app com/ 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 flutter create uint8list example ajouter des dépendances ouvrez pubspec yaml et ajoutez les dépendances suivantes 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 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 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 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 https //flutter dev/docs et documentation back4app https //www back4app com/docs bon codage !