在Flutter中使用Imager Picker依赖项

问题描述

我的应用程序中有一个功能，可以帮助用户从图库中选择图像或使用相机拍照。

  _getimage(ImageSource source) async {
    // ignore: deprecated_member_use
    File selectedImage = await ImagePicker.pickImage(
      source: source,imageQuality: 50,maxWidth: 400.0,).whenComplete(() {
      setState(() {});
    });
    if (_imageFile == null) return;
    
    setState(() {
      _imageFile = selectedImage;
    });
  }

我正在使用此image_picker dependency，并且遵循在其中找到的示例以及在线其他人可能进行的更新的示例。根据{{3}}的建议，建议在其中添加whenComplete。

当我从图库中选择图像时，它不会更新屏幕上的图像视图小部件。相机选项均无效。我可能会丢失什么？

这是显示图像的“图像”小部件：

return Stack(
    alignment: AlignmentDirectional.bottomCenter,children: <Widget>[
      Image.file(
        _imageFile,fit: BoxFit.cover,height: 250,),Container(
        width: 250.0,height: 100.0,color: Colors.black54,child: Column(
          children: <Widget>[
            Text(
              'Change Image',style: TextStyle(
                color: Colors.white,fontSize: 22.0,fontWeight: FontWeight.w400,Row(
              mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
                //camera button
                IconButton(
                  icon: Icon(FontAwesomeIcons.camera),onpressed: () => _getimage(ImageSource.camera),color: kThemeStyleButtonFillColour,SizedBox(width: 20.0),IconButton(
                  icon: Icon(FontAwesomeIcons.fileImport),onpressed: () => _getimage(ImageSource.gallery),],SizedBox(height: 32.0),);

解决方法

**我将更新您的代码，试试这个**

import 'package:image_picker/image_picker.dart';

class check extends StatefulWidget {
  @override
  _checkState createState() => _checkState();
}

class _checkState extends State<check> {
  File _imageFile;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),body: Stack(
      alignment: AlignmentDirectional.bottomCenter,children: <Widget>[
        _imageFile !=null ? Image.file(
          _imageFile,height: 250,fit: BoxFit.fill,) : Text('No image selected.'),SizedBox(height: 100,),Container(
          width: 250.0,height: 100.0,color: Colors.black54,child: Column(
            children: <Widget>[
              Text(
                'Change Image',style: TextStyle(
                  color: Colors.white,fontSize: 22.0,fontWeight: FontWeight.w400,Row(
                mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
                  //camera button
                  IconButton(
                    icon: Icon(Icons.camera),onPressed: () => _getImage(ImageSource.camera),SizedBox(width: 20.0),IconButton(
                    icon: Icon(Icons.attach_file),onPressed: () => _getImage(ImageSource.gallery),],SizedBox(height: 32.0),)
    );
  }

  _getImage(ImageSource source) async {
    // ignore: deprecated_member_use
    File selectedImage = await ImagePicker.pickImage(
      source: source,imageQuality: 50,maxWidth: 400.0,);

    setState(() {
      _imageFile = selectedImage;
    });
  }
}

就您而言，

   setState(() {
      _imageFile = selectedImage;
    });

不等待选定的图像

尝试一下：

   _getImage(ImageSource source) async {
    // ignore: deprecated_member_use
    File selectedImage = await ImagePicker.pickImage(
      source: source,);
    setState(() {
         _imageFile = selectedImage;
     });
  }

您在if语句中使用了错误的逻辑。

正确的方法，

if(selectedImage != null) { Update image widget here }

我认为imageFile变量最初并未分配任何文件，因此条件imageFile == null始终为true，并且图像小部件从未更新。

我能够使这段代码正常工作，但由于它没有意义，因此该hack仍然击败了我。

我遵循上面给出的建议，因为有等待，所以取消了whenComplete。

我还如下将selectedImage的声明类型从File更改为var：

  _getImage(ImageSource source) async {
    var selectedImage;
    selectedImage = await ImagePicker.pickImage(
      source: source,);

    setState(() {
      _imageFile = selectedImage;
    });
  }

因为我们知道我们期望将File作为返回值，所以为什么var不能工作而File没有起作用，这是没有道理的，但是它现在运行良好。

flutter-dependencies flutter-layout imagepicker