Flutterラボ リリース3周年記念! プロコースが1ヶ月の料金で2ヶ月間受けられる、実質半額セール (2024年3月17日まで・先着)

Flutterラボの

プレミアム会員になる

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

2021.11.07

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

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech

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

image_picker | Flutter Package Flutter plugin for selecting images from the Android and iOS pub.dev

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でないことを確認して、画像を表示します。
これで完了です。

画像1

全体コード

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