[Flutter] image_picker 画像を読み出す

Androidだとフォト、iOSでは写真に保存されている画像を読み出して表示させるには
image_picker を使います

image_picker

フォトあるいはGalleryから画像を取得

XFile? _image;
final imagePicker = ImagePicker();

Future pickGarally() async {
  // ギャラリーから写真を取得
  final pickedFile = await imagePicker.pickImage(source: ImageSource.gallery);
  setState(() {
    if (pickedFile != null) {
      // 画像パスを設定
      _image = XFile(pickedFile.path);
    }
  });
}

XFile? _image;

final imagePicker = ImagePicker();

Future pickGarally() async {

// ギャラリーから写真を取得

final pickedFile = await imagePicker.pickImage(source: ImageSource.gallery);

setState(() {

if (pickedFile != null) {

// 画像パスを設定

_image = XFile(pickedFile.path);

}

});

}

画像を表示
選択した画像のパスから、Image.file を使って画像を表示

Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: Center(
        child: Column(              
          children: <Widget>[
            if(_image != null) 
              Image.file(File(_image!.path)),
            ElevatedButton(
              onPressed: pickGarally,
              child: const Text('画像を選択'),)
          ],
        ),
    ),
  );
}

Widget build(BuildContext context) {

return Scaffold(

...

body: Center(

child: Column(

children: <Widget>[

if(_image != null)

Image.file(File(_image!.path)),

ElevatedButton(

onPressed: pickGarally,

child: const Text('画像を選択'),)

);

}

目次
1. image_picker パッケージの追加
2. サンプルコード
3. 実行結果

image_picker パッケージの追加

ターミナルから image_picker パッケージを追加します

$ flutter pub add image_picker

1	$ flutter pub add image_picker

これにより、dependencesに

image_picker: ^xx.xx.xx

1	image_picker: ^xx.xx.xx

が追加されています
バージョンは適宜変更されます

pubspec.yaml

dependencies:
    flutter:
        sdk: flutter
  image_picker: ^1.1.2

dependencies:

flutter:

sdk: flutter

image_picker: ^1.1.2

パッケージをインポートすることができるようになりました

import 'package:image_picker/image_picker.dart';

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

Android：
Manifest に requestLegacyExternalStorage の設定を追加します
../android/app/src/main/AndroidManifest.xml

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        ...
        android:requestLegacyExternalStorage="true" 
       ... 
    >
        <activity
            ...
     >
...

<application

...

android:requestLegacyExternalStorage="true"

...

<activity

...

iOS：
Info.plist (../ios/Runner/info.plist ) に以下のような設定を追加します
image_picker はデバイスのライブラリーにアクセスするために権限を取得するための
説明が必要です
また、image_pickerはカメラ撮影もできるパッケージなので
カメラとマイクの権限も要求します

Info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>ライブラリ用権限を得るための説明を記述</string>

1 2	<key>NSPhotoLibraryUsageDescription</key> <string>ライブラリ用権限を得るための説明を記述</string>

サンプルコード

まとめてみます
main.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Picker',
      theme: ThemeData(
        useMaterial3: true, // Material 3 を有効
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: const ImageViewer(),
    );
  }
}
 
class ImageViewer extends StatefulWidget {
  const ImageViewer({super.key});

  @override
  State<ImageViewer> createState() => _ImageViewerState();
}
 
class _ImageViewerState extends State<ImageViewer> {

  XFile? _image;
  final imagePicker = ImagePicker();
 
  // Galleryから画像を取得
  Future pickGarally() async {
    final pickedFile = await imagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      if (pickedFile != null) {
        _image = XFile(pickedFile.path);
      }
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Image Picker'),
        ),

        body: Center(
            child: Column(              
              children: <Widget>[
                if(_image != null) Image.file(File(_image!.path)),
                ElevatedButton(
                  onPressed: pickGarally,
                  child: const Text('画像を選択'),)
              ],
            ),
        ),
    );
  }
}

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Image Picker',

theme: ThemeData(

useMaterial3: true, // Material 3 を有効

colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),

home: const ImageViewer(),

);

}

class ImageViewer extends StatefulWidget {

const ImageViewer({super.key});

@override

State<ImageViewer> createState() => _ImageViewerState();

}

class _ImageViewerState extends State<ImageViewer> {

XFile? _image;

final imagePicker = ImagePicker();

// Galleryから画像を取得

Future pickGarally() async {

final pickedFile = await imagePicker.pickImage(source: ImageSource.gallery);

setState(() {

if (pickedFile != null) {

_image = XFile(pickedFile.path);

}

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('Image Picker'),

body: Center(

child: Column(

children: <Widget>[

if(_image != null) Image.file(File(_image!.path)),

ElevatedButton(

onPressed: pickGarally,

child: const Text('画像を選択'),)

);

}

実行結果

実行して確認しましょう

Android：
これはフォトや写真の画像が保存されている必要があります

ボタンをタップ

画像を選択してタップ

選択した画像が表示されました

iPhone：

ボタンをタップ

写真ライブラリーへのアクセスを許可

画像を選択

画像が表示される

References:
image_picker — pub.dev
Image.file