まつまる どうも、まつまるです。今回は、ギャラリーから取得した画像をアプリ内のstorage領域に保存し、アプリを一時終了しても再び画像が表示されるアプリを作ります。
ギャラリーから画像を選択
↓
path_providerでストレージパスを取得
↓
ストレージパスをSharedPreferencesで書き込み
↓
アプリ立ち上げ時にSharedPreferencesで読み込み
↓
FutureBuilderで画像を表示
図解で表現してみたので、ざっくり眺めてください。図を見ながらコードの解説を見た方がわかりやすいと思います。
SharedPreferencesの使い方についてはこの記事を参考にしました。
それではまず準備からです。
使用しているプラグイン
image_picker: ^0.6.7
path_provider: ^1.6.5
path: ^1.7.0
shared_preferences: ^0.5.4+5
image pickerは画像を取得するために必要
path providerはストレージパスを取得するために必要
pathは.jpgみたいな拡張子を取得するために必要
shared preferencesはパスをsaveするために必要
これらをpubspec.yamlのdependenciesに追加しましょう。
iOSの準備
<project root>/ios/Runner/Info.plist:に以下のコードを写真の場所にコピペしてください。
<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires to access your photo library</string>
iphoneのギャラリーにアクセスするために必要です。
今回、androidの準備はスキップします。
コードの解説
galleryから画像を選択
まずはgalleryから画像を選択するメソッドです。上の画像はsetStateで、下はFutureBuilderで画像を表示しています。
そして、選択した画像を引数(=pickedFile)にSaveImage.saveLocalImageを実行します。
ストレージパスを取得
localPathとSharedPrefWrite(imagePath)の中身は後ほど説明するので一旦スルーしてください。
ここでは選択した画像をストレージパスにコピーしてByteDataでreturnしています。
localPathメソッドの説明です。実行すればpathを返すようにしておきます。
SharedPreferencesで書き込み
たった3行で書き込み完了です。簡単。
SharedPreferencesで読み込み
MainScreenのinitStateにSharedPrefRead()を実行することで、アプリの立ち上げ時に保存したデータを読み込んでくれます。
そして、imageのpath→ByteData→Uint8Listに変換しています。読み込んだ画像データをリターンしています。
構成画面
SharePreferenceで読み込んだデータはFutureBuilderで組み立てています。データの読み込みは非同期で動作しているのでFutureBuilderが必要になります。
FloatingActionButtonをタップすることで動いていきます。
FutureBuilderが上手く通信出来ていなかったら”ざんねん”が表示されます。
コード全文
まとめ
SharedPreferencesとpath providerを使えばけっこう簡単に画像を保存することができました。本当はsqfliteとHiveを使いこなしたいんだけど、難しいそうなのでまずはSharedPreferencesでやってみました。
次回はsqfliteかHiveで画像/動画の保存をやっていこうと思います。
