【Flutter】画像を取得・表示（image_picker） 2021/09/23現在

こんにちわ　
画像の取り扱いをしようと思い、image_pickerを使ってみましたが、色々なサイトと同じどうりにするとエラーになると思います。　小さな修正でできたので、共有します。


リンクはこちら

https://pub.dev/packages/image_picker




参考になったサイトはこちら

https://nobushiueshi.com/flutter%E6%92%AE%E5%BD%B1%E3%81%97%E3%81%9F%E5%86%99%E7%9C%9F%E3%82%84%E5%8B%95%E7%94%BB%E3%80%81%E3%82%AB%E3%83%A1%E3%83%A9%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%8B%E3%82%89%E7%94%BB%E5%83%8F%E3%82%84/




ではやっていくうううう


## IOSとAndroidの設定


### IOS 

まずは、Terminalで、

```
open ios/Runner.xcworkspace
```
でXcodeを開いてください。そして`info.plist`に以下の三つを選んでください

```
Privacy – Photo Library Usage Description　　　　　　　　　//カメラロール
Privacy – Camera Usage Description　　　　　　　　　　　　　　　　　　　　　　　//カメラ
Privacy – Microphone Usage Description　　　　　　　　　　　　　　　//マイク
```


とりあえず、登録しておけば大丈夫でしょう。


###　Android


targetSdkVersionが29以上の場合は、まずandroidフォルダを右クリックして[Flutter]→[Open Android module in Android Studio]を選択します。

次にapp/manifests/AndroidManifest.xmlを開きます。


<application>タグに「android:requestLegacyExternalStorage=”true”」を追加します。


例

```

 <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:requestLegacyExternalStorage="true" //これ！！！
            android:windowSoftInputMode="adjustResize">

```










サンプルコード(クラス名などはお任せです。)
とりあえず、Statefulで作成してみました。

```dart

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

import 'children/register_app_bar.dart';

class RegisterScreen extends StatefulWidget {
  const RegisterScreen({Key? key}) : super(key: key);

  @override
  _RegisterScreenState createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
  File? image;
  final picker = ImagePicker();

  Future getImage() async {
    //カメラロールから読み取る
    //final pickedFile = await picker.getImage(source: ImageSource.gallery);
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);
    setState(() {
      if (pickedFile != null) {
        image = File(pickedFile.path);
      } else {
        print('画像が選択できませんでした。');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const RegisterAppBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: image == null
                ? const Text('画像が選択されていません')
                : Image.file(image!),
          ),
          Center(
            child: TextButton(
              onPressed: getImage,
              child: Text('画像を選択する'),
            ),
          ),
        ],
      ),
    );
  }
}

```


```dart
  File? image;　 //nullableにしておく
  //File image; にするとエラーがなる。
  //late File image; にするとイニシャライズエラーが起こる。
  final picker = ImagePicker();

  Future getImage() async {
    //カメラロールから読み取る
    //final pickedFile = await picker.getImage(source: ImageSource.gallery);
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);
    setState(() {
      if (pickedFile != null) {
        image = File(pickedFile.path);
      } else {
        print('画像が選択できませんでした。');
      }
    });
  }
```


これでできると思います。以上。