如何解决在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没有起作用,这是没有道理的,但是它现在运行良好。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。