More
Como usar Uint8List no Flutter e persistir no backend usando Back4app
12 min
introdução em sistemas digitais, os arquivos são frequentemente representados como uma sequência de bytes, e dart fornece uma maneira eficiente de lidar com dados de bytes usando uint8list um uint8list é uma lista de comprimento fixo de inteiros não assinados de 8 bits, o que significa que cada número varia de 0 a 255 essa estrutura é útil para trabalhar com dados binários, como imagens ou arquivos, onde a eficiência de memória é crucial neste tutorial, abordaremos como trabalhar com uint8list no flutter, converter arquivos em listas de bytes e persistir os dados no backend do back4app usando o parse sdk para flutter pré requisitos antes de começar, certifique se de ter o seguinte uma conta no back4app inscreva se para uma conta gratuita em back4app com https //www back4app com um ambiente de desenvolvimento flutter configurado em sua máquina local siga o guia de instalação do flutter https //flutter dev/docs/get started/install se você ainda não o configurou conhecimento básico de dart, widgets flutter e uso do back4app para serviços de backend passo 1 – configurando seu backend do back4app crie um projeto no back4app faça login na sua conta do back4app https //www back4app com/ e crie um novo projeto crie classes parse para este tutorial, crie uma classe parse chamada filestorage para armazenar os dados binários filename (string) o nome do arquivo filedata (file) os dados binários do arquivo obtenha suas credenciais do back4app navegue até as configurações do seu projeto para recuperar seu id de aplicação e chave do cliente, que você precisará para conectar seu aplicativo flutter ao back4app passo 2 – configurando o projeto flutter criar um novo projeto flutter abra seu terminal ou prompt de comando e execute flutter create uint8list example adicionar dependências abra pubspec yaml e adicione as seguintes dependências dependencies flutter sdk flutter parse server sdk flutter latest version file picker latest version path provider latest version execute flutter pub get para instalar essas dependências inicializar o parse em seu app em lib/main dart , inicialize o sdk do 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(), ); } } substitua 'your back4app app id' e 'your back4app client key' pelas suas credenciais reais do back4app passo 3 – trabalhando com uint8list no flutter seleção e leitura de arquivos use o file picker pacote para selecionar um arquivo do dispositivo e convertê lo em um 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 que o usuário selecione um arquivo, lê o arquivo como um uint8list , e exibe o nome do arquivo e um botão para salvá lo passo 4 – persistindo o uint8list no back4app para armazenar o arquivo no back4app, usamos o parsefile objeto, que nos permite fazer upload de dados binários como imagens ou documentos salvando o arquivo no back4app atualize o savetobackend método para persistir o arquivo selecionado no 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 faz o upload do arquivo como dados binários para o back4app usando um parsefile se for bem sucedido, exibe uma mensagem de confirmação passo 5 – executando o app execute seu app usando flutter run você deve ver um botão para escolher um arquivo, seguido por uma opção para salvá lo no backend uma vez selecionado verifique os dados no back4app fazendo login no seu painel do back4app e verificando a filestorage classe você deve ver o arquivo salvo junto com seu nome melhores práticas para armazenar dados binários ao trabalhar com uint8list e dados binários, aqui estão algumas melhores práticas use o parsefile do back4app é uma maneira eficiente de armazenar e recuperar dados binários, como imagens, vídeos e documentos evite armazenar arquivos grandes diretamente em objetos parse se seus arquivos forem grandes, considere usar um serviço de armazenamento como aws s3 e armazene a url do arquivo em seu objeto parse em vez do próprio arquivo compressão e otimização para imagens ou arquivos grandes, considere comprimir o arquivo antes de enviá lo para melhorar o desempenho conclusão neste tutorial, cobrimos como trabalhar com uint8list no flutter, converter arquivos em listas de bytes e persistir esses dados no back4app usando o sdk parse uint8list fornece uma maneira eficiente em termos de memória para lidar com dados de bytes em dart, tornando o adequado para operações de arquivo, como uploads de imagens, armazenamento de documentos e mais integrar isso com o back4app permite que você armazene e gerencie facilmente dados binários na nuvem para mais informações, visite a documentação do flutter https //flutter dev/docs e documentação do back4app https //www back4app com/docs boa codificação!