如何使用 Flutter 的 Image Picker 插件添加相机视图？

Question

我正在尝试使用 this plugin 向我的小部件添加相机视图，但我无法找到任何有关设置相机视图或拍照的代码示例。我只看到一个关于检索存储在设备上的图像的示例。任何帮助表示赞赏。

Answer 1

Flutter 有一个 camera plugin 允许访问相机，显示相机视图并允许拍照。

希望对您有所帮助！

Answer 2

Flutter 有一个图像选择器插件(image_picker: "^0.4.5")，它允许访问相机和画廊。比如

 Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
       setState(() {
         _image = image;
       });
  }

您可以将来源更改为 ImageSource.camera 以从相机获取图像。

Answer 3

拍照和从图库中选取图像的示例代码。

第 1 步： 将此添加到您的包的 pubspec.yaml 文件中：

dependencies:
  image_picker: ^0.6.1+4

第 2 步： Android

在AndroidManifest.xml

中添加用户权限

   <uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

iOS

将两行添加到 ios/Runner/Info.plist

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Need library access to pick images</string>

第 3 步： 现在在您的 Dart 代码中，您可以使用：

import 'package:image_picker/image_picker.dart';

步骤 4

添加此代码

class ImagePickerData extends StatefulWidget {
  List Data;
  int ITId;
  ImagePickerData({this.Data, this.ITId});
  @override
  AttachmentState createState() => new AttachmentState();
}

class AttachmentState extends State<ImagePickerData> {
  File _image;

  @override
  Widget build(BuildContext context) {
    Future getCamera() async {
      var image = await ImagePicker.pickImage(source: ImageSource.camera);
      setState(() {
        _image = image;
      });
    }

    Future getGallery() async {
      var image = await ImagePicker.pickImage(source: ImageSource.gallery);
      setState(() {
        _image = image;
      });
    }

    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          height: 200.0,
          child: Center(
            child: _image == null
                ? Text('No image selected.')
                : Image.file(_image),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(bottom: 10.0),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    RaisedButton(
                        elevation: 4.0,
                        onPressed: () {
                          getGallery();
                        },
                        textColor: Colors.white,
                        padding: const EdgeInsets.all(0.0),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(80.0)),
                        child: Container(
                            decoration: const BoxDecoration(
                                gradient: LinearGradient(
                                  colors: <Color>[
                                    Color(0xFFf7418c),
                                    Color(0xFFfbab66),
                                  ],
                                ),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(80.0))),
                            padding: const EdgeInsets.fromLTRB(30, 10, 30, 10),
                            child: Row(
                              mainAxisSize: MainAxisSize.max,
                              children: <Widget>[
                                Text('Picture From Gallery',
                                    style: TextStyle(fontSize: 15)),
                              ],
                            ))),
                    RaisedButton(
                      elevation: 4.0,
                      onPressed: () {
                        getCamera();
                      },
                      textColor: Colors.white,
                      padding: const EdgeInsets.all(0.0),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(80.0)),
                      child: Container(
                          decoration: const BoxDecoration(
                              gradient: LinearGradient(
                                colors: <Color>[
                                  Color(0xFFf7418c),
                                  Color(0xFFfbab66),
                                ],
                              ),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(80.0))),
                          padding: const EdgeInsets.fromLTRB(30, 10, 30, 10),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Text('Take Picture',
                                  style: TextStyle(fontSize: 15)),
                            ],
                          )),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Answer 4

我们只需要使用图像选择器库https://pub.dev/packages/image_picker

    File _storedImage;
    final imageFile = await ImagePicker.pickImage(
          source: ImageSource.camera,
          maxWidth: 600,
        );

      setState(() {
          _storedImage = imageFile;
        });

imageFile 变量将包含我们在显示小部件时使用的 File 对象

我们可以在小部件中将文件对象显示为

        Image.file(
                  _storedImage,
                  fit: BoxFit.cover,
                  width: double.infinity,
                  )

更新： Image Picker 依赖项已更新 https://pub.dev/packages/image_picker 现在使用

ImagePicker picker = ImagePicker();
final pickedFile = await picker.getImage(source: ImageSource.camera);

Answer 5

从 image_picker 插件的 0.6.7 版开始，插件的 API 略有更改以允许存在 Web 实现。

returned dart:io File 对象的旧方法已标记为已弃用，并引入了 return PickedFile 对象的一组新方法。

More information - ImagePicker Example

image_picker: ^0.6.7+14

在pubspec.yaml

中添加以上依赖

iOS developers – 你需要在这个文件中添加一些键值对 /ios/Runner/Info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>Need to take picture from photo library</string>
<key>NSCameraUsageDescription</key>
<string>Need to take picture using Camera</string>

File _image;

final picker = ImagePicker();

导入这些：

导入‘dart:io’；导入‘包：image_picker/image_picker.dart’；

 _getImage(ImageSource imageSource) async 
{
    PickedFile imageFile = await picker.getImage(source: imageSource);
//if user doesn't take any image, just return.
    if (imageFile == null) return;
    setState(
      () {
//Rebuild UI with the selected image.
        _image = File(imageFile.path);
      },
    );
  }

调用_getImage()

ElevatedButton.icon(
                  onPressed: () => _getImage(ImageSource.gallery),
                  icon: Icon(Icons.image),
                  label: Text('gallery'),
                ),
                ElevatedButton.icon(
                  onPressed: () => _getImage(ImageSource.camera),
                  icon: Icon(Icons.camera),
                  label: Text('camera'),
                ),

如何使用 Flutter 的 Image Picker 插件添加相机视图？

How do I add a camera view with Image Picker plugin for Flutter?

dart

flutter