Flutterで写真を取得したい君に

何をやるの?

タイトルのままです。
最近、趣味でFlutterを使ってアプリ開発をしているのですが、アプリを作っている中で**「そういえばFlutterでどうやって写真とかカメラとか操作するんや?」**と思ったので忘れないように書いてみました。

環境

android studio 3.5.1
macOS Catalina 10.15.1

準備

今回はimage_pickerというパッケージを使います。
まず、pubspec.yamlにパッケージを追記します。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  image_picker: ^0.6.3 # 追加部分

そしたら、ターミナルで

$ flutter packages get

を実行する。

iOSのinfo.plistを設定する

パッケージをインポートしたが、iOSだとこのままでは動かない。
iOSのinfo.plistでいくつか設定しておくことがあるのでそれをする。
プロジェクト内のios/Runner/Info.plistを開く。
下のキーと値をInfo.plistの中に追加する

Info.plist

	<key>NSCameraUsageDescription</key>  
	<string>画像のアップロードのため</string>
	<key>NSPhotoLibraryAddUsageDescription</key>
	<string>画像のアップロードのため</string>
	<key>NSMicrophoneUsageDescription</key>
	<string>画像のアップロードのため</string>

コード

レイアウト

今回、画面は適当にデフォルトのサンプルアプリを少しいじったものを使う
サンプルアプリの_MyHomePageStateを以下のように修正

main.dart

class _MyHomePageState extends State<MyHomePage> {
  File _image; // 画像を入れる変数

  /// 画像が取れたら、setState()で更新する
  Future _insertImage() async {
    // TODO 更新する処理を書く
    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '写真を選択してね',
            ),
            SizedBox(
              child: (_image != null)
                  ? Image.file(_image)
                  : Container()),
            RaisedButton(
              child: Text("写真を選択"),
              onPressed: () => _insertImage() /// ここにImagePickerの処理を書く,
            )
          ],
        ),
      ),
    );
  }
}

とりあえず形だけ作っておく。
一応軽く説明しておくと、、、

_imageは画像を取得できたときに、入れるための変数として定義している。
あと、void insertImage()は同じく_imageに取得できた画像を代入するための場所

SizedBox(
  child: (_image != null)
    ? Image.file(_image)
    : Container()),

ここでは、画像を取得できているかどうかを判別して、できていなかったら(_imageがnull)だったら、空のContainer()を表示させるようにしている。

画像を取得

まずは画像をImagePickerで取得する処理を書いていく

main.dart

  /// 画像が取れたら、setState()で更新する
  Future _insertImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);  // ==追加==

    setState(() {
      // TODO 更新する処理を書く
      _image = image; // ==追加==
    });
  }

順に説明すると、まずvar image = .....の部分でユーザーのライブラリー開き、画像が選択されるまでawaitで待つようにする。
その後、そこで選択された画像がimageにFile型で代入される。

setState()では選択された画像を先ほど定義したプライベート変数の_imageして更新する。

次は、画像を選択させるRaisedButtonに追記していく。

これで完成!!