More
Wie man Uint8List in Flutter verwendet und es im Backend mit Back4app speichert
12 min
einführung in digitalen systemen werden dateien oft als eine folge von bytes dargestellt, und dart bietet eine effiziente möglichkeit, byte daten mit uint8list zu verarbeiten ein uint8list ist eine liste fester länge von nicht signierten 8 bit ganzzahlen, was bedeutet, dass jede zahl im bereich von 0 bis 255 liegt diese struktur ist nützlich für die arbeit mit binären daten, wie z b bildern oder dateien, bei denen die speichereffizienz entscheidend ist in diesem tutorial werden wir behandeln, wie man mit uint8list in flutter arbeitet, dateien in byte listen umwandelt und die daten im backend von back4app mit dem parse sdk für flutter speichert voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie folgendes haben ein back4app konto melden sie sich für ein kostenloses konto unter back4app com https //www back4app com eine flutter entwicklungsumgebung, die auf ihrem lokalen computer eingerichtet ist folgen sie der flutter installationsanleitung https //flutter dev/docs/get started/install , wenn sie sie noch nicht eingerichtet haben grundkenntnisse in dart, flutter widgets und der verwendung von back4app für backend dienste schritt 1 – einrichten ihres back4app backends erstellen sie ein back4app projekt melden sie sich bei ihrem back4app konto https //www back4app com/ an und erstellen sie ein neues projekt erstellen sie parse klassen für dieses tutorial erstellen sie eine parse klasse namens filestorage , um die binären daten zu speichern dateiname (string) der name der datei dateidaten (datei) die binären daten der datei holen sie sich ihre back4app anmeldeinformationen navigieren sie zu ihren projekteinstellungen, um ihre anwendungs id und ihren client schlüssel abzurufen, die sie benötigen, um ihre flutter app mit back4app zu verbinden schritt 2 – einrichten des flutter projekts erstellen sie ein neues flutter projekt öffnen sie ihr terminal oder die eingabeaufforderung und führen sie aus flutter create uint8list example abhängigkeiten hinzufügen öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten hinzu dependencies flutter sdk flutter parse server sdk flutter latest version file picker latest version path provider latest version führen sie flutter pub get aus, um diese abhängigkeiten zu installieren initialisieren sie parse in ihrer app in lib/main dart , initialisieren sie das parse sdk 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(), ); } } ersetzen sie 'your back4app app id' und 'your back4app client key' durch ihre tatsächlichen back4app anmeldeinformationen schritt 3 – arbeiten mit uint8list in flutter dateiauswahl und lesung verwenden sie das file picker paket, um eine datei vom gerät auszuwählen und sie in ein 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 } } dieser code ermöglicht es dem benutzer, eine datei auszuwählen, liest die datei als ein uint8list , und zeigt den dateinamen sowie einen button zum speichern an schritt 4 – persistieren des uint8list in back4app um die datei in back4app zu speichern, verwenden wir das parsefile objekt, das es uns ermöglicht, binäre daten wie bilder oder dokumente hochzuladen die datei in back4app speichern aktualisieren sie die savetobackend methode, um die ausgewählte datei in back4app zu speichern 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 '), )); } } } diese methode lädt die datei als binäre daten zu back4app hoch, indem sie ein parsefile bei erfolg wird eine bestätigungsnachricht angezeigt schritt 5 – die app ausführen führen sie ihre app aus mit flutter run sie sollten einen button sehen, um eine datei auszuwählen, gefolgt von einer option, sie nach der auswahl im backend zu speichern überprüfen sie die daten in back4app indem sie sich in ihr back4app dashboard einloggen und die filestorage klasse überprüfen sie sollten die datei zusammen mit ihrem namen gespeichert sehen best practices für die speicherung von binärdaten beim arbeiten mit uint8list und binärdaten sind hier einige best practices verwenden sie back4apps parsefile ist eine effiziente möglichkeit, binärdaten wie bilder, videos und dokumente zu speichern und abzurufen vermeiden sie die direkte speicherung großer dateien in parse objekten wenn ihre dateien groß sind, ziehen sie in betracht, einen speicherdienst wie aws s3 zu verwenden und die datei url in ihrem parse objekt anstelle der datei selbst zu speichern kompression und optimierung für große bilder oder dateien sollten sie in betracht ziehen, die datei vor dem hochladen zu komprimieren, um die leistung zu verbessern fazit in diesem tutorial haben wir behandelt, wie man mit uint8list in flutter arbeitet, dateien in byte listen konvertiert und diese daten in back4app mit dem parse sdk speichert uint8list bietet eine speichereffiziente möglichkeit, byte daten in dart zu verarbeiten, was es für dateioperationen wie das hochladen von bildern, die speicherung von dokumenten und mehr geeignet macht die integration mit back4app ermöglicht es ihnen, binärdaten einfach in der cloud zu speichern und zu verwalten für weitere informationen besuchen sie die flutter dokumentation https //flutter dev/docs und back4app dokumentation https //www back4app com/docs viel spaß beim programmieren!