4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutterで画像の選択方法

Last updated at Posted at 2020-12-09

##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,
                  ),
                ),
              ], 
            )
    );
  }
}

image.gif

##参考文献
pub.devのimage_picker
【Flutter】【Dart】Image Pickerで画像を選択する

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?