英文:
Flutter: Image.file(File(path)) does not refresh the image after errorBuilder using pickImage
问题
我的应用程序允许用户从图库选择图像并将其保存到之前创建的文件夹中,然后将该图像的路径保存到数据库中。当我进入应用程序页面时,我有一个函数从数据库中读取路径,然后我使用该路径显示图像,使用Image.file(File(path))
。一切都运行正常,但如果用户意外删除文件夹中的图像,我会收到异常,所以我只是使用errorBuilder
来向用户显示找不到图像。问题是,当我在显示errorBuilder
后选择图像时,图像不会刷新,直到我退出页面并返回它,而当没有图像时,选择图像后会立即更改。选择器函数:
Future _pickerLogo() async {
final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
File imageFile = File(image!.path);
imageName = path.basename(imageFile.path);
localImage = await imageFile.copy('${f.imageAppDir}/$imageName');
setState(() {
print(localImage);
dbPath = localImage.toString();
cleanPath = dbPath.replaceAll("File: '", "").replaceAll("'", "");
dbPath = cleanPath;
print('cleanPath when picker $cleanPath');
print('dbpath when picker $dbPath');
});
}
Image.file:
Container(
color: Colors.grey.shade100,
height: 200,
width: 200,
child: dbPath != ''
? Image.file(
File(dbPath),
errorBuilder: imageNotExist,
fit: BoxFit.fill,
)
: Image.asset('assets/logo.png'),
),
errorBuilder Widget:
Widget imageNotExist(context, exception, stackTrack) {
print('exception: $context');
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.error,
color: Colors.orange,
),
Text(
AppLocal.loc.imageNotExist,
style: const TextStyle(color: Colors.redAccent),
textAlign: TextAlign.center,
)
],
);
}
英文:
My app let the user to pick an image from gallery and save it to a folder that I created before, then save the path of that image to the database, and when I enter to the page of my application I have a function to read the path from the database and then I use that path to display the image using Image.file(File(path))
every thing works fine but if the user delete the image by accident from the folder I got an exception so I just use errorBuilder
to show the user that image not found. The problem is when I pick the image after the errorBuilder
shown the image does not refresh until I exit the page and return to it while when there is no image and when I pick the image its change directly.
picker function:
Future _pickerLogo() async {
final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
File imageFile = File(image!.path);
imageName = path.basename(imageFile.path);
localImage = await imageFile.copy('${f.imageAppDir}/$imageName');
setState(() {
print(localImage);
dbPath = localImage.toString();
cleanPath = dbPath.replaceAll("File: '", "").replaceAll("'", "");
dbPath = cleanPath;
print('cleanPath when picker $cleanPath');
print('dbpath when picker $dbPath');
});
}
Image.file:
Container(
color: Colors.grey.shade100,
height: 200,
width: 200,
child: dbPath != ''
? Image.file(
File(dbPath),
errorBuilder: imageNotExist,
fit: BoxFit.fill,
)
: Image.asset('assets/logo.png'),
),
errorBuilder Widget:
Widget imageNotExist(context, exception, stackTrack) {
print('exception: $context');
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.error,
color: Colors.orange,
),
Text(
AppLocal.loc.imageNotExist,
style: const TextStyle(color: Colors.redAccent),
textAlign: TextAlign.center,
)
],
);
}
答案1
得分: 0
未能在不使用`setState`的情况下使其正常工作,所以我添加了一个if语句,如果图像的名称存在于数据库中,那么我会更改数据库路径(`dbPath`),但除非我将其放在`setState`中,否则它不起作用。
英文:
After many attempts and found that if I select another image the Image.file
refreshed the widget, so I did an if statement that if the name of image exist in database then I change the database path which is dbPath
and its not working unless I put it in setState
.
Future _pickerLogo() async {
final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
File imageFile = File(image!.path);
imageName = path.basename(imageFile.path);
//solution begin here
if (path.basename(imageFile.path) == path.basename(dbPath)) {
print('dbPath : $dbPath');
setState(() {
dbPath = '1';
});
print('dbPath : $dbPath');
} else {
print('not exist');
}
//end solution
localImage = await imageFile.copy('${f.imageAppDir}/$imageName');
setState(() {
print(localImage);
dbPath = localImage.toString();
cleanPath = dbPath.replaceAll("File: '", "").replaceAll("'", "");
dbPath = cleanPath;
print('cleanPath when picker $cleanPath');
print('dbpath when picker $dbPath');
});
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论