Flutterで画像の選択方法 #Flutter

install

dependencies:
  image_picker: ^0.6.7+14

$flutter pub get

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

ios

project-root/ios/Runner/Info.plistに以下のキーを追加

NSPhotoLibraryUsageDescription
アプリにフォトライブラリの許可が必要な理由を説明します。これは、ビジュアルエディタでは「プライバシーフォトライブラリ使用説明」と呼ばれています。
NSCameraUsageDescription
アプリがカメラへのアクセスを必要とする理由を記述します。これは、ビジュアルエディタの「プライバシー - カメラの使用状況の説明」と呼ばれます。
NSMicrophoneUsageDescription
ビデオを録画する場合、アプリがマイクへのアクセスを必要とする理由を説明します。これは、ビジュアルエディタの「プライバシー - マイク使用状況の説明」と呼ばれています。

project-root/ios/Runner/Info.plist

<dict>
    <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>
</dict>

Android

29 <= API

設定は必要ありません

API < 29

下記を追加してください

AndroidManifest.xml

<application>android:requestLegacyExternalStorage="true"</application>

ソースコード

class _ImageUploadPage extends StatefulWidget{
  @override
  __ImageUploadPageState createState() => __ImageUploadPageState();
}

class __ImageUploadPageState extends State<_ImageUploadPage> {
  File _image;
  final picker = ImagePicker();

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

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

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

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

  @override
  Widget build(BuildContext context){
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white10,
          elevation: 0.0,
          iconTheme: IconThemeData(
              color: Colors.green,//change your color here
          ),
        ),
        body:Center(
              child: _image == null
                  ? Text('画像が選択されていません。')
                  : Image.file(_image),
            ),
            floatingActionButton: Column(
              verticalDirection: VerticalDirection.up, // childrenの先頭を下に配置
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                FloatingActionButton(
                  heroTag: "hero1",
                  onPressed: getImage,
                  tooltip: 'Pick Image',
                  child: Icon(Icons.add_a_photo)
                  // backgroundColor: Colors.redAccent,
                ),
                Container( // 余白のためContainerでラップ
                  margin: EdgeInsets.only(bottom: 16.0), 
                  child: FloatingActionButton(
                    heroTag: "hero2",
                    onPressed: chooseImage,
                    tooltip: 'Pick Image',
                    child: Icon(Icons.photo_album),
                    // backgroundColor: Colors.amberAccent,
                  ),
                ),
              ], 
            )
    );
  }
}

参考文献

pub.devのimage_picker
【Flutter】【Dart】Image Pickerで画像を選択する