More
Cómo usar Uint8List en Flutter y persistirlo en el backend utilizando Back4app
12 min
introducción en los sistemas digitales, los archivos a menudo se representan como una secuencia de bytes, y dart proporciona una manera eficiente de manejar datos de bytes usando uint8list un uint8list es una lista de longitud fija de enteros sin signo de 8 bits, lo que significa que cada número varía de 0 a 255 esta estructura es útil para trabajar con datos binarios, como imágenes o archivos, donde la eficiencia de la memoria es crucial en este tutorial, cubriremos cómo trabajar con uint8list en flutter, convertir archivos en listas de bytes y persistir los datos en el backend de back4app usando el sdk de parse para flutter requisitos previos antes de comenzar, asegúrate de tener lo siguiente una cuenta de back4app regístrate para obtener una cuenta gratuita en back4app com https //www back4app com un entorno de desarrollo de flutter configurado en tu máquina local sigue la guía de instalación de flutter https //flutter dev/docs/get started/install si aún no lo has configurado conocimientos básicos de dart, widgets de flutter y uso de back4app para servicios de backend paso 1 – configurando tu backend de back4app crea un proyecto de back4app inicia sesión en tu cuenta de back4app https //www back4app com/ y crea un nuevo proyecto crea clases de parse para este tutorial, crea una clase de parse llamada filestorage para almacenar los datos binarios nombre de archivo (string) el nombre del archivo datos del archivo (file) los datos binarios del archivo obtén tus credenciales de back4app navega a la configuración de tu proyecto para recuperar tu id de aplicación y clave de cliente, que necesitarás para conectar tu aplicación flutter a back4app paso 2 – configurando el proyecto de flutter crear un nuevo proyecto de flutter abre tu terminal o símbolo del sistema y ejecuta flutter create uint8list example agregar dependencias abre pubspec yaml y agrega las siguientes dependencias dependencies flutter sdk flutter parse server sdk flutter latest version file picker latest version path provider latest version ejecuta flutter pub get para instalar estas dependencias inicializar parse en tu aplicación en lib/main dart , inicializa el sdk de 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(), ); } } reemplaza 'your back4app app id' y 'your back4app client key' con tus credenciales reales de back4app paso 3 – trabajando con uint8list en flutter selección y lectura de archivos usa el file picker paquete para seleccionar un archivo del dispositivo y convertirlo 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 } } este código permite al usuario seleccionar un archivo, lee el archivo como un uint8list , y muestra el nombre del archivo y un botón para guardarlo paso 4 – persistiendo el uint8list en back4app para almacenar el archivo en back4app, usamos el parsefile objeto, que nos permite subir datos binarios como imágenes o documentos guardar el archivo en back4app actualiza el savetobackend método para persistir el archivo seleccionado en 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 '), )); } } } este método sube el archivo como datos binarios a back4app usando un parsefile si tiene éxito, muestra un mensaje de confirmación paso 5 – ejecutando la aplicación ejecuta tu aplicación usando flutter run deberías ver un botón para seleccionar un archivo, seguido de una opción para guardarlo en el backend una vez seleccionado verifica los datos en back4app iniciando sesión en tu panel de control de back4app y revisando la filestorage clase deberías ver el archivo guardado junto con su nombre mejores prácticas para almacenar datos binarios al trabajar con uint8list y datos binarios, aquí hay algunas mejores prácticas usa el parsefile de back4app es una forma eficiente de almacenar y recuperar datos binarios como imágenes, videos y documentos evita almacenar archivos grandes directamente en objetos parse si tus archivos son grandes, considera usar un servicio de almacenamiento como aws s3 y almacenar la url del archivo en tu objeto parse en lugar del archivo en sí compresión y optimización para imágenes o archivos grandes, considera comprimir el archivo antes de subirlo para mejorar el rendimiento conclusión en este tutorial, cubrimos cómo trabajar con uint8list en flutter, convertir archivos en listas de bytes y persistir estos datos en back4app usando el sdk de parse uint8list proporciona una forma eficiente en memoria de manejar datos de bytes en dart, lo que lo hace adecuado para operaciones de archivos como cargas de imágenes, almacenamiento de documentos y más integrar esto con back4app te permite almacenar y gestionar fácilmente datos binarios en la nube para más información, visita la documentación de flutter https //flutter dev/docs y documentación de back4app https //www back4app com/docs ¡feliz codificación!