FlutterでBack4Appにファイルを保存し操作する方法

flutterアプリからファイルを保存する はじめに アプリケーションは、parseobject内に保存するには大きすぎるデータを保存する必要があることがあります。最も一般的な使用例は画像の保存ですが、文書、動画、音楽、その他のバイナリデータにも使用できます。 ファイルをparseに保存するには、常にファイルを別のデータオブジェクトに関連付ける必要があります。そうすることで、オブジェクトをクエリする際にこのファイルパスを取得できます。関連付けを行わない場合、ファイルは保存されますが、cloud上で見つけることはできません。 もう一つの重要なヒントは、ファイルに拡張子を持つ名前を付けることです。この拡張子により、parseはファイルタイプを特定し、それに応じて処理します。また、各アップロードには一意の識別子が付与されるため、同じ名前を使用して複数のファイルをアップロードすることに問題はありません。 flutterでは、parsefileとparsewebfileを使用して、アプリケーションファイルをcloudに保存および取得できます。このガイドでは、back4appクラウドストレージを管理するために、flutterアプリでファイルを保存および取得する方法を説明します。 ファイルをデータオブジェクトに関連付けない場合、そのファイルは孤立ファイルとなり、back4app cloud上で見つけることができなくなります。 前提条件 アプリ 作成された back4app上で 注意 次の 新しいparseアプリのチュートリアル を参照して、back4app上でparseアプリを作成する方法を学んでください。 back4appに接続されたflutterアプリ。 注意 次の flutterプロジェクトにparse sdkをインストールする を参照して、back4appに接続されたflutterプロジェクトを作成してください。 androidまたはiosを実行しているデバイス（または仮想デバイス）。 このガイドの例を実行するには、プラグイン image picker を適切に設定する必要があります。デバイスに保存された画像にアクセスするために、iosの権限を追加することを忘れないでください。{ btn target=” blank” rel=”nofollow”}。androidおよびiosプロジェクトの設定に関する指示を注意深く読んでください。 目標 back4appから画像をアップロードして表示するflutterギャラリーアプリを作成します。 1 parsefileおよびparsewebfileクラスの理解 このparse sdk for flutterには、3つの異なるファイルクラスがあります。 parsefilebase parsefilebase は抽象クラスであり、このsdkが扱うすべてのファイルクラスの基盤です。 parsefile parsefile は parsefilebase parsefilebase を拡張し、デフォルトで全プラットフォーム（webには無効）でファイルクラスとして使用されます。このクラスは、 file file を使用して、 dart\ io dart\ io から生のファイルを保存します。 parsewebfile parsewebfile は、flutter webで使用される parsefile parsefile に相当します。このクラスは、 uint8list uint8list を使用して、生のファイルを保存します。 ファイルを操作するための parsefilebase parsefilebase で利用可能なメソッド save() save() または upload() upload() を使用して、cloudにファイルを保存します。 download() download() を使用して、ファイルを取得し、ローカルストレージに保存します。 保存されたファイルから情報を取得するためのプロパティがあります url url ファイルのurlを取得します。ファイルを保存した後、またはparse objectからファイルを取得した後にのみ利用可能です。 name name ファイル名を取得します。これは、 save() save() メソッドを呼び出す前にユーザーによって指定されたファイル名です。メソッドを呼び出した後、プロパティは一意の識別子を受け取ります。 2 画像のアップロード 画像をアップロードするには、まず parsefilebase parsefilebase インスタンスを作成し、その後 save save メソッドを呼び出すだけです。 それを私たちの upload upload 関数で行いましょう 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(); 上記のスニペットは画像を作成して保存し、保存が完了した後にそれを parseobject parseobject と呼ばれる gallery gallery に関連付けます。 1 final gallery = parseobject('gallery') 2 set('file', parsefile); 3 await gallery save(); 3 画像の表示 画像を表示するには、画像のurlを取得する必要があります。 画像をアップロードするには、 parsefilebase parsefilebase インスタンスを作成し、その後 save save メソッドを呼び出すだけです。 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 flutterアプリからのアップロードと取得 シンプルなインターフェースを使用して、flutterアプリで画像をアップロードおよび表示する例を使ってみましょう。 flutterプロジェクトを開き、「 main dart main dart 」ファイルに移動し、すべてのコードを整理して、次の内容に置き換えます 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 } あなたの applicationid applicationid と client key client key の認証情報を取得するには、アプリのダッシュボード >設定 >セキュリティとキーに移動してください back4appのウェブサイト https //www back4app com/ あなたのコードを main dart main dart にプロジェクトの両方の値を使用して更新してください applicationid applicationid と clientkey clientkey をback4appで。 keyapplicationid = appid appid keyclientkey = client key client key プロジェクトを実行すると、アプリが画像のように読み込まれます。 結論 この時点で、あなたはback4appに画像をアップロードし、flutterアプリケーションに表示しました。