【Flutter】2021年11月最新版：ImagePickerの使い方（カメラロールやカメラで撮影したデータを取得）

2021年11月7日のYouTubeライブで紹介したImagePickerの使い方をnoteでも紹介したいと思います。

Flutterラボ - 「Flutterラボ」では動画でFlutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで誰でも気軽にFlutterが学べるコンテンツを公開しています。

パッケージをインストール

image_picker | Flutter Package

pubspec.yaml

dependencies:
  image_picker: ^0.8.4+4

iOSでのセットアップ

info.plistの編集

<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires to access your photo library</string>
<key>NSCameraUsageDescription</key>
<string>This app requires to add file to your camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app requires to add file to your photo library your microphone</string>

Androidでのセットアップ

なし

import

ImagePickerを使用したいPageを宣言しているファイル内で下記のコードを2行追加してください。

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

変数の宣言

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

『画像を選択』ボタンを作成する

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

ボタンを押したときに、カメラロールを開いて画像を選択する画面を表示します。
それが終わった後、表示する際に使いやすいようにFile型に変換したものを、_fileに格納しています。

画像の表示

if(_file != null) Image.file(_file!, fit: BoxFit.cover,),

Nullでないことを確認して、画像を表示します。
これで完了です。

全体コード

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Picker'),
      ),
      body: Column(
        children: [
           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('画像を選択')
          )
        ],
      ),
    );
  }
}

さいごに

YouTubeライブでは、アプリ内でカメラを起動して撮影した写真をそのまま取得する方法や、画像をカメラロールから複数選択してスライドショー形式で表示する方法を紹介しているので、ぜひアーカイブもご覧ください。