2021年11月8日に最新版のImagePickerの使い方を紹介する記事を公開したので、ぜひそちらをご覧ください。

2020/09/29現在
今回はFlutterアプリ内で画像を選択する機能を導入してみましょう。

※Flutterの学習コンテンツを動画でもご用意しております。よければ下記リンクから見てみて下さい！

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';

変数の宣言

class _HomePageState extends State<HomePage> 内部の1行目と2行目に下記の記述をし、変数の宣言を行います。

File _image;
final picker = ImagePicker();

カメラから画像を取得

カメラから画像を取得するメソッド(関数)を宣言します。これらは後に参照するために使います。

Future getImageFromCamera() async {
   final pickedFile = await picker.getImage(source: ImageSource.camera);

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

ギャラリーから画像を取得

ギャラリーから画像を取得するメソッド(関数)を宣言します。

Future getImageFromGallery() async {
   final pickedFile = await picker.getImage(source: ImageSource.gallery);

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

bodyに選択された画像を表示するための処理を追加する

Image.fileというメソッドを使用することでローカル上のファイルを画像としてUI上に表示することが可能です。Imageウィジェットは他にも.networkや.assetなど状況に応じて使い方を変えることができます。

body: Center(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           Padding(
             padding: const EdgeInsets.all(8.0),
             child: Container(
                 width: 300,
                 child: _image == null
                     ? Text('No image selected.')
                     : Image.file(_image)),
           ),
         ],
       ),
     ),

ボタンをColumn内に2つ追加

それぞれのボタンのonPressed要素ないに先ほど宣言した、getImageFromGallery()、とgetImageFromCamera()を呼び出します。

body: Center(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           Padding(
             padding: const EdgeInsets.all(8.0),
             child: Container(
                 width: 300,
                 child: _image == null
                     ? Text('No image selected.')
                     : Image.file(_image)),
           ),
            Row(
             mainAxisAlignment: MainAxisAlignment.spaceAround,
             children: [
               FloatingActionButton(
                 onPressed: getImageFromCamera, //カメラから画像を取得
                 tooltip: 'Pick Image From Camera',
                 child: Icon(Icons.add_a_photo),
               ),
               FloatingActionButton(
                 onPressed: getImageFromGallery, //ギャラリーから画像を取得
                 tooltip: 'Pick Image From Gallery',
                 child: Icon(Icons.photo_library),
               ),
             ],
           )
         ],
       ),
     ),

完成イメージ

カメラから取得

ギャラリーから取得

全体コード

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: 'Hatch 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();

 Future getImageFromCamera() async {
   final pickedFile = await picker.getImage(source: ImageSource.camera);

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

 Future getImageFromGallery() async {
   final pickedFile = await picker.getImage(source: ImageSource.gallery);

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

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Image Picker Demo'),
     ),
     body: Center(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           Padding(
             padding: const EdgeInsets.all(8.0),
             child: Container(
                 width: 300,
                 child: _image == null
                     ? Text('No image selected.')
                     : Image.file(_image)),
           ),
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceAround,
             children: [
               FloatingActionButton(
                 onPressed: getImageFromCamera,
                 tooltip: 'Pick Image From Camera',
                 child: Icon(Icons.add_a_photo),
               ),
               FloatingActionButton(
                 onPressed: getImageFromGallery,
                 tooltip: 'Pick Image From Gallery',
                 child: Icon(Icons.photo_library),
               ),
             ],
           )
         ],
       ),
     ),
   );
 }
}

まとめ

今回はImage Pickerを使用して画像の選択画面を作成しました。用途に応じて他のパッケージも使用できると思いますのでまた紹介していきたいと思います。

ハッチアウトスクールではFlutterをオンラインで学習できるスクールのご用意もございます。下記リンクより詳細確認できます。お気軽にお問い合わせくださいませ！