Zenn
😎

【Flutter】【Dart】Image Pickerで画像を選択する

2020/12/07に公開
Flutter
初心者
Dart
プログラミング
tech

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

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

Flutter超入門！ スターター教材解説
ハッチアウトスクールでは、Flutterを直接学べるスクールの運営もしております。 詳しくは下記リンクより。お気軽にお問い
YouTubeのvideoIDが不正ですhttps://www.youtube.com/playlist?list=PLGokGigzyngIeGzjwD0-DpvBWs2fGqkp-

iOSでのセットアップ

info.plistの編集

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でのセットアップ

なし​

実際にコードを書いていく

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()を呼び出します。

main.dart
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),
               ),
             ],
           )
         ],
       ),
     ),

完成イメージ

カメラから取得

ギャラリーから取得

全体コード

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: '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をオンラインで学習できるスクールのご用意もございます。下記リンクより詳細確認できます。お気軽にお問い合わせくださいませ！

https://hatchout.net/#/school

2020/09/29現在

Discussion