[Flutter/dart]画像をローカルディレクトリに保存する

概要

スマホアプリにおいて、アプリ終了後もデータを保持したい場合は、sharedpreferenceなどに変数の値を取得しておく。では、画像を保存したい場合はどうすればいいのか。

結論は、スマホのローカルディレクトリに画像を保存し、ファイルのパスをStringとしてsharedpereferenceなどに保存しておけばよい。

手法

必要なモジュールをimport しておく

import 'dart:io' as io;
import 'package:path/path.dart' as path;

まずはスマホのギャラリーから画像を取得する（ここはカメラで撮影でもネットからダウンロードでもなんでも、とにかく画像ファイルを取得する作業）

final picker=ImagePicker();
final pickedFile = await picker.getImage(source: ImageSource.gallery);
String filePath=pickedFile.path;

次に、ローカルディレクトリに取得した画像を保存する。

io.File _target_file = io.File(filePath);  //型変換
String _base_name = path.basename(file);   //パスからファイル名を取得
String loacl_dir = await getLocalDir();    //ローカルディレクトリを取得
String _image_path_str = "${loacl_dir}/${_base_name}"; 
//ローカルディレクトリへのパス
io.File _image_path_save = io.File(_image_path_str); //型変換

io.File savedFile =
  await _image_path_save.writeAsBytes(await_target_file.readAsBytes());
//ファイルを書き込み

3行目でローカルディレクトリのフォルダまでのパスを取得し、4行目でファイル名とディレクトリ名を結合してローカルディレクトリへのファイルパスを作成している。

ローカルディレクトリのフォルダパスを取得する関数は以下の通り。

static Future<String> getLocalDir() async {
  final directory = await getApplicationDocumentsDirectory();
  return directory.path;
}

後は、_image_path_strをsharedpreferenceなどに保存すればよい。

画像を読み出す手法は以下の通り。

_image_file_name=path.basename(_image_path_str);
final String _local_dir= await getLocalDir();
io.File _image_path = io.File("${_local_dir}/${_image_file_name}");

ここで注意しなければいけないのは、_image_path_strを読み出してそのまま

io.File _image_path = io.File(_image_path_str);

としても上手くいかない。その都度ローカルディレクトリを取得しなければならない。（理由はよく分からない）

最後に

リモートサーバと接続するようなアプリならサーバに保存してしまえばいいのであんまり需要ないかも、、、

ただ、これだけのためにサーバ用意したり、ユーザアカウント作ったりしたくないという場合には使ってみてね。