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

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

リンクはこちら

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

ではやっていくうううう

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を開きます。

タグに「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で作成してみました。

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('画像を選択する'),
            ),
          ),
        ],
      ),
    );
  }
}

  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('画像が選択できませんでした。');
      }
    });
  }

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