【Flutter】 カメラやアルバムから写真を読み込む【image_picker】

Flutter でカメラやアルバムから写真を読み込むのに便利な【image_picker】パッケージの使い方について解説します。

image_pickerの使い方

【iOS】Info.plistにキーを追加

Info.plistに以下のキーを追加します。

<key>NSPhotoLibraryUsageDescription</key>
<string>ライブラリにアクセスするよ</string>
<key>NSCameraUsageDescription</key>
<string>カメラにアクセスするよ</string>
<key>NSMicrophoneUsageDescription</key>
<string>マイクにアクセスするよ</string>

【Android】AndroidManifest.xmlにアトリビュートを追加

Android 10（API レベル 29）以上の場合は対応は必要ありません。

これよりも低い場合は、AndroidManifest.xmlに以下のアトリビュートを追加する必要があります。

android:requestLegacyExternalStorage="true"

パッケージの追加とインポート

pubspec.yaml にパッケージを追加してpub getします。

dependencies:
  flutter:
    sdk: flutter
  # ↓これを追加
  image_picker: ^0.6.7+4

dartのコードで以下をインポートします。

// ↓これをインポート
import 'package:image_picker/image_picker.dart';

// File クラスを使用するのでこれもインポートします
import 'dart:io';

読み込み

インスタンスを生成して、カメラやピッカーを呼び出します。

// インスタンス生成
final picker = ImagePicker();

// カメラから読み込み
final pickedFile = await picker.getImage(source: ImageSource.camera);

// アルバムから読み込み
final pickedFile = await picker.getImage(source: ImageSource.gallery);

Imageウィジェットで表示

// PickedFileクラスをFileクラスにする
File _image = File(pickedFile.path);

// Imageウィジェットに_imageを渡せば表示できる
Image.file(_image),

サンプルコード

実装のサンプルコードです（公式サンプルと大体同じです）。FloatingActionButtonを押すとアルバムのピッカーが起動し、画像を選択すると、画面中央に選択した画像が表示されます。

import 'package:flutter/material.dart';
// ↓これをインポート
import 'package:image_picker/image_picker.dart';
import 'dart:io';//Fileクラスを使うのでこれもインポート

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'image_picker'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File _image;
  final picker = ImagePicker();

  // 画像の読み込み
  Future _getImage() async {
    //final pickedFile = await picker.getImage(source: ImageSource.camera);//カメラ
    final pickedFile = await picker.getImage(source: ImageSource.gallery);//アルバム

    setState(() {
      if(pickedFile!=null) {
        _image = File(pickedFile.path);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _image == null
                ? Text('No image selected.')
                : Image.file(_image),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _getImage,
        tooltip: 'Pick',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

画像をアルバムに保存したい場合は以下の記事も参考にしてください。