まつまるまつまる

どうも、まつまるです。今回は、ギャラリーから取得した画像をアプリ内の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.yamldependenciesに追加しましょう。

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)の中身は後ほど説明するので一旦スルーしてください。

ここでは選択した画像をストレージパスにコピーしてByteDatareturnしています。

localPathメソッドの説明です。実行すればpathを返すようにしておきます。

SharedPreferencesで書き込み

たった3行で書き込み完了です。簡単。

SharedPreferencesで読み込み

MainScreeninitStateSharedPrefRead()を実行することで、アプリの立ち上げ時に保存したデータを読み込んでくれます。

そして、imagepathByteData→Uint8Listに変換しています。読み込んだ画像データをリターンしています。

構成画面

SharePreferenceで読み込んだデータはFutureBuilderで組み立てています。データの読み込みは非同期で動作しているのでFutureBuilderが必要になります。

FloatingActionButtonをタップすることで動いていきます。

FutureBuilderが上手く通信出来ていなかったら”ざんねん”が表示されます。

コード全文

スポンサーリンク

まとめ

SharedPreferencesとpath providerを使えばけっこう簡単に画像を保存することができました。本当はsqfliteとHiveを使いこなしたいんだけど、難しいそうなのでまずはSharedPreferencesでやってみました。

次回はsqfliteかHiveで画像/動画の保存をやっていこうと思います。