[Flutter] image_picker カメラ撮影

ギャラリーなどに保存されている写真、画像を読み出して表示を
image_picker 画像を読み出す
にて実装しましたが、ほぼ同様の設定でカメラ撮影から表示まで可能です

カメラ撮影は、image_picker のほかにcamera、photo_managerがありますが
それぞれ動画やカメラ機能を細かく設定したい場合などに使えます

尚、ここではカメラ撮影の画像を保存するところまではやっていません

image_picker

カメラ撮影

XFile? _image;
final imagePicker = ImagePicker();

Future pickGarally() async {
  // カメラから画像を取得
  final pickedFile = await imagePicker.pickImage(source: ImageSource.camera);
  setState(() {
    if (pickedFile != null) {
      // 画像パスを設定
      _image = XFile(pickedFile.path);
    }
  });
}

XFile? _image;

final imagePicker = ImagePicker();

Future pickGarally() async {

// カメラから画像を取得

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

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('Camera'),)
          ],
        ),
    ),
  );
}

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('Camera'),)

);

}

目次
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 はカメラにアクセスするための権限を取得するため、理由
説明が必要です

Info.plist

<key>NSCameraUsageDescription</key>
<string>カメラを使う理由をユーザーに示す文言を記述</string>

1 2	<key>NSCameraUsageDescription</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 Camera',
      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();
 
  // Cameraから画像を取得
  Future pickGarally() async {
    final pickedFile = await imagePicker.pickImage(source: ImageSource.camera);
    setState(() {
      if (pickedFile != null) {
        _image = XFile(pickedFile.path);
      }
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Image Picker Camera'),
        ),

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

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 Camera',

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();

// Cameraから画像を取得

Future pickGarally() async {

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

setState(() {

if (pickedFile != null) {

_image = XFile(pickedFile.path);

}

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('Image Picker Camera'),

body: Center(

child: Column(

children: <Widget>[

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

ElevatedButton(

onPressed: pickGarally,

child: const Text('Camera'),)

);

}

実行結果

実行して確認しましょう

Android：

ボタンをタップ

カメラ撮影
✔️　をタップ

撮影画像が表示されました

このカメラ撮影で表示されるアニメーション設定は
Android Emulator を作成する時に、Camera Front で
エミュレートがデフォルトで設定されています

Web Cameraにすると、PCのカメラに変えることもできます

References:
image_picker — pub.dev
Image.file