Salvare e recuperare file in Flutter con Parse SDK

salva file da un'app flutter introduzione a volte le applicazioni devono memorizzare dati che sono spesso troppo grandi per essere memorizzati all'interno di un parseobject il caso d'uso più comune è la memorizzazione di immagini, ma puoi usarlo anche per documenti, video, musica e altri dati binari per memorizzare un file su parse, dovresti sempre associare il file a un altro oggetto dati in modo da poter recuperare questo percorso del file quando interroghi l'oggetto se non associ, il file verrà memorizzato, ma non lo troverai nel cloud un altro consiglio importante è di dare un nome al file che abbia un'estensione questa estensione consente a parse di capire il tipo di file e gestirlo di conseguenza dobbiamo anche menzionare che ogni upload riceve un identificatore unico, quindi non ci sono problemi a caricare più file utilizzando lo stesso nome in flutter, parsefile e parsewebfile ti consentono di memorizzare e recuperare file dell'applicazione nel cloud questa guida spiega come memorizzare e recuperare file nella tua app flutter per gestire lo storage cloud di back4app se non associ il tuo file a un oggetto dati, il file diventerà un file orfano e non sarai in grado di trovarlo nel cloud di back4app requisiti un'app creata su back4app nota segui il tutorial nuova app parse per imparare a creare un'app parse su back4app un'app flutter collegata a back4app nota segui il installa il sdk parse nel progetto flutter per creare un progetto flutter collegato a back4app un dispositivo (o dispositivo virtuale) che esegue android o ios per eseguire questo esempio della guida, dovresti configurare correttamente il plugin image picker non dimenticare di aggiungere le autorizzazioni per ios per accedere alle immagini memorizzate nel dispositivo { btn target=” blank” rel=”nofollow”} leggi attentamente le istruzioni per configurare il progetto android e ios obiettivo crea un'app flutter gallery che carica e visualizza immagini da back4app 1 comprendere la classe parsefile e parsewebfile ci sono tre diverse classi di file in questo sdk parse per flutter parsefilebase parsefilebase è una classe astratta, la base di ogni classe di file che questo sdk può gestire parsefile parsefile estende parsefilebase parsefilebase ed è utilizzata per impostazione predefinita come classe di file su ogni piattaforma (non valida per il web) questa classe utilizza un file file da dart\ io dart\ io per memorizzare il file raw parsewebfile parsewebfile è l'equivalente di parsefile parsefile utilizzato in flutter web questa classe utilizza un uint8list uint8list per memorizzare il file raw i metodi disponibili su parsefilebase parsefilebase per manipolare i file save() save() o upload() upload() per salvare il file su cloud download() download() per recuperare il file e memorizzarlo nella memoria locale ci sono proprietà per ottenere informazioni dal file salvato url url ottiene l'url del file è disponibile solo dopo aver salvato il file o dopo aver ottenuto il file da un parse object name name ottiene il nome del file questo è il nome del file fornito dall'utente prima di chiamare il save() save() metodo dopo aver chiamato il metodo, la proprietà riceve un identificatore unico 2 caricamento di un'immagine per caricare un'immagine, è necessario solo creare un parsefilebase parsefilebase istanza e poi chiamare il save save metodo facciamo questo nella nostra upload upload funzione 1 parsefilebase? parsefile; 2 3 if (kisweb) { 4 //flutter web 5 parsefile = parsewebfile( 6 await pickedfile! readasbytes(), 7 name 'image jpg'); //name for file is required 8 } else { 9 //flutter mobile/desktop 10 parsefile = parsefile(file(pickedfile! path)); 11 } 12 await parsefile save(); il frammento sopra crea e salva l'immagine, e dopo che il salvataggio è completato, lo associamo a un parseobject parseobject chiamato gallery gallery 1 final gallery = parseobject('gallery') 2 set('file', parsefile); 3 await gallery save(); 3 visualizzazione delle immagini per visualizzare le immagini, è necessario ottenere l'url dell'immagine per caricare un'immagine, sarà necessario solo creare un parsefilebase parsefilebase istanza e poi chiamare il save save metodo 1 parsefilebase? varfile = parseobject get\<parsefilebase>('file'); 2 3 return image network( 4 varfile! url!, 5 width 200, 6 height 200, 7 fit boxfit fitheight, 8 ); 4 carica e recupera dall'app flutter utilizziamo ora il nostro esempio per caricare e visualizzare immagini nell'app flutter, con un'interfaccia semplice apri il tuo progetto flutter, vai al main dart main dart file, pulisci tutto il codice e sostituiscilo con 1 import 'dart\ io'; 2 3 import 'package\ flutter/cupertino dart'; 4 import 'package\ flutter/foundation dart'; 5 import 'package\ flutter/material dart'; 6 import 'package\ image picker/image picker dart'; 7 import 'package\ parse server sdk flutter/parse server sdk dart'; 8 9 void main() async { 10 widgetsflutterbinding ensureinitialized(); 11 12 final keyapplicationid = 'your app id here'; 13 final keyclientkey = 'your client key here'; 14 15 final keyparseserverurl = 'https //parseapi back4app com'; 16 17 await parse() initialize(keyapplicationid, keyparseserverurl, 18 clientkey keyclientkey, debug true); 19 20 runapp(materialapp( 21 title 'flutter storage file', 22 debugshowcheckedmodebanner false, 23 home homepage(), 24 )); 25 } 26 27 class homepage extends statefulwidget { 28 @override 29 homepagestate createstate() => homepagestate(); 30 } 31 32 class homepagestate extends state\<homepage> { 33 pickedfile? pickedfile; 34 35 list\<parseobject> results = \<parseobject>\[]; 36 double selecteddistance = 3000; 37 38 @override 39 widget build(buildcontext context) { 40 return scaffold( 41 body padding( 42 padding const edgeinsets all(16 0), 43 child column( 44 crossaxisalignment crossaxisalignment stretch, 45 children \[ 46 container( 47 height 200, 48 child image network( 49 'https //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 50 ), 51 sizedbox( 52 height 16, 53 ), 54 center( 55 child const text('flutter on back4app save file', 56 style textstyle(fontsize 18, fontweight fontweight bold)), 57 ), 58 sizedbox( 59 height 16, 60 ), 61 container( 62 height 50, 63 child elevatedbutton( 64 child text('upload file'), 65 style elevatedbutton stylefrom(primary colors blue), 66 onpressed () { 67 navigator push( 68 context, 69 materialpageroute(builder (context) => savepage()), 70 ); 71 }, 72 ), 73 ), 74 sizedbox( 75 height 8, 76 ), 77 container( 78 height 50, 79 child elevatedbutton( 80 child text('display file'), 81 style elevatedbutton stylefrom(primary colors blue), 82 onpressed () { 83 navigator push( 84 context, 85 materialpageroute(builder (context) => displaypage()), 86 ); 87 }, 88 )) 89 ], 90 ), 91 )); 92 } 93 } 94 95 class savepage extends statefulwidget { 96 @override 97 savepagestate createstate() => savepagestate(); 98 } 99 100 class savepagestate extends state\<savepage> { 101 pickedfile? pickedfile; 102 bool isloading = false; 103 104 @override 105 widget build(buildcontext context) { 106 return scaffold( 107 appbar appbar( 108 title text('upload fie'), 109 ), 110 body padding( 111 padding const edgeinsets all(12 0), 112 child column( 113 crossaxisalignment crossaxisalignment stretch, 114 children \[ 115 sizedbox(height 16), 116 gesturedetector( 117 child pickedfile != null 118 ? container( 119 width 250, 120 height 250, 121 decoration 122 boxdecoration(border border all(color colors blue)), 123 child kisweb 124 ? image network(pickedfile! path) 125 image file(file(pickedfile! path))) 126 container( 127 width 250, 128 height 250, 129 decoration 130 boxdecoration(border border all(color colors blue)), 131 child center( 132 child text('click here to pick image from gallery'), 133 ), 134 ), 135 ontap () async { 136 pickedfile? image = 137 await imagepicker() getimage(source imagesource gallery); 138 139 if (image != null) { 140 setstate(() { 141 pickedfile = image; 142 }); 143 } 144 }, 145 ), 146 sizedbox(height 16), 147 container( 148 height 50, 149 child elevatedbutton( 150 child text('upload file'), 151 style elevatedbutton stylefrom(primary colors blue), 152 onpressed isloading || pickedfile == null 153 ? null 154 () async { 155 setstate(() { 156 isloading = true; 157 }); 158 parsefilebase? parsefile; 159 160 if (kisweb) { 161 //flutter web 162 parsefile = parsewebfile( 163 await pickedfile! readasbytes(), 164 name 'image jpg'); //name for file is required 165 } else { 166 //flutter mobile/desktop 167 parsefile = parsefile(file(pickedfile! path)); 168 } 169 await parsefile save(); 170 171 final gallery = parseobject('gallery') 172 set('file', parsefile); 173 await gallery save(); 174 175 setstate(() { 176 isloading = false; 177 pickedfile = null; 178 }); 179 180 scaffoldmessenger of(context) 181 removecurrentsnackbar() 182 showsnackbar(snackbar( 183 content text( 184 'save file with success on back4app', 185 style textstyle( 186 color colors white, 187 ), 188 ), 189 duration duration(seconds 3), 190 backgroundcolor colors blue, 191 )); 192 }, 193 )) 194 ], 195 ), 196 ), 197 ); 198 } 199 } 200 201 class displaypage extends statefulwidget { 202 @override 203 displaypagestate createstate() => displaypagestate(); 204 } 205 206 class displaypagestate extends state\<displaypage> { 207 @override 208 widget build(buildcontext context) { 209 return scaffold( 210 appbar appbar( 211 title text("display gallery"), 212 ), 213 body futurebuilder\<list\<parseobject>>( 214 future getgallerylist(), 215 builder (context, snapshot) { 216 switch (snapshot connectionstate) { 217 case connectionstate none 218 case connectionstate waiting 219 return center( 220 child container( 221 width 100, 222 height 100, 223 child circularprogressindicator()), 224 ); 225 default 226 if (snapshot haserror) { 227 return center( 228 child text("error "), 229 ); 230 } else { 231 return listview\ builder( 232 padding const edgeinsets only(top 8), 233 itemcount snapshot data! length, 234 itembuilder (context, index) { 235 //web/mobile/desktop 236 parsefilebase? varfile = 237 snapshot data!\[index] get\<parsefilebase>('file'); 238 239 //only ios/android/desktop 240 / 241 parsefile? varfile = 242 snapshot data!\[index] get\<parsefile>('file'); 243 / 244 return image network( 245 varfile! url!, 246 width 200, 247 height 200, 248 fit boxfit fitheight, 249 ); 250 }); 251 } 252 } 253 }), 254 ); 255 } 256 257 future\<list\<parseobject>> getgallerylist() async { 258 querybuilder\<parseobject> querypublisher = 259 querybuilder\<parseobject>(parseobject('gallery')) 260 orderbyascending('createdat'); 261 final parseresponse apiresponse = await querypublisher query(); 262 263 if (apiresponse success && apiresponse results != null) { 264 return apiresponse results as list\<parseobject>; 265 } else { 266 return \[]; 267 } 268 } 269 } trova il tuo applicationid applicationid e client key client key credenziali navigando al tuo app dashboard >impostazioni >sicurezza e chiavi su sito web back4app https //www back4app com/ aggiorna il tuo codice in main dart main dart con entrambi i valori del tuo progetto applicationid applicationid e clientkey clientkey in back4app keyapplicationid = appid appid keyclientkey = client key client key esegui il progetto e l'app si caricherà come mostrato nell'immagine conclusione a questo punto, hai caricato un'immagine su back4app e l'hai visualizzata in un'applicazione flutter