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,
                  )

更新：图片选择器依存关系已更新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实施。

将返回dart：io File对象的旧方法标记为已弃用，并引入了一组新的返回PickedFile对象的方法。

More information - ImagePicker Example

image_picker: ^0.6.7+14

在pubspec.yaml中添加以上依赖项

iOS开发人员–您需要在此文件/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”；导入“ package：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插件添加摄像机视图？

5 个答案: