【Flutter】image_pickerでスマホのカメラ、画像を扱ってみよう！

2021年5月21日2022年2月10日

Flutterで画像を扱う際の手順について備忘録で残しておきます。

image_pickerのインストール

まずは使用するパッケージをFlutterにインストールします。

使うのはタイトルにも書いてますが「image_picker」というパッケージです。このパッケージ名をプロジェクト配下のpubspec.yamlに記載してflutter packages getコマンドを叩きます。

https://pub.dev/packages/image_picker

バージョンは記載しなくても問題ないです。指定したい人はコロンの後ろにバージョンを記載しましょう。

pubspec.yaml


dependencies:
  flutter:
    sdk: flutter
  image_picker // 追加

これでインストール完了です。

info.plistの設定　※iOSのみ

iOSでアプリを動かす場合は下記コードをiOS/info.plistにコピペしてください。

（実際にアプリが端末のフォルダにアクセスする際の許可ダイアログの設定です。）

iOS/info.plist

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

importする

image_pickerを使用するファイルに以下のコードを追加してインポートします。

main.dart

import 'dart:io';
import 'package:image_picker/image_picker.dart';

サンプルコード

バージョン0.8.2以降とそれ以前で書き方が多少変わったので両方のサンプルを置いておきます。

バージョン0.8.2以前

main.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

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

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  File _image;
  final picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            RaisedButton(
              // カメラ
              onPressed: () async {
                final pickedFile =
                    await picker.getImage(source: ImageSource.camera);

                setState(() {
                  _image = File(pickedFile.path);
                });
              },
              child: Icon(Icons.add_a_photo),
            ),
            RaisedButton(
              // ギャラリー
              onPressed: () async {
                final pickedFile =
                    await picker.getImage(source: ImageSource.gallery);

                setState(() {
                  _image = File(pickedFile.path);
                });
              },
              child: Icon(Icons.photo_library),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                child: _image == null ? Text('写真を選択してね') : Image.file(_image),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

バージョン0.8.2以降

main.dart

~~~

import 'dart:io';
import 'package:image_picker/image_picker.dart';

~~~

 final ImagePicker _picker = ImagePicker();
 File? _file;

~~~                    
                       if (_file != null)
                        Image.file(
                          _file!,
                          fit: BoxFit.cover,
                        ),
                      OutlinedButton(
                        onPressed: () async {
                          final XFile? _image = await _picker.pickImage(
                            source: ImageSource.gallery,
                          );
                          _file = File(_image!.path);
                         setState(() {});
                        },
                        child: const Text('画像を選択'),
                      )
~~~

主な変更点は以前まで使われていた「getImage」メソッドが非推奨になり、代わりに「pickImage」メソッドが推奨になった点です。

getImageでは画像をimage_picker独自の「PickedFile」という形式で扱っていましたが、pickImageでは「XFile」という形式に変わりました。