Sauvegarder et Lire des Fichiers avec Flutter et Back4App

enregistrer des fichiers depuis une application flutter introduction parfois, les applications doivent stocker des données qui sont souvent trop volumineuses pour être stockées à l'intérieur d'un parseobject le cas d'utilisation le plus courant est le stockage d'images, mais vous pouvez également l'utiliser pour des documents, des vidéos, de la musique et d'autres données binaires pour stocker un fichier sur parse, vous devez toujours associer le fichier à un autre objet de données afin de pouvoir récupérer ce chemin de fichier lors de la requête de l'objet si vous ne l'associez pas, le fichier sera stocké, mais vous ne pourrez pas le retrouver sur le cloud un autre conseil important est de donner un nom au fichier qui a une extension de fichier cette extension permet à parse de déterminer le type de fichier et de le gérer en conséquence nous devrions également mentionner que chaque téléchargement obtient un identifiant unique, donc il n'y a pas de problème à télécharger plusieurs fichiers en utilisant le même nom dans flutter, parsefile et parsewebfile vous permettent de stocker et de récupérer des fichiers d'application dans le cloud ce guide explique comment stocker et récupérer des fichiers dans votre application flutter pour gérer le stockage cloud de back4app si vous n'associez pas votre fichier à un objet de données, le fichier deviendra un fichier orphelin et vous ne pourrez pas le retrouver sur back4app cloud prérequis une application créée sur back4app remarque suivez le tutoriel de nouvelle application parse pour apprendre à créer une application parse sur back4app une application flutter connectée à back4app remarque suivez le installer le sdk parse sur le projet flutter pour créer un projet flutter connecté à back4app un appareil (ou un appareil virtuel) exécutant android ou ios pour exécuter cet exemple de guide, vous devez configurer le plugin image picker correctement n'oubliez pas d'ajouter des autorisations pour ios afin d'accéder aux images stockées sur l'appareil { btn target=” blank” rel=”nofollow”} lisez attentivement les instructions pour configurer le projet android et ios objectif créer une application flutter gallery qui télécharge et affiche des images depuis back4app 1 comprendre les classes parsefile et parsewebfile il existe trois classes de fichiers différentes dans ce sdk parse pour flutter parsefilebase parsefilebase est une classe abstraite, la fondation de chaque classe de fichier que ce sdk peut gérer parsefile parsefile étend parsefilebase parsefilebase et est par défaut utilisé comme classe de fichier sur chaque plateforme (non valide pour le web) cette classe utilise un file file de dart\ io dart\ io pour stocker le fichier brut parsewebfile parsewebfile est l'équivalent de parsefile parsefile utilisé sur flutter web cette classe utilise un uint8list uint8list pour stocker le fichier brut les méthodes disponibles sur parsefilebase parsefilebase pour manipuler les fichiers save() save() ou upload() upload() pour enregistrer le fichier sur le cloud download() download() pour récupérer le fichier et le stocker dans le stockage local il existe des propriétés pour obtenir des informations à partir du fichier enregistré url url obtient l'url du fichier elle n'est disponible qu'après avoir enregistré le fichier ou après avoir obtenu le fichier d'un parse object name name obtient le nom du fichier c'est le nom de fichier donné par l'utilisateur avant d'appeler le save() save() méthode après avoir appelé la méthode, la propriété reçoit un identifiant unique 2 téléchargement d'une image pour télécharger une image, vous n'aurez besoin que de créer une parsefilebase parsefilebase instance et ensuite d'appeler la save save méthode faisons cela dans notre upload upload fonction 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(); le snippet ci dessus crée et sauvegarde l'image, et après la sauvegarde, nous l'associons à un parseobject parseobject appelé gallery gallery 1 final gallery = parseobject('gallery') 2 set('file', parsefile); 3 await gallery save(); 3 affichage des images pour afficher des images, vous devez obtenir l'url de l'image pour télécharger une image, vous n'aurez besoin que de créer une parsefilebase parsefilebase instance et ensuite appeler la save save méthode 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 télécharger et récupérer depuis l'application flutter utilisons maintenant notre exemple pour télécharger et afficher des images dans l'application flutter, avec une interface simple ouvrez votre projet flutter, allez dans le main dart main dart fichier, nettoyez tout le code et remplacez le par 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 } trouvez votre applicationid applicationid et client key client key en naviguant vers le tableau de bord de votre application >paramètres >sécurité et clés à site web back4app https //www back4app com/ mettez à jour votre code dans main dart main dart avec les deux valeurs de votre applicationid applicationid et clientkey clientkey dans back4app keyapplicationid = appid appid keyclientkey = client key client key exécutez le projet, et l'application se chargera comme indiqué dans l'image conclusion à ce stade, vous avez téléchargé une image sur back4app et l'avez affichée dans une application flutter